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 時檢視共用元件是否如預期呈現。
