本文章轉(zhuǎn)載于搜狗測試
測試需求
日常任務(wù)中涉及到一些和線上樣式對比的需求脓匿，如無線resin版本升級，需要驗證下升級后頁面樣式與線上升級之前的版本頁面樣式展現(xiàn)是否一致渔隶，由于無線搜索涉及到的query較多御蒲，且不同query對應(yīng)的結(jié)果樣式差別較大，因此通過人工的方式來比較幾乎是不可能的平委，那如何解決這個問題呢？
技術(shù)解決方案
PhantomJS+圖片對比實現(xiàn)無線網(wǎng)頁樣式與線上樣式驗證夺谁。
涉及到的技術(shù)工具：Python廉赔、Phantomjs、Beyond Compare匾鸥。
PhantomJS簡介
先介紹下什么是PhantomJS蜡塌，PhantomJS 是一個基于 WebKit 的服務(wù)器端 JavaScript API。它全面支持web而不需瀏覽器支持勿负，其快速岗照，原生支持各種Web標準： DOM 處理, CSS 選擇器, JSON, Canvas, 和 SVG。說白了笆环，PhantomJS就是一個沒有UI的瀏覽器。其中頁面中的翻動厚者、點擊需要通過代碼實現(xiàn)躁劣。目前PhantomJS已經(jīng)在網(wǎng)絡(luò)爬蟲、web自動測試得到了廣泛應(yīng)用库菲。這個時候有人就會提出疑問了账忘，一個都沒有UI的瀏覽器，怎么實現(xiàn)圖片對比呢熙宇？請看下面的介紹鳖擒。
Beyond Compare簡介
Beyond Compare是一套由Scooter Software推出的軟件，主要用途是對比兩個文件夾或者文件烫止，并將差異以顏色標示蒋荚。
腳本的設(shè)計過程：
1、設(shè)置UA馆蠕，可以根據(jù)我們自己的需求來配置不同的UA;
2期升、 分別配置無線前端線上、線下的url互躬，通過在本機設(shè)置host將wap.sogou.com配置成線下的測試機IP播赁；
配置線上無線前端的url：
配置線下無線前端的測試url：
3、 實現(xiàn)截屏功能吼渡，并保存圖片到本地容为；
4、 實現(xiàn)線上、線下圖片對比功能坎背，將線上url截圖和線下url截圖進行對比替劈，并打印出對比結(jié)果。如果完全一致返回結(jié)果1沼瘫，如果存在差異返回浮點數(shù)抬纸，表示兩張圖片的相似度。
5耿戚、 部分測試結(jié)果如下：
測試結(jié)果驗證
通過腳本湿故，發(fā)現(xiàn)了不同的圖片，那如何來驗證呢膜蛔？
推薦一款圖片對比的軟件：Beyond Compare坛猪，可以對比失敗的case具體有什么異同， 如第一個case：
上面兩張為原圖皂股，下面一張為對比后的結(jié)果墅茉。
可以看到線上的環(huán)境中有一個廣告，線下環(huán)境中沒有展現(xiàn)呜呐，最終影響了圖片對比度就斤，由于廣告每次返回的內(nèi)容有可能不一致，在某些情況下廣告的展現(xiàn)不在測試范圍之內(nèi)蘑辑，PhantomJS可以在訪問url之后調(diào)用js將線上廣告結(jié)果的div隱藏掉洋机，方法如下：
A）定義js:
B）執(zhí)行js：
執(zhí)行js后再將圖片對比，發(fā)現(xiàn)case通過：
再次用Beyond Compare對比下洋魂，效果如下：
總結(jié)下該方法的優(yōu)點：
1绷旗、case設(shè)計幾乎沒有門檻，只要有query就可實現(xiàn)副砍，不用檢測頁面元素衔肢；
2、case失敗后定位問題非常好定位豁翎，直接對比圖片即可角骤；
3、一個case可以驗證結(jié)果頁中的所有結(jié)果谨垃，覆蓋面大启搂；
4、效率較人工檢驗有很大提高刘陶，一個query整體時間花銷在2s左右胳赌，完全一致的case不再需要人工校驗，只需要關(guān)注異常case匙隔，節(jié)省了大量的測試時間疑苫；
5、個別case人工不易發(fā)現(xiàn)，比如我們對比結(jié)果的第六個query捍掺，對比度結(jié)果為0.86撼短，如果人工比較的話不易察覺，對比如下圖：
