Vitest 4のBrowser Mode＋GitHub Actionsで、見た目の変化を検知するテスト（VRT）を入れる

どんな問題を解決するか / いつ使うか

AIエージェントにUIを修正させることが増え、ほかの画面が崩れていないか確認したいとき。

やり方

1. Vitest 4 の Browser Mode でコンポーネント／ページを描画し、スクリーンショットを撮って比較するテストを書く。
2. GitHub Actions で実行し、差分があればPRで確認する。
3. エージェントにも「UIを変えたらVRTを実行し、意図しない差分がないか確認する」とルールに入れる（エージェントにUI変更のたびにスクショで自己チェックさせる（デザイン→実装→スクショ→レビュー→修正のループ）と組み合わせる）。
4. Storybook をAIに巡回させてエラーを自動修正させた事例もある（数百の状態を手作業でクリックせずに確認できる）。

注意点・対応状況

• 設定の詳細はリンク先のZenn記事を参照（CSVには概要のみ）。
• フォントの描画などで環境ごとに差分が出るので、CIの環境をそろえる。

出典

• 投稿者: @zenn_dev (Zenn公式) ／ 関連：@yoshiko_pg
• 投稿: @zenn_dev · 2026-07-09 / @yoshiko_pg · 2026-05-21
• 投稿日: 2026-07-09 / 2026-05-21（JST）
• 収集日: 2026-10-09（JST）