mcpField

Visual Regression Until Match

おすすめ手動実行
テスト最大 6 ラウンド

Visual Regression Until Match について

手動で開始し、最大 6 ラウンドまで、@visual タグ付きの Playwright テストを毎回実行します。差分が出た場合、コーディングエージェントが意図した UI 変更か回帰かを判断し、コードを修正するか変更を残して、次のラウンドに進みます。

主な機能

  1. 01@visual タグ付きのテストのみを実行
  2. 02最大 6 ラウンドで無限の再試行を防止
  3. 03終了コードで判定するため手作業の比較が不要
  4. 04Cursor に対応

活用シーン

  1. 01スタイルやコンポーネントの変更後に意図しない見た目の変化がないか確認
  2. 02フロントエンドのリファクタリング後にビジュアルのベースラインを確認
  3. 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 @visual
02
差分の原因を分類

各差分について、意図した UI 変更か意図しない回帰かを、最近のコード変更や作業の目的をもとに判断します。

03
回帰を修正

意図しない回帰はコードを修正して期待する見た目に戻します。意図した変更はプロジェクトの慣例に沿ってベースラインを更新し、次のラウンドに進みます。

未達 → 次のラウンド条件を満たせば終了

対応エージェント

この Loop をそのまま実行できるコーディングエージェントです。

Cursor

コメント