Visual Regression Test

ELI5 — The Vibe Check

A visual regression test takes a screenshot of your UI, and next time it checks if anything LOOKS different — pixel by pixel. Even if your code 'works', if a button moved 2 pixels or a color changed slightly, the test catches it. It's a watchdog for your design.

Real Talk

Visual regression testing captures screenshots of UI components or pages and compares them against baseline images using pixel-diff algorithms. Tools like Percy, Chromatic, or Playwright's screenshot comparison detect unintended visual changes, protecting design consistency.

Show Me The Code

// Playwright visual comparison
test('homepage looks correct', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveScreenshot('homepage.png', {
    maxDiffPixels: 100
  });
});

When You'll Hear This

"Visual regression tests caught that the button color changed after the CSS refactor." / "Use Chromatic for visual regression in your Storybook components."