Skip to content

Visual regression

Visual regression testing (VRT) in YoFix captures screenshots of your routes on each preview, compares them against the production baseline, and surfaces pixel-level differences in the PR.

How the comparison works

For each configured route, YoFix:

  1. Captures the preview: launches Playwright against the freshly deployed preview, waits for network idle and any custom ready signals, screenshots the route at multiple viewports.
  2. Captures the baseline: either re-captures the same routes against production, or uses the cached production baseline if it’s still current.
  3. Compares: runs a two-stage comparison:
    • SSIM (structural similarity) gives a global similarity score.
    • pixelmatch highlights exact-pixel differences.
    • Region detection clusters the diff pixels into bounding boxes so reviewers see “what changed where,” not just a heatmap.

Baselines

Baselines are owned per route per viewport. They auto-update when a PR merges to the default branch (the production deployment becomes the new baseline). You can also manually approve a specific run’s screenshots as the new baseline if you intentionally landed a visual change.

Smart re-runs

When the AI route analyzer determines a PR only touches certain pages, YoFix only re-runs VRT for those routes. Unaffected routes inherit the previous comparison result. This is a major cost saver on large apps with hundreds of routes.

You can disable this and force a full re-run in Project settings → VRT.

Reviewer workflow

When a comparison detects a change above the threshold, the PR comment shows the count of changed routes. The dashboard shows a side-by-side viewer with:

  • The baseline.
  • The preview.
  • The diff overlay (toggleable).
  • A list of detected change regions.

A reviewer with developer or higher can approve the change (it becomes the new baseline once merged) or request changes (the PR fails the VRT check).

Authentication

For routes behind auth, configure a login profile in Project settings → VRT → Auth. YoFix uses AI-assisted login detection to find login forms automatically for most apps; for custom flows, you can provide explicit selectors or a setup script.

Next