css的回歸測試工具backstopjs應該如何使用

這次跟大家介紹的是backstopjs,它是可以自動的對比UI出的圖與前端寫好的圖，不一致的地方會標出，挺好用的，但是寫的過程中也會遇到一些問題，現在寫出來，記錄一下

首先，要先安裝backstop，

<pre style="
font-family
: "Microsoft YaHei"; padding: 5px; max-width: 680px !important; 
background-color
: rgb(246, 246, 246); border: 1px dotted rgb(170, 170, 170); 
white-space
: pre-wrap; 
word-wrap
: break-word;">npm install -g backstopjs

安裝中之後，在適當的位置新建資料夾，執行

<pre style="font-family: "Microsoft YaHei"; padding: 5px; max-width: 680px !important; background-color: rgb(246, 246, 246); border: 1px dotted rgb(170, 170, 170); white-space: pre-wrap; word-wrap: break-word;"> backstop init

初始化之後

點開backstop_data資料夾

開啟package.json

<pre style="font-family: "Microsoft YaHei"; padding: 5px; max-width: 680px !important; background-color: rgb(246, 246, 246); border: 1px dotted rgb(170, 170, 170); white-space: pre-wrap; word-wrap: break-word;">{ "id": "backstop_default", "viewports": [ //viewports 为生成的截图的格式，可以写多个，至少为一个
{ "label": "phone", //手机 "width": 320, "height": 480 },
{ "label": "tablet", //平板 "width": 1024, "height": 768 }
], "onBeforeScript": "chromy/onBefore.js", "onReadyScript": "chromy/onReady.js", "scenarios": [
{ "label": "BackstopJS Homepage", "cookiePath": "backstop_data/engine_scripts/cookies.json", "url": "https://garris.github.io/BackstopJS/", //这个路径为我们将要截图的网址 "referenceUrl": "", "readyEvent": "", "readySelector": "", "delay": 0, "hideSelectors": [], "removeSelectors": [], "hoverSelector": "", "clickSelector": "", "postInteractionWait": "", "selectors": [], "selectorExpansion": true, "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": "chrome", "engineFlags": [], "asyncCaptureLimit": 5, "asyncCompareLimit": 50, "debug": false, "debugWindow": false }

現在我們以百度地圖的為例，將scenarios的url  改為 https://map.baidu.com/mobile/webapp/index/index/

把導出ipone的格式為基礎，將寬改為375高改為667

此時，執行backstop  test

會自動開啟一個頁面

此時的backstop_data資料夾為

然後再執行backstop approve ，此時會把剛剛生成的圖片當作標準，然後我們再把網址改為

https://map.baidu.com/mobile/webapp/index/index/qt=cur&wd=%E4%B8%8A%E6%B5%B7%E5%B8%82&from=maponline&tn=m01&ie=utf-8=utf-8/tab=line

再執行backstop  test ,經過執行之後會把兩個頁面的不同標註出來

#此時的結果就是對比之後的結果，就可以依照比較的不同來改變。

此時的backstop_data 的里出多出bitmaps_reference

#總結：在執行backstop approve的時候，也可以執行backstop reference ，是把目前得到的圖片當作參照，

也可以把自己定義bitmaps_reference的圖片，即自訂參照圖片，就是，把UI的圖，直接放在這裡面，但是有一點需要注意的是，圖片的命名需要準守backstop的起名規則，即可以，把test之後產生的圖片名稱直接複製命名就行

還有就是，我最初跟著老師敲的時候，就是無法生成手機端的照片，

我又查資料，發現有人把label寫成name

我又來回測試了下，竟然就好了，無論是label還是name都是可以的

現在就是比較網頁了

我現在寫的只是最基本的用法，在github上有非常詳細的用法，需要的時候，可以去github上查看。

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

ES6 module語法載入import export

CSS的偽類別選擇器

#HTML中關於盒子模型的總結

#在HTML中各類型盒子的基線應如何決定

#

以上是css的回歸測試工具backstopjs應該如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！