Visual Regression

Problem

CSS changes, dependency updates, or component refactors introduce subtle visual bugs that go unnoticed until users report them. Layouts shift unexpectedly, colors change, spacing breaks, or responsive breakpoints fail without anyone catching it during development.

Solution

Capture screenshots of components and compare against baselines to detect visual changes. This catches unintended styling regressions that other tests miss.

Example

This demonstrates capturing and comparing screenshots to detect unintended visual changes, catching CSS and layout regressions that functional tests miss.

// Using Percy or similar visual regression tool
test('homepage looks correct', async () => {
  await page.goto('http://localhost:3000');
  // Capture screenshot and compare against baseline
  await percySnapshot(page, 'Homepage');
});

Benefits

• Catches visual bugs that functional tests miss.
• Provides quick feedback on CSS and layout changes.
• Prevents unintended style changes from reaching production.
• Makes design system updates safer by showing visual impact.

Tradeoffs

• Creates noise with false positives from font rendering or animation timing.
• Requires infrastructure to store and compare screenshots.
• Can be slow and expensive to run for many components.
• Baseline updates can be tedious when intentional changes are made.