淺談backstop.js
backstopjs
什麼是backstop
BackstopJS就是一個能夠實現css自動化迴歸測試的工具,BackstopJS是一個基於比較網站快照的變化的迴歸測試工具,非常適合給專案中的樣式做迴歸測試,可以確保我們在重構網站樣式的時候樣式不發生變化,而且他支援設定多種瀏覽器尺寸,可以測試響應式佈局。
比較下resemble.js 和phantomCss,backstop算是比較容易上手使用的,方便配置,phantomCss配合casper進行截圖迴歸測試還是挺不錯的,但是兩張圖diff的話不是很穩定,並且慢,目前phantomCss已經不維護了,不再支援最新phantomjs,resemblejs呢,入手困難,文件不容易理解,網路上只有英文文件,國內介紹resemblejs的文章很少.
安裝方法:
npm i backstopjs -g
輸入
backstop -v //顯示版本號標明安裝成功
目錄介紹
├── backstop_data
│ └── bitmaps_reference //儲存樣板圖的地方
│ └── bitmaps_test //截圖儲存的地方
│ └── engine_scripts //配置靜態伺服器,自定義指令碼casper/puppet/chromy
│ └──clickAndHoverHelper
│ └──loadCookies
│ └──onBefore
│ └──onReady
│ └──waitForHelperHelper
│ └── html_report //執行test後彈出的html介面
├── backstop.json //backstop的配置檔案
配置檔案介紹 ----連蒙帶猜
{
//測試用例id,用於螢幕截圖命名。BackstopJS將自動為您生成一個,以避免命名與BackstopJS資源的衝突。
"id": "backstop_default",
//測試視口,就是配置各種解析度
"viewports": [{
"label": "phone", // iphone
"width": 320,
"height": 480
},
{
"label" : "phone", // iphone
"width": 750,
"height": 960
},
{
"label": "tablet", //平板
"width": 1024,
"height": 768
}
],
//在執行所有指令碼前、頁面載入後執行的指令碼。通過他我們可以執行用express做一個靜態伺服器 支援casper chromy puppet
"onBeforeScript": "puppet/onBefore.js",
"onReadyScript": "puppet/onReady.js",
//測試用例
"scenarios": [{
"label": "BackstopJS Homepage", //測試名稱
"cookiePath": "backstop_data/engine_scripts/cookies.json", //設定cookies
"url": "https://garris.github.io/BackstopJS/", //所測試的url
"referenceUrl": "", //建立引用時指定不同的狀態或環境。
"readyEvent": "", //預定義的字串記錄到控制檯來觸發螢幕捕獲。---實現非同步互動
"readySelector": "", //等到此選擇器存在後再繼續 ---實現非同步互動
"delay": 0, //等待幾秒後
"hideSelectors": [], //設定為visibility的選擇器陣列:hidden
"removeSelectors": [], //設定為display的選擇器陣列:none
"hoverSelector": "", //滿足上述條件後 - 使用此指令碼修改螢幕前的UI狀態鏡頭,例如懸停,點選等
"clickSelector": "", //在螢幕截圖之前單擊指定的DOM元素。
"clickSelectors": "", // *僅限Puppeteer *獲取selctors陣列 - 模擬多個順序點選互動。
"postInteractionWait": 0, //在與hoverSelector或clickSelector互動後等待選擇器(可選擇接受以ms為單位的等待時間。想法用於單擊或懸停元素轉換。預設使用onReadyScript)
"selectors": [], //選擇需要截圖的選擇器
"selectorExpansion": true, //定位元素
"expect": 0, //跟選擇器配合使用,說期望找到的選擇器的數量跟配置的數量是否匹配,不匹配的話表示測試失敗
"misMatchThreshold": 0.1, //允許通過測試的不同畫素的百分比
"requireSameDimensions": true //測試必須與參考尺寸相同
}],
"paths": {
"bitmaps_reference": "backstop_data/bitmaps_reference", //儲存樣板圖
"bitmaps_test": "backstop_data/bitmaps_test", //截圖輸出路徑
"engine_scripts": "backstop_data/engine_scripts", //js配置路徑
"html_report": "backstop_data/html_report", //顯示對比圖的html
"ci_report": "backstop_data/ci_report"
},
//報告的形式,支援命令列和瀏覽器兩種
"report": ["browser"],
"engine": "casper", //配置引擎屬性,slimerjs(Gecko / Mozilla,需要安裝),casper,chromy(webkit)
"engineOptions": { //配置引擎屬性的預設值
"casperFlags": [
"--engine=slimerjs",
"--proxy-type=http",
"--proxy=proxyIp:port",
"--proxy-auth=user:pass"
]
},
"asyncCaptureLimit": 5, //一次能捕獲5個螢幕
"asyncCompareLimit": 50, //配置測試期間所需的RAM量
//是否列印測試日誌
"debug": false,
"debugWindow": false,
"resembleOutputOptions": { //比較差異輸出圖片的配置
"errorColor": {
"red": 255,
"green": 0,
"blue": 255
},
"errorType": "movement",
"transparency": 0.3,
"ignoreAntialiasing": true
}
}
使用方法
backstop很方便,開箱即用
在檔案裡執行,便工具初始化了
backstop init
裡面有寫好的例子直接執行,在backstop_data/bitmaps_test 可以看到截圖
backstop test
把上一個backstop test所儲存的截圖設定為樣板圖,再次執行 backstop test的時候,當前截圖跟樣板圖進行比較,生成diff圖
backstop approve
執行backstop reference ,能把當前配置的圖片儲存到bitmaps_reference,當再次執行 backstop test 的時候,會把當前截圖跟樣板圖進行比較,生成diff圖
backstop reference
如何對UI?
可以跟設計稿比較,把設計稿按照存到bitmaps_reference,命名規範按照backstop給的格式命名,直接執行backstop test 就能看到設計稿跟自己寫的網頁區別哪裡,節約對UI的時間
還能為了能夠和伺服器整合,我們使用commonjs模組的形式呼叫backstopjs,
引入方法
const backstop = require(' backstopjs ');
//執行
backstop('test')
.then(() => {
// test successful
}).catch(() => {
// test failed
});
例子
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/')));
// 建立服務端
var sever = http.createServer(app).listen('3000', function() {
//執行backstop test
backstop('test').then(function () {
sever.close();
});
//執行backstop reference
// backstop('reference').then(function () {
// sever.close();
// });
});
當前專案裡安裝配置backstop,可通過npm 執行指令碼,只要全域性安裝了packstopjs,在package.json配置,執行npm run init 便能使用了
"scripts": {
"approve": "backstop approve",
"test": "backstop test", //注意別跟vue-cli下的e2e/unit自動化測試命令重複了
"init": "backstop init"
}
有兩個疑問?
- backstop.json 裡的 viewports 截圖大小配置不管用,除了官網,我暫時沒查出什麼原因
- 執行 backstop test 有時候會報錯,但是不影響使用