?

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 地址??

?

轉載于:https://www.cnblogs.com/zzd0916/p/10076552.html

總結

以上是生活随笔為你收集整理的Web UI回归测试 -- BackstopJS 入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。