視覺感知測試(2)

　　1.視覺感知測試包含以下幾個主要的測試步驟：

　　對于產品版本進行截圖(產品線上環境或者類產品環境)

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

　　對于新的發行版進行截圖(比如staging環境)

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

　　3.配對URL(忽略hostname)

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

　　4.像素級別的圖形比較

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

　　5.人工查看所有不同

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

　　視覺感知測試的一些實例

　　1.CSS的改變

　　對于開發人員，CSS改變之后的side effect是最頭痛的事情，下面展示了當CSS改版之后頁面的變化。

　　圖4 CSS的改變

　　2.內容的改變

　　對于測試人員，大量復雜頁面的微小修改很難發現的，下面展示了如果使用視覺比較找到差異。

　　圖5 內容的改變1

　　圖6 內容的改變2

　　3.事件處理的改變

　　對于測試人員，有些界面需要鼠標點擊或者懸停才能展現出來。而對于這樣的界面的測試就必須人工來做。下面展示了一個選擇框在鼠標點擊之后在兩個版本之間產生的差異。

　　圖7 事件處理的改變

　　4.響應式設計

　　對于開發和測試人員，如果要測試響應式設計就必須使用不同分辨率的設備，模擬器或者調整瀏覽器到各種分辨率，這將是一個費時費力費錢的工作。下面展示了如果視覺比較如果檢查響應式設計。

　　圖8 響應式設計

　　視覺對比- UI自動化end-to-end測試的最后一公里

　　持續交付中的視覺感知測試

　　下圖為傳統的持續交付流程：

　　圖 沒有視覺感知的持續交付

　　下圖為加入了視覺感知測試的持續交付流程，其中主要的區別就是部署之前要并行與其他自動化測試做一次視覺感知測試。

　　圖10 包含視覺感知測試的持續交付

　　下圖為實施了視覺感知測試之后對于界面回歸測試的時間示意圖

　　圖11 界面回歸測試時間示意圖

　　三個視覺感知測試工具

　　1.Mogotest

　　來自Mogotest，基于“云”

　　Restful API開發測試

　　支持多瀏覽器

　　不支持本地化

　　商用

　　Mogotest是一個商用的產品，它提供一個“云”測試平臺，可以讓用戶在其平臺上使用各種不同的瀏覽器訪問被測試頁面，并進行對比。主要目的是測試不同瀏覽器之間的兼容性，不能測試動態頁面等。

　　2.DPXDT

　　來自Google,基于Python

　　默認只支持PhantomJS(Headless)

　　Restful API開發測試

　　支持人工認證報表系統

　　開源，免費

　　Dpxdt是基于Python和PhantomJS開發的一個 Web Service系統，其中PhantomJS可以理解為一個沒有界面的瀏覽器。用戶使用其提供的RESTFul API可以十分方便的對比兩個頁面，而且它還提供一個功能十分強大的報表系統。對于全部是靜態頁面的Web系統來說非常適用，不過對于需要手動導航，比如需要進行輸入，點擊或者鼠標懸停等操作之后才能進行檢測的界面，它默認并不支持，需要對其本身進行修改才可以。不過它還提供了一個方式可以把他很方便的部署到GWS上。

原文轉自：http://www.anti-gravitydesign.com