在使用scss和less開發(fā)的時候,遇到過一件很有趣的事,因為網(wǎng)站需要支持響應式,就開了一個響應式樣式框架,簡單的幾百行scss代碼,居然生成了近100KB的css代碼,因此決定重構這個樣式庫。而重構后的項目總是出現(xiàn)各種各樣的問題,尤其在響應式方面,可能在一種分比率下頁面顯示正常,而在另一種分辨率下頁面卻變得面目全非,幾次調整都有遺漏的地方,忙得測試人員(其實就是我自己了)不可開交。最后總結為樣式開發(fā)也是需要做自動化回歸測試的,尤其是開發(fā)具有響應式功能的復雜樣式庫的時候,自動化測試尤其重要。

 

如何做前端樣式的自動化回歸測試呢?

BackstopJS就是一個能夠實現(xiàn)css自動化回歸測試的工具,和Mocha這種依靠JavaScript判斷斷言語句正誤和PhantomJS以模擬用戶操作的測試工具不同,BackstopJS是一個基于比較網(wǎng)站快照的變化的回歸測試工具,因此他更適給項目中的樣式做回歸測試,可以確保我們在重構網(wǎng)站樣式的時候樣式不發(fā)生變化,而且他支持設置多種瀏覽器尺寸,可以測試響應式布局。

 

BackstopJS具有以下特性: