Visual Regression TestでUIの差分比較を自動化しよう

CSSを修正し、意図しない変更がないかの確認はどのように行っていますか？
Visual Regression TestでUIの差分比較を行う際に便利な自動化ツールを紹介します

2025-02-08 あなたの知らないAPI開発ツール Postmanの世界！！ のLT発表資料です

Transcript

1. Visual Regression TestでUIの差分比較を自動化しよう 2025-2-8 | あなたの知らないAPI開発ツール Postmanの世界！！
2. 自己紹介 • 百瀬 顕央(ももせ あきひろ) Visual Regression TestでUIの差分比較を自動化しよう • 日本システム技研に入社して2年目 • いまは主に通販サイトの開発・改修をやっています
3. アジェンダ 今日の話の流れ Visual Regression TestでUIの差分比較を自動化しよう • Visual Regression Testとは • 自動化ツールの紹介 • 実演
4. Visual Regression Test とは？ Visual Regression TestでUIの差分比較を自動化しよう
5. Visual Regression Test とは？ Visual Regression TestでUIの差分比較を自動化しよう Webアプリケーションの外観の変化を自動検出するリグレッションテストの手法 Webサイトのデザインやレイアウトに関する変更を検出するのに有効
6. どういう時に必要なの？ Visual Regression TestでUIの差分比較を自動化しよう • お客様からもらったデザインカンプに合わせたい • CSSを修正したから意図しない変更が生じていないか検証したい
7. こういう時 皆さんはどうしてますか？ Visual Regression TestでUIの差分比較を自動化しよう
8. 目検なんてしたくない！
9. 自動化ツールの紹介 Visual Regression TestでUIの差分比較を自動化しよう
10. Playwrightとは Visual Regression TestでUIの差分比較を自動化しよう • Node.jsのライブラリ • ブラウザテスト自動化ツール • E2Eテストによく用いられる
11. どうやって UIの差異を検出するのか Visual Regression TestでUIの差分比較を自動化しよう 既に自動でスクリーンショットを撮って差分比較を行ってくれる機能がある
12. toHaveScreenshot Visual Regression TestでUIの差分比較を自動化しよう 公式ドキュメントから抜粋 https://playwright.dev/docs/test-snapshots スクリーンショットを撮影して比較までを自動でしてくれる スクリーンショットが無いテスト初回実行時は正となるページのスクショを 撮影し保存する 2回目以降はその画像との比較を行う
13. 実演 Visual Regression TestでUIの差分比較を自動化しよう
14. まとめ Visual Regression TestでUIの差分比較を自動化しよう • 自動化ツールを使うことでより正確に簡単に比較できる • テスト結果も出力されるため、どの箇所で差異が生じているかの発見までが早く なり、修正までのコストも短縮できる • Playwrightの自動化ツールがどのようなものか知っていただけましたか？
15. ご清聴ありがとうございました Visual Regression TestでUIの差分比較を自動化しよう