Web UI迴歸測試 -- BackstopJS 入門

 

BackstopJS是一個測試工具，用於測試ui圖和實際項目是否誤差。

 

話很少說，直接啓動一個項目吧測試吧。

 

1.首先全局安裝BackstopJS

npm install -g backstopjs

 

安裝過程有一點慢，須要耐心的等待把全部依賴下載成功，不然可能使用一些Backstop命令會失敗。

 

2.建立一個文件夾，進入該文件夾。 使用npm init 生成一個Package.json  （能夠忽略這步)  ，接着使用backstop init命令生成一個backstop的初始項目

backstop init

 

3.這時候根目錄會生成一個文件夾叫作 backstop_data  以及一個 backstop.json的配置文件（這個文件很重要）。

 

4.打開backstop.json文件，獲得大概以下面圖所示的數據

 

{
  "id": "qqmap",
  "viewports": [
    {
      "label": "phone",
      "width": 375,
      "height": 667
    },
    {
      "label": "tablet",
      "width": 1024,
      "height": 768
    }
  ],
  "onBeforeScript": "puppet/onBefore.js",
  "onReadyScript": "puppet/onReady.js",
  "scenarios": [
    {
      "label": "mapindex",
      "cookiePath": "backstop_data/engine_scripts/cookies.json",
      "url": "https://map.qq.com/m/",
      "referenceUrl": "",
      "readyEvent": "",
      "readySelector": "",
      "delay": 0,
      "hideSelectors": [],
      "removeSelectors": [],
      "hoverSelector": "",
      "clickSelector": "",
      "postInteractionWait": 0,
      "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",
    "html_report": "backstop_data/html_report",
    "ci_report": "backstop_data/ci_report"
  },
  "report": ["browser"],
  "engine": "puppeteer",
  "engineOptions": {
    "args": ["--no-sandbox"]
  },
  "asyncCaptureLimit": 5,
  "asyncCompareLimit": 50,
  "debug": false,
  "debugWindow": false
}

 

裏面的id是測試截圖的別名，隨便取什麼名字都行，重要的是配置"viewports"下面環境的尺寸

scenarios[n].label也是配置別名,這是必須的

scenarios[n].url 您想要測試的端點/文檔。它能夠是一個絕對URL，也能夠是當前工做目錄的本地URL。

這幾個基礎的配置完成事後，就能夠測試了。（騙你的）

 

5.如今還不能測試，由於如今只有測試的真實項目，並無ui對比圖，因此如今須要在backstop_data裏面建立一個文件夾 backstop_reference,在這個裏面放入ui 圖片，要和生成的截圖命名同樣。（等等，我不知道最後截圖生成的名字是什麼，好吧）

仍是在根目錄輸入命令： backstop test

backstop test

此時backstop會開始編譯運行，打開一個網頁，並會生成截圖，對比頁面與ui圖的差別。 這時候由於尚未對比圖，由於頁面沒法比較。可是你此刻會發現 backstop_data文件夾裏面會生成一個測試文件夾 叫作 bitmaps_test。打開裏面的文件夾，找到一個你在backstop.json 配置的id + scenarios.label 命名開頭圖片，這就是你須要對比的文件名。 複製這個名字出來。 如今你能夠在backstop_reference文件夾裏面 把ui 設計的圖命名爲剛纔複製的名字了，而且把 bitmaps_test文件夾所有刪除。

 

6.從新使用 backstop test命令

 

如今自動打開的網頁就會生成對比圖片

 

 

已經對比成功了，更多查看更多的配置請參考github 文檔

點擊訪問 ->  github 地址