Visual Testing:忽略特定元件

在動態內容的快照處理上有兩種方法,第一是事先塞入假資料,讓內容維持一致;第二是忽略這個會變動的元素區塊,本文要探討的是如何忽略特定元件。


若希望快照中特定的元素不要被比較,可在該元件加上樣式的 class name chromatic-ignore

如下兩個範例,不要比較搜尋結果。

Case 1:顯示預設的搜尋結果畫面。

忽略特定元件

Case 2:顯示特定的搜尋結果。

忽略特定元件

Chromatic 對於兩種狀況都顯示不需要再次 review snapshot,表示已忽略標記的元件。


參考資料:Ignore stories and elements


visual testing Chromatic Storybook Mixtini 自動化測試 視覺測試 visual regression testing

Summer Tang
Sponsored
Summer Tang 一對一諮詢
Summer|TSMC 主任工程師|擁有 15 年資深 Web 架構經驗,職涯歷經跨國頂尖企業與新創。專精於高流量企業級應用開發,核心技術涵蓋微前端、效能優化、測試自動化與 SEO。曾出版多本技術著作,並多次擔任 MOPCON、WebConf 等大型技術年會講者。
了解更多 →