在使用scss和less開(kāi)發(fā)的時(shí)候，遇到過(guò)一件很有趣的事，因?yàn)榫W(wǎng)站需要支持響應(yīng)式，就開(kāi)了一個(gè)響應(yīng)式樣式框架，簡(jiǎn)單的幾百行scss代碼，居然生成了近100KB的css代碼，因此決定重構(gòu)這個(gè)樣式庫(kù)。而重構(gòu)后的項(xiàng)目總是出現(xiàn)各種各樣的問(wèn)題，尤其在響應(yīng)式方面，可能在一種分比率下頁(yè)面顯示正常，而在另一種分辨率下頁(yè)面卻變得面目全非，幾次調(diào)整都有遺漏的地方，忙得測(cè)試人員（其實(shí)就是我自己了）不可開(kāi)交。最后總結(jié)為樣式開(kāi)發(fā)也是需要做自動(dòng)化回歸測(cè)試的，尤其是開(kāi)發(fā)具有響應(yīng)式功能的復(fù)雜樣式庫(kù)的時(shí)候，自動(dòng)化測(cè)試尤其重要。
如何做前端樣式的自動(dòng)化回歸測(cè)試呢？
BackstopJS就是一個(gè)能夠?qū)崿F(xiàn)css自動(dòng)化回歸測(cè)試的工具，和Mocha這種依靠JavaScript判斷斷言語(yǔ)句正誤和PhantomJS以模擬用戶操作的測(cè)試工具不同，BackstopJS是一個(gè)基于比較網(wǎng)站快照的變化的回歸測(cè)試工具，因此他更適給項(xiàng)目中的樣式做回歸測(cè)試，可以確保我們?cè)谥貥?gòu)網(wǎng)站樣式的時(shí)候樣式不發(fā)生變化，而且他支持設(shè)置多種瀏覽器尺寸，可以測(cè)試響應(yīng)式布局。
BackstopJS具有以下特性：
支持多頁(yè)面、多測(cè)試用例測(cè)試
可以使用腳本模擬出用戶的交互動(dòng)作
網(wǎng)友評(píng)論
