本文章轉載于搜狗測試

測試需求

日常任務中涉及到一些和線上樣式對比的需求，如無線resin版本升級，需要驗證下升級后頁面樣式與線上升級之前的版本頁面樣式展現是否一致，由于無線搜索涉及到的query較多，且不同query對應的結果樣式差別較大，因此通過人工的方式來比較幾乎是不可能的，那如何解決這個問題呢？

技術解決方案

PhantomJS+圖片對比實現無線網頁樣式與線上樣式驗證。

涉及到的技術工具：Python、Phantomjs、Beyond Compare。

PhantomJS簡介

先介紹下什么是PhantomJS，PhantomJS 是一個基于 WebKit 的服務器端 JavaScript API。它全面支持web而不需瀏覽器支持，其快速，原生支持各種Web標準： DOM 處理, CSS 選擇器, JSON, Canvas, 和 SVG。說白了，PhantomJS就是一個沒有UI的瀏覽器。其中頁面中的翻動、點擊需要通過代碼實現。目前PhantomJS已經在網絡爬蟲、web自動測試得到了廣泛應用。這個時候有人就會提出疑問了，一個都沒有UI的瀏覽器，怎么實現圖片對比呢？請看下面的介紹。

Beyond Compare簡介

Beyond Compare是一套由Scooter Software推出的軟件，主要用途是對比兩個文件夾或者文件，并將差異以顏色標示。

腳本的設計過程：

1、設置UA，可以根據我們自己的需求來配置不同的UA;

2、 分別配置無線前端線上、線下的url，通過在本機設置host將wap.sogou.com配置成線下的測試機IP；

配置線上無線前端的url：

配置線下無線前端的測試url：

3、 實現截屏功能，并保存圖片到本地；

4、 實現線上、線下圖片對比功能，將線上url截圖和線下url截圖進行對比，并打印出對比結果。如果完全一致返回結果1，如果存在差異返回浮點數，表示兩張圖片的相似度。

5、 部分測試結果如下：

測試結果驗證

通過腳本，發現了不同的圖片，那如何來驗證呢？

推薦一款圖片對比的軟件：Beyond Compare，可以對比失敗的case具體有什么異同， 如第一個case：

上面兩張為原圖，下面一張為對比后的結果。

可以看到線上的環境中有一個廣告，線下環境中沒有展現，最終影響了圖片對比度，由于廣告每次返回的內容有可能不一致，在某些情況下廣告的展現不在測試范圍之內，PhantomJS可以在訪問url之后調用js將線上廣告結果的div隱藏掉，方法如下：

A）定義js:

B）執行js：

執行js后再將圖片對比，發現case通過：

再次用Beyond Compare對比下，效果如下：

總結下該方法的優點：

1、case設計幾乎沒有門檻，只要有query就可實現，不用檢測頁面元素；

2、case失敗后定位問題非常好定位，直接對比圖片即可；

3、一個case可以驗證結果頁中的所有結果，覆蓋面大；

4、效率較人工檢驗有很大提高，一個query整體時間花銷在2s左右，完全一致的case不再需要人工校驗，只需要關注異常case，節省了大量的測試時間；

5、個別case人工不易發現，比如我們對比結果的第六個query，對比度結果為0.86，如果人工比較的話不易察覺，對比如下圖：