Set a Visual Regression Threshold per Component
Configure per-component pixel diff thresholds so minor anti-aliasing differences pass but real layout shifts fail the build.
Task
Add npx playwright test --update-snapshots --threshold=0.05 to the test suite so regressions are caught automatically on every pull request.
When to use this
A refactor passes existing tests but breaks npx playwright test --update-snapshots --threshold=0.05, shipping a silent regression to users.
Prerequisites
- A test runner configured (Vitest or Jest)
- Source code with testable units
Steps
1. Configure npx playwright test --update-snapshots --threshold=0.05 in the project configuration file with the recommended defaults.
npx playwright test --update-snapshots --threshold=0.05
Expected output: The configuration is accepted and npx playwright test --update-snapshots --threshold=0.05 runs without errors on the first invocation.
2. Run the check locally to verify npx playwright test --update-snapshots --threshold=0.05 produces the expected result before pushing.
pnpm test
Expected output: Local run matches CI behavior; no surprises after push.
3. Add the gate to the CI pipeline so npx playwright test --update-snapshots --threshold=0.05 blocks merge on failure.
- name: Run add visual regression threshold
run: pnpm test
Expected output: Pull requests with failing npx playwright test --update-snapshots --threshold=0.05 are blocked from merging.
Troubleshooting
Problem
The check passes locally but fails in CI
Solution
Pin dependency versions and the runtime to match CI exactly; reproduce with the same Docker image or act.
Problem
Configuration is rejected with a schema error
Solution
Check the tool version matches the config schema; older versions may not support newer fields.
Limitations
- The gate only runs on events that trigger the workflow; locally pushed commits bypass it.
- Configuration drift is possible if someone edits settings outside version control.
Cover the regression path
Start by measuring the problem. Configure per-component pixel diff thresholds so minor anti-aliasing differences pass but real layout shifts fail the build. The most common mistake is adding the gate without first confirming it catches the issue you care about. Run npx playwright test –update-snapshots –threshold=0.05 against the current codebase and inspect the output before wiring it into CI.
npx playwright test --update-snapshots --threshold=0.05Keep tests maintainable
Once the gate is in place, make failures actionable. A failing npx playwright test –update-snapshots –threshold=0.05 should point to the exact file and line, not a generic error. Pin the tool version in the lockfile so a upstream release does not silently change behavior. Review the gate output in every pull request just like a test result.