Visual Regression Until Match
おすすめ手動実行テスト最大 6 ラウンド
Visual Regression Until Match について
手動で開始し、最大 6 ラウンドまで、@visual タグ付きの Playwright テストを毎回実行します。差分が出た場合、コーディングエージェントが意図した UI 変更か回帰かを判断し、コードを修正するか変更を残して、次のラウンドに進みます。
主な機能
- 01@visual タグ付きのテストのみを実行
- 02最大 6 ラウンドで無限の再試行を防止
- 03終了コードで判定するため手作業の比較が不要
- 04Cursor に対応
活用シーン
- 01スタイルやコンポーネントの変更後に意図しない見た目の変化がないか確認
- 02フロントエンドのリファクタリング後にビジュアルのベースラインを確認
- 03ブランチをマージする前にスクリーンショットの差分を確認
- 目標
- ビジュアルリグレッションのテストスイートが成功し、意図した UI 変更のみが反映されている状態にします。
- 終了条件
- ビジュアルテストのコマンドが終了コード 0 で終了した時点、または 6 ラウンドを終えても失敗する場合に停止します。
- 各ラウンドの間に実行
- npx playwright test --grep @visual
起動プロンプト
Cursor に貼り付けて実行すると、終了条件を満たすまでエージェントが以下の手順を繰り返します。
prompt.md
「Visual Regression Until Match」ループを開始します。 目標:ビジュアルリグレッションのテストスイートが成功し、意図した UI 変更のみが反映されている状態にします。 最大ラウンド数:6。 ステップ 1:ビジュアルテストを実行 — npx playwright test --grep @visual を実行し、終了コードと失敗したスクリーンショット比較を確認します。終了コードが 0 なら終了条件を満たします。 `npx playwright test --grep @visual` ステップ 2:差分の原因を分類 — 各差分について、意図した UI 変更か意図しない回帰かを、最近のコード変更や作業の目的をもとに判断します。 ステップ 3:回帰を修正 — 意図しない回帰はコードを修正して期待する見た目に戻します。意図した変更はプロジェクトの慣例に沿ってベースラインを更新し、次のラウンドに進みます。 各ラウンドの間に実行:`npx playwright test --grep @visual` 終了条件:ビジュアルテストのコマンドが終了コード 0 で終了した時点、または 6 ラウンドを終えても失敗する場合に停止します。
手順
各ラウンドは順番に実行され、終了条件を満たさなければ次のラウンドへ進みます(最大 6 ラウンド)。
01
ビジュアルテストを実行
npx playwright test --grep @visual を実行し、終了コードと失敗したスクリーンショット比較を確認します。終了コードが 0 なら終了条件を満たします。
$
npx playwright test --grep @visual02
差分の原因を分類
各差分について、意図した UI 変更か意図しない回帰かを、最近のコード変更や作業の目的をもとに判断します。
03
回帰を修正
意図しない回帰はコードを修正して期待する見た目に戻します。意図した変更はプロジェクトの慣例に沿ってベースラインを更新し、次のラウンドに進みます。
未達 → 次のラウンド条件を満たせば終了
対応エージェント
この Loop をそのまま実行できるコーディングエージェントです。
Cursor
コメント
Markdown 対応