視覺回歸測試 —— UI自動化的最後一公里。

視覺回歸測試 —— UI自動化的最後一公里。

視覺回歸測試

視覺測試用於評估Web應用程序跨瀏覽器的響應能力。通過執行視覺測試，您可以查看前端的UI / UX組件，以決定受測試的應用程序是否可以適配於各種瀏覽器，設備和屏幕解析度，因為它們都提供了不同的體驗。

據《The Selenium Guidebook》的作者Dave Haeffner介紹：

視覺測試是一種驗證應用GUI是否正確地展示給用戶的操作。測試目標是找出應用在可視化上存在的軟體缺陷，例如，字體、布局和渲染問題。這使得所發現的軟體缺陷可在被最終用戶看到前得到修正。此外，視覺測試可用於驗證頁面的內容，非常適用於一些提供圖形功能（例如圖表、儀錶盤等）的站點。如果使用傳統的自動化功能測試工具，那麼實現此類驗證是非常具有挑戰的工作。視覺測試在本質上是十分複雜的，其中需要考慮的因素很多，例如Web瀏覽器、操作系統、屏幕分辯、響應設計、國際化等。

之前業界裡面對視覺測試的最佳實踐就是： 截圖比較用於視覺驗證。

視覺回歸測試包含以下幾個主要的測試步驟：

1.對於產品版本進行截圖（線上環境或者類線上環境）

首先人工完成第一個軟體版本的測試並部署上線，在第二個版本需要進行測試的時候首先對第一個版本的所有界面進行截圖形成基線。

2.對於新的發行版進行截圖（比如測試環境）

然後對第二個需要進行測試的版本的所有界面也進行截圖。

3.配對URL（忽略hostname）

通過配對URL，對所有的截圖按照相同的URL進行分組。當然有時候會出現新的界面，有時候老的界面會被刪除。對於新的界面就需要人工進行首次驗證測試 。

4.像素級別的圖形比較

對於分組之後的截圖進行像素級別的比較並生產差別圖。有時候為了降噪，可以只對局部關心的組件進行比較。

5.人工查看所有不同

最後通過人工審查差別圖報告完成測試。

實質上，視覺回歸測試就是用於圖像比較的工具。比較好一點的圖像比較工具還需要允許用戶可以將需要忽略的區域設置為使用動態組件，從而避免誤報。比如你的項目需求為開發只是改了一個CSS樣式，而測試人員需要檢查應該隻影響一個點的布局更改時（例如，當您需要跨多個設備/屏幕解析度進行跨瀏覽器測試和驗證應用程序時），這將非常有用。

（例如當產品的小姐姐希望只有下圖中的中間字體變化時）

（最後發現，網站中的另外的不希望變化的網頁也被變化了）

比較有名的視覺回歸測試的開源框架有：

• AET 基於Java的視覺回歸測試工具 還在更新中
• Gemini 基於Selenium的 還在更新中
• Dpxdt 用Python編寫的，憂傷的是最新的更新也是2016年的了。

商用的比較火的就是以下這家咯：

• Applitools Eyes 雲服務加AI的視覺回歸測試工具，Applitools公司在2017年7月獲800萬美元B輪投資，到目前為止，它已經獲取到了1500萬美元的風投，也成為了2018年全球最值得關注的100家AI公司之一。

註：本文由蝸牛學院測試導師 CC老師 首發自個人簡書https://www.jianshu.com/p/36102b0d4b9a。希望繼續在IT行業突破提升自己的各位朋友，也歡迎加群594154674，不管你自我感覺牛不牛B。

推薦閱讀：