利用 Chromatic + Storybook 來做 Component-Level 的 Visual Testing

安裝 Storybook 與 Chromatic

利用 Chromatic 來看 UI 變更與決定是否要 approve 這個變更

將測試專案稍作修改後,重新發佈 Storybook 並丟到 Chromatic 上。

Chromatic 會標記相異的地方,包含程式碼和元件產出的畫面,讓我們一眼看出哪兒不同,接著就可以決定是否要 approve 這個變更。

Chromatic 範例

小記

先前提到,如果測試的頁面有會變動的內容 (例如:廣告),整頁做 snapshot 來比對是一定會失敗的,因此建議做元件的 snapshot 比對;或說網頁本由元件堆疊而成,測元件是最基本的策略。也就是說,Chromatic + Storybook 提供了元件做 visual testing 的解法。


comments powered by Disqus