mcpField

Visual Regression Until Match

FeaturedOn demand
TestingUp to 6 rounds

About Visual Regression Until Match

This manually triggered loop runs for up to 6 rounds, each running the Playwright tests tagged @visual. When differences appear, the coding agent decides whether each is an intentional UI change or a regression, fixes the code or keeps the change, and starts the next round.

Key features

  1. 01Runs only tests tagged @visual
  2. 02Capped at 6 rounds to avoid endless retries
  3. 03Judges by exit code, with no manual comparison
  4. 04Supports Cursor

Use cases

  1. 01Confirming nothing shifted unexpectedly after style or component changes
  2. 02Checking visual baselines after a front-end refactor
  3. 03Reviewing screenshot diffs before merging a branch
Goal
The visual regression suite passes, with only intentional UI changes reflected in it.
Exit when
Stop when the visual test command exits 0, or after 6 rounds if it still fails.
Between iterations run
npx playwright test --grep @visual

Launch prompt

Paste into Cursor. The agent repeats the steps below until the exit condition is met.

prompt.md
Start the "Visual Regression Until Match" loop.
Goal: The visual regression suite passes, with only intentional UI changes reflected in it.
Max iterations: 6.
Step 1: Run visual tests — Execute npx playwright test --grep @visual and read the exit code and any failing screenshot comparisons. An exit code of 0 meets the exit condition. `npx playwright test --grep @visual`
Step 2: Classify each difference — For every diff, decide whether it is an intentional UI change or an accidental regression, based on recent code changes and the purpose of the work.
Step 3: Fix regressions — Change the code for accidental regressions so the UI returns to the expected look. For intentional changes, update the baseline following project conventions, then begin the next round.
Between iterations run: `npx playwright test --grep @visual`
Exit when: Stop when the visual test command exits 0, or after 6 rounds if it still fails.

Steps

Each round runs in order; if the exit condition isn’t met, another round starts, up to 6.

01
Run visual tests

Execute npx playwright test --grep @visual and read the exit code and any failing screenshot comparisons. An exit code of 0 meets the exit condition.

$npx playwright test --grep @visual
02
Classify each difference

For every diff, decide whether it is an intentional UI change or an accidental regression, based on recent code changes and the purpose of the work.

03
Fix regressions

Change the code for accidental regressions so the UI returns to the expected look. For intentional changes, update the baseline following project conventions, then begin the next round.

Not met → next roundExits when met

Supported agents

Coding agents that can run this loop directly.

Cursor

Comments

Markdown supported