視覺感知測試(3)

　　3.Viff

　　來自ThoughtWorks，基于Javascript/node

　　支持多瀏覽器(Selenium WebDriver)

　　JavaScript/DSL開發測試

　　支持人工認證報表系統

　　開源，免費

　　支持嵌入式測試：智能電視，手機等

　　Viff是基于NodeJS和Selenium開發的一個本地工具。通過編寫JavaScript代碼來調用Selenium API, 并在真實的瀏覽器中進行截圖比較。所以它比較適合動態的Web系統，因為可以編寫代碼模擬用戶輸入和點擊操作。由于它底層使用的是Selenium作為驅動，所以他支持多種瀏覽器，比如IE，Chrome，Firefox等。由于最新的Selenium加入了對Android和iOS的支持，因而Viff 也能夠支持Android和iOS上的瀏覽器測試。

　　如果對你來說搭建多瀏覽器環境比較困難，比如需要同時測試 IE8，IE9，IE10等，可以選擇BrowserStack。BrowserStack是一個商業產品，他同時通過Web界面和API接口提供多瀏覽器環境給客戶進行Web測試，Viff可以使用其API進行進行多瀏覽器截圖。對于Viff，由于編寫JavaScript代碼也需要一定的門檻，所以對于沒有代碼能力的使用者在測試靜態網頁的時候應該選擇Dpxdt，但是如果你有一定的代碼能力，并且希望能在當前的功能測試里面加上視覺感知測試或者希望對局部的界面進行測試，建議選用Viff?，F在Viff正在開發Web Service功能，這樣以后就可以作為一個Service進行部署和使用。

　　還有其他的視覺感知測試工具，這里就不一一熬述了。在VIFF的官網上有一張多個工具的比較圖，有興趣的讀者可以參考一下：http://twers.github.io/Viff-Service/

　　VIFF演示

　　1.安裝

　　VIFF的安裝步驟請參考其項目上的說明文檔https://github.com/winsonwq/viff。

　　為了幫助大家理解和學習VIFF，我們還開發了一系列的Examples和Demos，請參見https://github.com/winsonwq/viff-examples，以下所有代碼全部來自這個項目。

　　2.安裝需要被測試的演示網站

　　下載https://github.com/winsonwq /viff-examples上的代碼，模擬產品版本的站點在viff-examples/example/prod里面，模擬需要測試的站點在 viff-examples/example/build里面。由于演示網站都是靜態代碼，所以用任意一個HTTP Sever進行部署都可以，比如我使用Nginx將其部署在本地的8000端口上。部署成功之后，通過http://localhost:8000 /example/build和http://localhost:8000/example/prod就可以訪問到兩個測試演示站點。

　　3.使用VIFF的Main API進行測試

　　對于一個全新的項目，直接使用VIFF的Main API編寫測試代碼，如下：

　　測試結果報表如下：

　　1.首先測試主頁，由于沒有任何改動，所以測試結果是綠色，表示產品環境和測試環境沒有任何改變。

　　圖12 演示結果報表1

　　2.然后在搜索輸入框中輸入commander.js，結果發現產品版本上的show 1 repository 在測試版本上變成了showing 1 repositories，所以測試結果是紅色。然后通過報表可以在立即發現改變，然后在進行人工審核其修改的正確性。這里明顯是測試版本出現了錯誤，然后針對這個錯誤就可以上報一個bug了。

　　圖13 演示結果報表2

　　3.清空輸入框，然后在主頁中點擊co，然后測試結果還是紅色。認真仔細的查看才發現generator在測試版本中被改成了generators。在如此多的內容中找到一個字母s的改變是非常困難的，但是通過VIFF的測試報告，又一次快速的輕松地發現了改變。

　　圖14 演示結果報表3

　　4.使用VIFF的Client API進行測試

　　對于一個已經有Functional Testing的項目，可以不需要重新開發VIFF測試代碼，只需要在功能測試代碼中調用其Client API，同樣可以完成視覺感知測試。由于當前VIFF只開發了JavaScript版本的Client API，所以下面的例子使用的是基于JavaScript開發的Functional Testing。以后VIFF會初步提供基于其他語言的Client API，比如Java，Python 和 Ruby等。

　　代碼說明，其中兩行綠色代碼表示分別對產品環境和測試環境進行Functional Testing;其中所有的藍色代碼是Functional Testing的代碼;其中所有紅色部分代碼是VIFF的Client API)

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