Skip to main content

Visual Regression Testing

7 min read Last updated: March 2026

Visual regression testing catches unintended visual changes between code deployments. QA Proof automates this process so you never ship broken UIs to production.

How Visual Regression Works

  1. QA Proof captures a screenshot of your page (the "current" state)
  2. It compares this screenshot against the stored baseline
  3. Pixel-level and structural differences are detected and highlighted
  4. Results are categorized by severity and type

Setting Up Automated Regression Tests

  1. Create a test with a baseline (see Setting Up Design Baselines)
  2. Go to test settings and enable "Scheduled Runs"
  3. Set the frequency (on every deploy, daily, weekly)
  4. Configure notification preferences for failed tests

CI/CD Integration

For the most reliable regression testing, integrate with your CI/CD pipeline:

  • Tests run automatically on every pull request
  • Failed visual tests block merging (configurable)
  • Results are posted as PR comments with screenshot diffs

See CI/CD Pipeline Setup for detailed instructions.

Handling False Positives

Some changes may not be actual bugs:

  • Dynamic content: Ads, timestamps, or user-generated content that changes between captures
  • Anti-aliasing: Minor pixel differences due to rendering engines
  • Animations: Elements captured mid-animation

Use ignore regions to exclude dynamic areas from comparison, and adjust the sensitivity threshold to reduce noise.

Reviewing Regression Results

  • Side-by-side view: Compare baseline and current screenshots
  • Overlay view: See differences highlighted directly on the screenshot
  • Diff view: Only the changed pixels are shown
💡 Pro Tip: Start by running visual regression tests on your most critical pages, then expand coverage over time.