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 有時候會報錯,但是不影響使用