css回歸測試工具:backstopjs

志佳老師講了一個自動化的工具,backstopjs,可以自動的對比UI出的圖與前端寫好的圖,不一致的地方會標出,挺好用的,但是寫的過程中也會遇到一些問題,現(xiàn)在寫出來,記錄一下

首先,要先安裝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>

安裝中之后,在適當?shù)奈恢眯陆ㄎ募A,執(zhí)行

<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</pre>

初始化之后

技術(shù)分享圖片

點開backstop_data文件夾

技術(shù)分享圖片

打開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/", //這個路徑為我們將要截圖的網(wǎng)址 "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 }</pre>

現(xiàn)在我們以百度地圖的為例,即把 scenarios的url 改為 https://map.baidu.com/mobile/webapp/index/index/

把導出ipone的格式為基礎(chǔ),將寬改為375 高改為667

此時,執(zhí)行backstop test

會自動打開一個頁面

技術(shù)分享圖片

為測試網(wǎng)址的手機和平板的截圖

此時的backstop_data文件夾為

技術(shù)分享圖片

然后再執(zhí)行 backstop approve ,此時會把剛剛生成的圖片作為標準,然后我們再把網(wǎng)址改為 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

再執(zhí)行backstop test ,經(jīng)過執(zhí)行之后會把兩個頁面的不同標注出來

技術(shù)分享圖片
技術(shù)分享圖片

此時的結(jié)果就是對比之后的結(jié)果,就可以按照比較的不同進行更改。

此時的backstop_data 的里出多出bitmaps_reference

技術(shù)分享圖片

總結(jié):在執(zhí)行backstop approve的時候,也可以執(zhí)行backstop reference ,是把當前得到的圖片作為參照,

也可以把自己定義bitmaps_reference的圖片,即自定義參照圖片,就是,把UI的圖,直接放在這里面,但是有一點需要注意的是,圖片的命名需要準守backstop的起名規(guī)則,即可以,把test之后生成的圖片名直接復制命名就行

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

技術(shù)分享圖片

我又查資料,發(fā)現(xiàn)有人把label寫成name

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

現(xiàn)在就是對比網(wǎng)頁了

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容