Visual Regression Test
実際にレンダリングし、キャプチャを撮り、前回のものと比較し、差異を確認する
/mrsekut-book-4798178187/327 (第9章 ビジュアルリグレッションテスト)
#WIP
/mrsekut-book-4798178187/328 (9-1 ビジュアルリグレッションテストの必要性)
なるほど
mrsekut.icon
component単位で見ると、global cssの適用有無で結果が変わる
画面上部のcomponentを変更すると、それより下が全て変更箇所と見なされる
reg-viz
reg-suit
Storycap
reg-suit
ユーザが操作して変化した状態の比較も可能
pc, spごとにやるとか
Storybookを使ったtest
https://zenn.dev/loglass/articles/visual-regression-testing-comparison
@mizdra
:
Backstop.js
使ってます。画像化からレポート出力まで全部やってくれて、任意で要素を隠せたり、カスタムスクリプトを実行してアニメーション止めたりと、小回り効いて便利です。エラーログが見づらくて運用大変ですが… / “2023年にVisual Regression Testingを始めるなら…”
https://t.co/cDVfKBtz8p
Snapshot Testing
/mrsekut-book-4798178187/048
Playwright
を使ってVRT
https://u-yas.dev/posts/5yql4dzin
https://zenn.dev/mh4gf/articles/tiny-vrt-with-github-actions
github actions
reg-actions
https://zenn.dev/fraim/articles/e020e82985ac6d
github actions