Visual Baselines
Visual baselines help identify design changes before they become regressions. They are especially useful when frontend updates imply backend or workflow changes.
Current workflow
Section titled “Current workflow”- Capture route screenshots with
pnpm visual:baseline. - Review the route list in
tests/visual-baseline/routes.ts. - Inspect screenshot changes under
tests/visual-baseline/screenshots/. - Read machine and human reports in
tests/visual-baseline/report.jsonandtests/visual-baseline/report.md.
When to recapture
Section titled “When to recapture”- A new visible app surface is added.
- Layout, navigation, shell, or module design changes.
- Mobile and desktop behavior is intentionally updated.
- Backend data changes alter visible UI states.
Contract pairing
Section titled “Contract pairing”If a visual baseline route exposes new data or actions, check the backend/API contract at the same time so the app does not gain unsupported frontend states.