BackstopJS具有以下特性：
- 支持多頁(yè)面、多測(cè)試用例測(cè)試
- 可以使用腳本模擬出用戶的交互動(dòng)作
- 提供命令行和瀏覽器兩種形式報(bào)告
- 支持PhantomJS或SlimerJS做瀏覽器引擎柿冲，事實(shí)上兩種引擎也可以改造出基于快照對(duì)比的回歸測(cè)試方案信卡，但是BackstopJS使用更簡(jiǎn)單惰聂，并且做到了可以通過配置切換引擎执桌。
- 支持設(shè)置多種瀏覽器尺寸家厌，方便實(shí)現(xiàn)響應(yīng)式布局測(cè)試
- 可以測(cè)試HTML5元素扔仓，比如網(wǎng)頁(yè)字體和Flexbox
- 提供了擴(kuò)展接口褐奥，可供用戶集成到其他測(cè)試系統(tǒng)中
安裝方法為：
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">npm install -g backstopjs</pre>
使用方法：
BackstopJS的具體工作流程可以分為3步：
1.配置：該步驟用戶需要?jiǎng)?chuàng)建一個(gè)backstop.json文件，設(shè)置屏幕的尺寸翘簇、訪問頁(yè)面的url撬码、測(cè)試區(qū)域的dom選擇器、準(zhǔn)備事件版保、用戶交互等
2.準(zhǔn)備測(cè)試樣板：生成一系列頁(yè)面快照呜笑，之后BackstopJS將根據(jù)這些快照作為頁(yè)面是否存在bug的判斷樣板
3.測(cè)試：使用當(dāng)前頁(yè)面樣式快照和之前的樣板快照進(jìn)行比較，如果出現(xiàn)不希望的變化就報(bào)告出來
BackstopJS提供了兩種使用方式彻犁，cli和commonjs模塊叫胁。cli可以提供命令行式的工具，而commonjs模塊可以讓我們?cè)趎odejs里面調(diào)用汞幢，方便繼承其他測(cè)試系統(tǒng)中驼鹅。
我們簡(jiǎn)單配置一個(gè)回歸測(cè)試的dome：
1.配置
這是BackstopJS的核心，配置文件默認(rèn)名為backstop.json森篷，下面是測(cè)試配置的示例：
[
](javascript:void(0); "復(fù)制代碼")
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">{ //測(cè)試用例id输钩，用于BackstopJS管理和為文件命名
"id": “backstop_prod_test",
//測(cè)試視口，就是配置各種分辨率 "viewports": [
{ "name": "phone", "width": 320, "height": 480
}],
//在執(zhí)行所有腳本前疾宏、頁(yè)面加載后執(zhí)行的腳本张足。通過他我們可以執(zhí)行用express做一個(gè)靜態(tài)服務(wù)器 "onBeforeScript": "onBefore.js", "onReadyScript": “onReady.js", //測(cè)試用例
"scenarios": [
{ //測(cè)試用例名稱
"label": “homepage",
//測(cè)試的地址 "url": “https://garris.github.io/BackstopJS/", //測(cè)試的區(qū)域，支持css選擇器坎藐，然后BackstopJS會(huì)將選擇器指定的地方截屏
"selectors": [ ".class",
“#id" ], "selectorExpansion": true, "hideSelectors": [], "removeSelectors": [], "readyEvent": null, "delay": 500, "misMatchThreshold" : 0.1,
//在各種的測(cè)試用例執(zhí)行時(shí)为牍、頁(yè)面加載后前行,我們可以把我們對(duì)頁(yè)面操作的模擬腳本放進(jìn)onReady.js中 "onBeforeScript": "onBefore.js", "onReadyScript": "onReady.js" }
],
//測(cè)試圖片的輸出路徑 "paths": { "bitmaps_reference": "backstop_data/bitmaps_reference",
"bitmaps_test": "backstop_data/bitmaps_test", "casper_scripts": "backstop_data/casper_scripts", "html_report": "backstop_data/html_report", "ci_report": "backstop_data/ci_report" }, //測(cè)試用的瀏覽器或模擬器，這里用的是PhantomJS
"engine": “phantomjs",
//報(bào)告的形式岩馍，支持命令行和瀏覽器兩種 "report": [“browser"], //是否打印測(cè)試日志
"debug": false }</pre>
](javascript:void(0); "復(fù)制代碼")
通過設(shè)置viewports我們可以配置多種屏幕尺寸碉咆，這樣可以完成響應(yīng)式布局的測(cè)試。
scenarios可以配置多個(gè)測(cè)試用例蛀恩。url指定了需要測(cè)試頁(yè)面的地址疫铜；selector指定要測(cè)試的區(qū)域，如果整個(gè)頁(yè)面都是測(cè)試區(qū)域可以直接給document或者是body双谆。
在測(cè)試用例的onReadyScript中我們可以設(shè)置模擬用戶的操作的腳本壳咕，如：
[
](javascript:void(0); "復(fù)制代碼")
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">module.exports = function(casper, scenario, vp) {
// Example: setting cookies
casper.echo("Setting cookies");
casper.then(function(){
casper.page.addCookie({some: 'cookie'});
}); // casper.thenOpen() demonstrates a redirect to the original page with your new cookie value.
// this step is not required if used with onBeforeScript
casper.thenOpen(scenario.url); // Example: Adding script delays to allow for things like CSS transitions to complete.
casper.echo( 'Clicking button' );
casper.click( '.toggle' );
casper.wait( 250 ); // Example: changing behavior based on config values
if (vp.name === 'phone') {
casper.echo( 'doing stuff for just phone viewport here' );
} // ...do other cool stuff here, see Casperjs.org for a full API and many ideas.
}</pre>
](javascript:void(0); "復(fù)制代碼")
這些腳本都是放在casper_scripts配置的目錄中席揽。
2.準(zhǔn)備樣板圖
執(zhí)行命令行：
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">backstop reference </pre>
backstop會(huì)自動(dòng)截取屏幕整個(gè)樣板圖，并會(huì)存在bitmaps_reference指定的路徑下谓厘。
為了能夠和服務(wù)器集成幌羞，我們使用commonjs模塊的形式調(diào)用backstopjs，如：
[
](javascript:void(0); "復(fù)制代碼")
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">var http = require('http'); var express = require('express'); var backstop = require('backstopjs');
var path = require('path'); var app = express();
app.use("/", express.static(path.join(__dirname ,'../html/')));
// 創(chuàng)建服務(wù)端
var sever = http.createServer(app).listen('3000', function() { //執(zhí)行backstop backstop('reference').then(function () {
sever.close();
});
});</pre>
](javascript:void(0); "復(fù)制代碼")
在我們重構(gòu)項(xiàng)目之前竟稳，可以運(yùn)行這個(gè)腳本属桦，這樣就可以生成樣板圖，為重構(gòu)后做測(cè)試使用他爸。
生成的樣板圖格式如下圖：
3.測(cè)試
在重構(gòu)樣式后執(zhí)行命令行：
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">backstop test</pre>
同樣為了能夠和服務(wù)器集成聂宾，我們使用commonjs模塊的形式調(diào)用backstopjs，如：
[
](javascript:void(0); "復(fù)制代碼")
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">var http = require('http'); var express = require('express'); var backstop = require('backstopjs');
var path = require('path'); var app = express();
app.use("/", express.static(path.join(__dirname ,'../html/')));
// 創(chuàng)建服務(wù)端
var sever = http.createServer(app).listen('3000', function() { //執(zhí)行backstop backstop('test').then(function () {
sever.close();
});
});</pre>
](javascript:void(0); "復(fù)制代碼")
如果新生成的圖片和樣板圖不一樣诊笤，就會(huì)報(bào)錯(cuò)系谐。生成的報(bào)告有兩種形式——命令行報(bào)告和瀏覽器報(bào)告，這里展示的是瀏覽器報(bào)告結(jié)果：
這里展示了backstopjs做自動(dòng)化回歸測(cè)試的一個(gè)例子盏混，backstopjs基本能夠滿足我們的需求蔚鸥，可以支持響應(yīng)式布局測(cè)試、可以和服務(wù)器集成许赃、可以切換瀏覽器引擎等止喷。不過也有缺點(diǎn)，因?yàn)镻hantomJS和SlimerJS分別是使用webkit(blink混聊，chrome的內(nèi)核)和 Gecko (Firefox內(nèi)核)作為內(nèi)核弹谁，因此無(wú)法模擬ie瀏覽器做測(cè)試.
