視覺感知測試

　　隨著互聯網第二春的到來以及Web2.0的盛行，Web應用程序開發已經成為了當前軟件開發的主力軍?，F在無論是企業級應用，社交應用還是移動應用，Web已經成為標準配置，而且很多企業正在逐步的將自己的企業級本地應用進行互聯網Web化。但是Web 的界面布局測試，多瀏覽器測試，CSS/JavsScript的重構等都成為界面測試的痛中之痛，特別是大型Web應用的回歸測試量太大，從而導致回歸測試很多時候根本無法完成，所以很少會有團隊能完成全方位的界面布局回歸測試，特別是對于使用Agile流程開發的團隊就更加困難。

　　而且現在大家對用戶體驗以及持續部署越來越重視，導致Web應用程序的界面開發和測試難上加難。

　　首先來看看Web 界面開發和測試為什么如此困難。

　　1.Web界面布局回歸測試

　　對于Web網頁界面布局測試一般都是由人工手動對比設計圖和產品界面。而人工對比測試存在兩個問題：a,速度慢;b,人的不確定性。對于擁有大量復雜界面的企業級Web應用，界面布局的回歸測試的數量巨大，再加上這兩個問題，導致這類應用的界面布局回歸測試時間很長，成本很高，所以很多基于Agile項目基本不可能在迭代周期內高質量的完成其界面回歸測試。對于每天做一次回歸，那更是不可能完成的任務。

　　(下面有一個游戲“大家來找茬”，請讀者用心找找有多少處不同，并記錄一下用了多少時間。答案在附1圖中)

　　圖1 大家來找茬

　　2.CSS/JavaScript代碼重構

　　現在Web前端越來越復雜，所以代碼量也急速增加，導致前端開發像后端開發一樣開始使用基于Library, Module和Pattern的開發方式。從而產生了一個問題：當有公共代碼被修改和重構之后，如何快速發現界面的side effect?

　　由于CSS和控制界面的JavaScript代碼被重構之后，只能通過人眼手動檢測其正確性，導致開發和測試人員很難在有限的時間找到所有被修改的代碼影響到的界面進行檢查。最后很可能會有一些side effect在開發和測試階段都不被發現而進入產品環境。

　　3.多瀏覽器

　　Web應用其最大的優勢就是其可以跨平臺跨瀏覽器，使用者可以在不同的操作系統中使用不同的瀏覽器訪問并使用Web應用。但是這個優勢也帶來了很大的問題：需要做大量的瀏覽器兼容性測試。而被測瀏覽器的數量越多(現在的主流瀏覽器包括IE, Chrome, Firefox, Safari等，并且每種瀏覽器還有很多種版本)，測試數量和時間也會成倍增長。這個痛也導致很多大型Web應用基本上很難在限定時間內完成大部分主流瀏覽器的兼容性測試。如果一定要做，那么也需要付出巨大的成本，比如添加更多的測試人員。

　　4.響應式設計(Responsive Web Design)測試

　　由于移動設備的普及，導致大量的用戶使用手機或者平板使用Web 應用。由于移動設備擁有各種各樣的分辨率，因此設計人員也開始考慮針對不同的分辨率設計應用界面，響應式設計(Responsive Web Design)也孕育而生。但是響應式設計很難測試，基本上只能靠手工進行，而且還需要準備各種分辨率的設備或者各種分辨率的瀏覽器。需要測試的分辨率越多，測試的時間越長，成本就也越高。

　　下面有兩張真實網頁的截圖，其中有很多不同之處，讀者可以嘗試再找一下有多少。答案在附2圖中。

　　圖2 網頁1

　　圖3 網頁2

　　什么是視覺感知測試-Perceptual Testing

　　對于界面布局，傳統的測試都是由人工對比設計圖和產品界面。當界面有修改之后，再由人通過肉眼去檢查修改(包括正確的和錯誤的修改)，這樣即費時而且測試結果又不穩定，因為人是有情緒的。但是我們認為如果一個界面通過第一次的人工驗證并發布之后，它就是一個正確的標準界面，并且是包含了人工測試價值的資產。當下一次測試的時候，這部分價值就應該被保留并重用起來，用于減少新的一次測試的時間，從而實現界面的快速回歸測試。

　　為了解決上面提到的各種問題，視覺感知測試孕育而生。它使用傳統的對圖片進行二進制比較的辦法，結合敏捷迭代開發的理念，產生的一種針對界面布局的自動化測試方法。

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