原文地址，未經(jīng)作者確認或授權(quán)的翻譯版本。
摘要
從CSS3開始，自適應(yīng)設(shè)計會推動視覺和CSS測試的進展，PhantomCSS 是眾多支持這個UI測試改變的新工具的一員。
為什么？
無論有沒有樣式規(guī)范，我們都在進行視覺測試。執(zhí)行一次人工測試還可以接受，那不斷重復的呢？對于一個豐富的界面設(shè)計，一個自適應(yīng)設(shè)計或者一個復雜的應(yīng)用，人工回歸測試的風險和消耗會更高。沒有人愿意因為一些padding改變就對一個頁面做對于不同視窗大小的重新測試。
一些長期項目很快就僅僅因為修改CSS而不影響現(xiàn)有布局的困難而變的越來越組織混亂與龐大。CSS的延展性，修改、添加或者刪除樣式的能力是至關(guān)重要的。只有人工測試的CSS重構(gòu)是不恰當?shù)?，CSS自動測試可以使CSS重構(gòu)變得更輕松。
CSS可回歸性是比較難來定位的，一些情況是由于對設(shè)計無感，更多的是因為被破壞的頁面當前沒有處于開發(fā)階段。自動測試才能更快更簡單的發(fā)現(xiàn)這些回歸測試點。
有一些對于CSS測試的錯誤概念，認為使用XPath或者CSS選擇進行一些元素存在的斷言就達到了樣式測試的目的。僅僅因為.red-button存在，不一定意味著它是可見的，也不一定就能斷定這個按鈕是紅色的。button {background:blue !important}可以很容易改變它的顏色。同樣的selenium.isVisible("*[cantains(@class "red-button")]")也不能證明這個元素是可見并且樣式準確；這只是證明了此元素不含有display:none這樣的樣式，但是沒有辦法考量z-index或者位置。做樣式測試不僅僅是做HTML標記的斷言。
怎么做？
要進行CSS自動測試，有兩種方式。第一種是截屏比對；第二種通過JavaScript調(diào)用window.getComputedStyle()獲取計算后的樣式并進行斷言。這兩種各有明顯的優(yōu)勢和不足。 第二種方式強綁定了實現(xiàn)，從而變得可能比較脆弱。 第一種方式離設(shè)計太近了，當頁面中有可變內(nèi)容時就會有問題。
作者更傾向與截屏比對；它的測試基于用戶所見而不是用戶所見的抽象。對于可變性的問題，有兩種解決方案。第一種是不要測試頁面自身，而是測試頁面的靜態(tài)版本，使用一樣的CSS，不同但是不變的內(nèi)容。針對內(nèi)容發(fā)布的不同形式，每次測試可以通過數(shù)據(jù)庫配置來實現(xiàn)，使用JavaScript來Mock API返回的結(jié)果，或者在CMS中做一個只有固定數(shù)據(jù)的分枝可以達到此目的。如果你足夠幸運，有一份在線樣式規(guī)范（例如，使用生產(chǎn)環(huán)境的CSS生產(chǎn)的HTML），那么強烈建議可以只使用這個進行測試。
PhantomCSS介紹
PhantomCSS 是一個命令行工具，作者為了基于截屏比對的CSS測試而開發(fā)了它，并且使用PhantomJS和CasperJS為Huddle提供了功能測試套件。為了使對UI的隔離的測試，作者Mock掉了ajax請求。在功能測試中國年對UI的完全控制，使得視覺測試變得相對簡單。
下面是使用PhantomCSS進行測試的一個樣例
casper.
start("https://my.testpage.com").
then( function should_look_like_this(){
phantomCSS.screenshot('.my-css-selector');
}).
then( function user_clicks_link(){
casper.page.sendEvent('click', 10, 10);
}).
then( function should_look_different_than_before(){
phantomCSS.screenshot('.my-css-selector');
}).
then( function now_check_the_screenshots(){
phantomCSS.compareAll();
});
上面的代碼對一次點擊事件頁面的改變進行了測試。它生成了對于頁面的一部分的截屏，使用CSS選擇器.my-css-selector進行定義。每次運行時，都會生成一個截屏，與原截屏進行比對。一般不會有什么區(qū)別，如果有，PhantomCSS會生成一個diff圖片來反饋。下面的圖片展示了一個失敗的測試的三個截屏。
失敗的圖片顯示出因為字體大小的不同而產(chǎn)生的一些差異，Click me的豎直方向的對齊也有一些問題。圖片使用粉色標識出了區(qū)別。
通過PhantomCSS，可以發(fā)現(xiàn)一些問題。開發(fā)團隊通過視覺測試以及在不同設(shè)備上的基線截屏，可以發(fā)現(xiàn)因為反鋸齒、原生表單域以及CSS animation 以及transition而造成的樣式不同。不同的操作系統(tǒng)和設(shè)備都可能造成測試失敗。PhantomCSS在圖片比對時可以忽略反鋸齒、忽略動畫或者隱藏有問題的元素。
其他
PhantomCSS不是CSS回歸測試唯一可選的工具，作者也強力推薦下面的這些。
GhostStory, Cactus, Needle, CSSCritic, fighting-layout-bugs, sikuli, Mogo
未來
由于Ajax以及重JS客戶端的SPA的出現(xiàn)，作者認為沒有測試的富交互應(yīng)用變得非常不可靠。自動視覺回歸測試變得很重要，且迫切需要。隨著Web技術(shù)的發(fā)展，作者很確信視覺測試的工具也會隨之演進和應(yīng)用。而且我們不應(yīng)該只關(guān)心界面，對于CSS3的keyframe animation, canvas, WebGL又怎么辦呢。作者認為Web前端的變革，必然帶來Web UI測試的變革。
本人感想
本人也算經(jīng)歷了很多Web UI端的開發(fā)工作，Web自動化測試時Web開發(fā)必不可少且越發(fā)重要的一環(huán)，這點時毋庸置疑的。不過視覺回歸測試、視覺還原度測試倒是未曾經(jīng)歷過，這個觀點提出了也有幾年了，未曾聽任何業(yè)內(nèi)人士說起過，不知是自己孤陋寡聞還是這個概念已經(jīng)落伍。
現(xiàn)在看起來視覺回歸測試、詩句還原度測試。對某些應(yīng)用可能是可行的，例如某些前端制圖軟件，某些大數(shù)據(jù)，地圖相關(guān)報表軟件。還是可能期望對視覺還原后的效果有所限制的。
這樣的一個觀點現(xiàn)在才聽說，竟然覺得還有些新穎，也是醉了。
以上。
