Visual Regression TestでUIの差分比較を自動化しよう 2025-2-8 | あなたの知らないAPI開発ツール Postmanの世界！！ 

自己紹介 ● 百瀬 顕央(ももせ あきひろ) Visual Regression TestでUIの差分比較を自動化しよう ● 日本システム技研に入社して2年目 ● いまは主に通販サイトの開発・改修をやっています 

アジェンダ 今日の話の流れ Visual Regression TestでUIの差分比較を自動化しよう ● Visual Regression Testとは ● 自動化ツールの紹介 ● 実演 

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

Visual Regression Test とは？ Visual Regression TestでUIの差分比較を自動化しよう Webアプリケーションの外観の変化を自動検出するリグレッションテストの手法 Webサイトのデザインやレイアウトに関する変更を検出するのに有効 

どういう時に必要なの？ Visual Regression TestでUIの差分比較を自動化しよう ● お客様からもらったデザインカンプに合わせたい ● CSSを修正したから意図しない変更が生じていないか検証したい 

こういう時 皆さんはどうしてますか？ Visual Regression TestでUIの差分比較を自動化しよう 

目検なんてしたくない！ 

自動化ツールの紹介 Visual Regression TestでUIの差分比較を自動化しよう 

Playwrightとは Visual Regression TestでUIの差分比較を自動化しよう ● Node.jsのライブラリ ● ブラウザテスト自動化ツール ● E2Eテストによく用いられる 

どうやって UIの差異を検出するのか Visual Regression TestでUIの差分比較を自動化しよう 既に自動でスクリーンショットを撮って差分比較を行ってくれる機能がある 

toHaveScreenshot Visual Regression TestでUIの差分比較を自動化しよう 公式ドキュメントから抜粋 https://playwright.dev/docs/test-snapshots スクリーンショットを撮影して比較までを自動でしてくれる スクリーンショットが無いテスト初回実行時は正となるページのスクショを 撮影し保存する 2回目以降はその画像との比較を行う 

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

まとめ Visual Regression TestでUIの差分比較を自動化しよう ● 自動化ツールを使うことでより正確に簡単に比較できる ● テスト結果も出力されるため、どの箇所で差異が生じているかの発見までが早く なり、修正までのコストも短縮できる ● Playwrightの自動化ツールがどのようなものか知っていただけましたか？ 

ご清聴ありがとうございました Visual Regression TestでUIの差分比較を自動化しよう