Visual Testing 工具比較:選誰好?
28 Jul 2022比較 Percy、Chromatic 與 jest-image-snapshot
以下比較 Percy、Chromatic 與 jest-image-snapshot
,列出不同點。
# | Percy | Chromatic | jest-image-snapshot |
---|---|---|---|
Generate snapshots | Screenshots | Screenshots | DOM structure in text format |
Diff snapshots | O | O | X (註 3) |
Diff DOM | X | O | X (註 3) |
View result by PR (註 1) | X | O | X (註 3) |
View result by branch (註 2) | O | O | X (註 3) |
Show as PR criteria | O (註 4) | O (註 5) | X (註 3) |
Component-level testing | O (註 6) | O (註 6) | X |
Integrate with end-to-end testing tools | O | X | O |
備註
- (1) View result by PR 是指依照 PR 來看測試結果。
- (2) View result by branch 是指依照 branch 來看測試結果。
- (3) 需搭配版控工具。
- (4) 需搭配
percy/exec-action
。 - (5) 需搭配
chromaui/action
。 - (6) 需搭配 Storybook。
總結
我的作法是同時使用 Percy 與 Chromatic,砍掉 jest-image-snapshot
- 使用 Percy + Cypress 來實作 Page-level 的測試,定期在 production 上檢視個別重要頁面的狀況。
- 使用 Chromatic 來實作 Component-level 的測試,在 PR Review 時檢視共用元件是否如預期呈現。