前端自動化測試工具：SlimerJS、phantomJS 和 CasperJS

對於富客戶端的 Web 應用頁面，自動登陸、頁面修改、抓取頁面內容、屏幕截圖、頁面功能測試…面對這些需求，使用後端語言須要花費很多的精力才能實現。此時 SlimerJS、phantomJS 或 CasperJS 或許是更好的一種選擇。javascript

1、PhantomJS 和 SlimerJS

PhantomJS 和 SlimerJS 都是服務器端的 JavaScript API 工具，能夠理解爲無界面的可編程操做的瀏覽器。它們大部分的 API 接口都很類似，使用方法也很接近，最大的不一樣在於：PhantomJS 基於 Webkit 內核，不支持 Flash 的播放；SlimerJS 基於火狐的 Gecko 內核，支持 Flash播放，而且執行過程會有頁面展現。html

藉助 PhantomJS 或 SlimerJS 所提供的 API，你幾乎可使用 javascript 模擬在瀏覽器上的任何操做：打開頁面、前進/後退、頁面點擊、鼠標滾動、DOM 處理、CSS 選擇器、Canvas 畫布、SVG畫圖，如此等等。前端

例如，對頁面的某個區域截圖：java

SlimerJS 示例：node

var webpage = require('webpage').create();
webpage.open('http://www.meizu.com') // 打開一個網頁
.then(function() { // 頁面加載完成後執行
    //保存頁面截屏
    webpage.viewportSize = {
        width: 650,
        height: 320
    };
    webpage.render('page.png', {
        onlyViewport: true
    });
    //再打開一個網頁
    return webpage.open('http://bbs.meizu.com');
})
.then(function() {
    // 點擊某個位置
    webpage.sendEvent("click", 5, 5, 'left', 0);
    slimer.exit(); //退出
});

將以上代碼保存爲 test_slimerjs.js，而後執行：python

slimerjs test_slimerjs.js

PhantomJS 示例：git

var webpage = require('webpage').create();
var url = 'http://www.phantomjs.org/';
webpage.open('http://www.meizu.com', function (status) {
  //打開一個頁面
}).then(function(){
    //保存頁面截屏
    webpage.viewportSize = {
        width: 650,
        height: 320
    };
    webpage.render('page.png', {
        onlyViewport: true
    });
    //再打開一個網頁
    return webpage.open('http://bbs.meizu.com');
}).then(function(){
    webpage.sendEvent("click", 5, 5, 'left', 0);
    phantom.exit();
});

將以上代碼保存爲 test_phantomjs.js，而後執行：github

phantomjs test_phantomjs.js

能夠看到，上面的代碼內容很是類似，實現的功能都是打開頁面，而後截圖。web

參考：npm

http://phantomjs.org/
https://github.com/ariya/phantomjs
http://slimerjs.org/
http://docs.slimerjs.org/current/
https://github.com/laurentj/slimerjs/

2、前端自動化測試工具 CasperJS

CasperJS 是一個開源的導航腳本和測試工具。它提供了一套用於 Web 應用測試的方法組件，這些組件基於 PhantomJS 或 SlimerJS 所提供的 javascript API，實現對 Web 應用的功能執行。CasperJS 簡化了完整的導航場景的過程定義，提供了用於完成常見任務的實用的高級函數、方法和語法。如：

定義和整理導航步驟
表單填充
點擊、跟蹤連接
區域、頁面截圖
斷言遠程DOM
日誌、事件
資源下載，包括二進制資源
捕捉錯誤，並作出相應的響應
……

使用 CasperJS 的方法組件，能夠更方便的書寫前端自動化測試腳本。

CasperJS 示例：

var utils = require('utils');
var webpage = require('casper').create({
    //verbose: true,
    logLevel: 'debug',
    viewportSize: {
        width: 1024,
        height: 768
    },
    pageSettings: {
        loadImages: true,
        loadPlugins: true,
        XSSAuditingEnabled: true
    }
});

//打開頁面
webpage.start()
    .thenOpen('http://www.meizu.com', function openMeizu(res) {
        this.echo('打印頁面信息');
        res.body = '';//不打印body信息
        utils.dump(res);
        //點擊登陸按鈕
        if (this.exists("#_unlogin")) {
            this.echo('點擊登陸按鈕');
            this.click("#_unlogin a:nth-child(1)");
            this.wait(3000, function wait3s_1() {
                if (this.exists("form#mainForm")) {
                    this.echo("須要登錄，填充帳號信息。。。");
                    //填充表單帳號
                    this.fill('form#mainForm', {
                        'account': 'lzwy***@flyme.cn',
                        'password': '********'
                    }, true);
                    this.capture('meizu_login_page.png');
                    this.wait(3000, function wait3s_2() {
                        //登陸按鈕存在，點擊
                        if (this.exists("#login")) {
                            this.echo('提交登陸');
                            this.click("#login");
                        }
                    });
                }
            });
        }
    })
    .then(function capture() {
        if (this.exists('#mzCustName')) {
            this.echo('登陸成功！開始截圖存儲..');
        } else {
            this.echo('登陸失敗！請查看截圖文件')
        }
        //截圖
        this.capture('meizu.png');
        this.captureSelector('meizu_header.png', 'div.meizu-header');
    })
    .then(function exit() {
        this.echo('執行完成，退出');
        this.exit();
    })
    .run();

將以上代碼保存爲 test_casperjs.js，而後執行：

casperjs test_casperjs.js

效果參考：

圖1 登錄頁

圖2 首頁登錄成功

圖3 局部截取（header）

提示：可在 create casper 對象時進行一些初始化設置，好比不用請求圖片資源，CSS資源，以及不須要的JS等資源，這樣能夠加快測試執行速度。

http://casperjs.org/
http://www.qiqishare.com/

3、安裝與使用 SlimerJS、phantomJS 和 CasperJS

1. 安裝

nodejs 安裝：

http://nodejs.org

https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager

CasperJS 安裝（須要 python2.6 以上版本支持）：

執行命令：

npm install -g casperjs

http://docs.casperjs.org/en/latest/installation.html
https://www.python.org/download/

SlimerJS 安裝（須要先安裝 Firefox 或 XulRunner ）：

執行命令：

npm install -g slimerjs

http://www.slimerjs.org/download.html
http://docs.slimerjs.org/current/installation.html

phantomJS 安裝：

npm install -g phantomjs-prebuilt

或者下載 phantomJS：http://phantomjs.org/download.html
解壓並配置 phantomjs.exe 訪問路徑到環境變量。

2. 使用

將上文示例保存爲 js 文件(如 test_*.js) ，而後打開命令行，進入到該文件所在目錄下，執行命令：

slimerjs test_slimerjs.js

phantomjs test_phantomjs.js
# 默認使用 phantomjs 引擎
casperjs test_casperjs.js
# 使用 slimerjs 引擎
casperjs test_casperjs.js –disk-cache=yes –engine=slimerjs

可對比查看執行過程與結果。

本文只是簡單介紹三種工具的功能與基本安裝使用，具體功能應用可參考其各自文檔，也可在討論區書寫您的意見和建議。

附：前端自動化測試工具 Selenium

Selenium 也是一個前端自動化測試工具，與 casperJS 的無界面方式不一樣，Selenium 是直接運行於瀏覽器中，而且經過插件能夠實現腳本錄製等功能。

http://docs.seleniumhq.org/