Viff，一種新的頁面樣式測試策略

　　測試頁面樣式時遇到的問題

　　在我們測試Web頁面的時候，往往需要面對如下幾個問題

　　手工測試多個瀏覽器

　　跨瀏覽器測試，測試頁面在多個瀏覽器中的表現，瀏覽器可能包括Chrome，Firefox，Safari，IE和Opera。除了測試基本功能是否健全以外，還需要測試外觀樣式，因為當前的CSS技術在各個瀏覽器里的表現不完全一致。比如會看看IE和其他現代瀏覽器的差距有多大，從而判定之間的差別是否能被接受。

　　除了測試多個瀏覽器之外，很可能需要進行多版本的測試，現在瀏覽器的更新速度是非?？斓?，這樣就導致了用戶群在瀏覽器版本之間的跨度變大，為了保證質量，多個版本的測試也是必要的。比如IE6到IE10的測試。

　　其次，隨著Mobile Webapp的發展，響應式設計的廣泛應用，頁面的測試還需要照顧到移動設備和多尺寸屏幕。

　　可以看出，頁面樣式的測試情況是十分復雜的，更甚的是，我們現在都是用手工在測試，耽誤很多時間。

　　可復用的樣式代碼容易影響現有樣式

　　我們推薦在開發樣式的時候使用SASS或LESS的CSS預編譯語言，這樣可以更好的管理CSS代碼，但是也會導致一個問題，一個可復用的樣式的修改可能會影響很多個頁面，比如一個顏色變量的改變。而我們往往是讓頁面引入所有樣式，很難判斷哪些頁面會有影響?？赡芤粋€能力很強的QA能預見到一些并做了測試，可能有些影響到了回歸測試的時候才發現，也可能到了生產環境上也沒有發現。

　　現有CSS測試的問題

　　樣式不是不可以“測試”的，項目中可能會使用

　　expect($('#my-target')).toHaveCss({margin: '10px'}); expect($('#my-target')).toHaveClass('box');

　　的方式去測試某個元素是否含有某種特定的屬性并斷言值是多少，但是每個元素在頁面上的樣式是由它的Computed Style決定的，這些屬性是非常多的，幾乎做不到通過這些屬性值來表達某個元素是否顯示得正確，而且這樣代碼維護成本是非常大的，頻繁的UI修改你同時需要修改測試。同樣地，如果你斷言某個元素是否擁有某種樣式，最終的頁面顯示難以預見。

　　依賴感覺的測試是不嚴謹的

　　無論是誰來做頁面樣式的測試，都是基于看和感覺的，這種測試不能有效的發現細節問題，不能得出嚴謹的結果，每個測試者都會有自己的答案。雖然說眼見為實，但有時候看到了也不可信賴。例子中的兩個對比圖片，肉測很難發現細小的差異。

　　感知測試中的新成員 - Viff

　　在Github上查看Viff

　　Viff的解決方式是，通過配置測試頁面，對比在同一個瀏覽器下，同一個頁面在不同環境(開發環境，生產環境)的截圖差異來，發現最終樣式的影響，從而提升交付質量和信心。

　　Viff的出現不是用來解決“依賴感覺來測試困難”這個問題的。它作為感知測試領域中的一員，是一個半自動的測試框架，通過(整體或部分)的截圖對比來幫助測試人員快速發現開發造成的樣式改變和影響，提升頁面樣式的測試效率和軟件交付信心。

　　現在Viff支持的功能有

　　基于CSS的部分頁面截圖對比

　　支持Firefox、Chrome、Safari、Opera、PhantomJS、IE、iOS、Android。Firefox、PhantomJS、iOS表現完美

　　命令行支持

　　定義處理頁面事件

　　報表功能幫助差異Review

　　Viff測試策略

　　在使用Viff的過程中，幾個基本的測試策略有

　　盡量保持一樣的頁面內容，如果頁面內容是動態生成的，盡量使用基于CSS的部分截圖功能

　　沒有必要測試所有頁面，盡量找到能夠找到覆蓋CSS樣式的最小集合。推薦模塊化的方式開發CSS的好處就在于此

　　針對復用性的UI組件，推薦使用基于CSS的部分截圖功能

　　如果有style guide頁面，直接測試它也可以

　　期望建立一種使用Viff的機制，每天或者部署前查看Viff的報表，也可以把Viff繼承到CI中，每天定時運行。但不推薦每次提交都運行，因為生成的圖片文件會很快占滿你的硬盤。

　　在PPT里了解更多

　　Viff才剛開始

　　Viff從剛開始從想法到今天這個版本，開發周期只有不到4周的時間。Viff需要經歷更多的項目驗證才能走得更遠，如果你對Viff還有那么點興趣，打算嘗試一下，歡迎在Github Issue頁面提交反饋。

原文轉自：http://www.testwo.com/article/67