視覺迴歸測試—UI自動化的最後一公里
視覺迴歸測試
我們認為如果一個介面通過第一次的人工驗證併發布之後，它就是一個正確的標準介面，並且是包含了人工測試價值的資產。當下一次測試的時候，這部分價值就應該被保留並重用起來，用於減少新的一次測試的時間，從而實現介面的快速回歸測試。
視覺迴歸測試包含以下幾個主要的測試步驟：
迴歸和感知測試流程差不多隻是差異值要更小一點，並且只有效果圖需要替換內容。
視覺測試用於評估Web應用程式跨瀏覽器的響應能力。通過執行視覺測試，您可以檢視前端的UI / UX元件，以決定受測試的應用程式是否可以適配於各種瀏覽器，裝置和螢幕解析度，因為它們都提供了不同的體驗。
據《The Selenium Guidebook》的作者Dave Haeffner介紹：
視覺測試是一種驗證應用GUI是否正確地展示給使用者的操作。測試目標是找出應用在視覺化上存在的軟體缺陷，例如，字型、佈局和渲染問題。這使得所發現的軟體缺陷可在被終端使用者看到前得到修正。
此外，視覺測試可用於驗證頁面的內容，非常適用於一些提供圖形功能（例如圖表、儀表盤等）的站點。如果使用傳統的自動化功能測試工具，那麼實現此類驗證是非常具有挑戰的工作。
視覺測試在本質上是十分複雜的，其中需要考慮的因素很多，例如Web瀏覽器、作業系統、螢幕分辯、響應設計、國際化等。
之前業界裡面對視覺測試的最佳實踐就是： 截圖比較用於視覺驗證。
視覺迴歸測試包含以下幾個主要的測試步驟：
1、對於產品版本進行截圖（線上環境或者類線上環境）
首先人工完成第一個軟體版本的測試並部署上線，在第二個版本需要進行測試的時候首先對第一個版本的所有介面進行截圖形成基線。
2、對於新的發行版進行截圖（比如測試環境）
然後對第二個需要進行測試的版本的所有介面也進行截圖。
3、配對URL（忽略hostname）
通過配對URL，對所有的截圖按照相同的URL進行分組。當然有時候會出現新的介面，有時候老的介面會被刪除。對於新的介面就需要人工進行首次驗證測試 。
4、畫素級別的圖形比較
對於分組之後的截圖進行畫素級別的比較並生產差別圖。有時候為了降噪，可以只對區域性關心的元件進行比較。
5、人工檢視所有不同
最後通過人工審查差別圖報告完成測試。
實質上，視覺迴歸測試就是用於影象比較的工具。比較好一點的影象比較工具還需要允許使用者可以將需要忽略的區域設定為使用動態元件，從而避免誤報。比如你的專案需求為開發只是改了一個CSS樣式，而測試人員需要檢查應該隻影響一個點的佈局更改時（例如，當您需要跨多個裝置/螢幕解析度進行跨瀏覽器測試和驗證應用程式時），這將非常有用。 （例如當產品的小姐姐希望只有下圖中的中間字型變化時）
修改1.png
（最後發現，網站中的另外的不希望變化的網頁也被變化了）
修改2.png
比較有名的視覺迴歸測試的開源框架有： - AET 基於Java的視覺迴歸測試工具 還在更新中 - Gemini 基於Selenium的 還在更新中 - Dpxdt 用Python編寫的，憂傷的是最新的更新也是2016年的了。
商用的比較火的就是以下這家咯： - Applitools Eyes 雲服務加AI的視覺迴歸測試工具，Applitools公司在2017年7月獲800萬美元B輪投資，到目前為止，它已經獲取到了1500萬美元的風投，也成為了2018年全球最值得關注的100家AI公司之一。
歡迎加入 51軟體測試大家庭，在這裡你將獲得【最新行業資訊】，【免費測試工具安裝包】，【軟體測試技術乾貨】，【面試求職技巧】... 51與你共同學習，一起成長！期待你的加入： QQ 群： 755431660