Visual Regression Setup

Configure visual regression testing with screenshots

Configure visual regression testing with screenshot comparison.

Instructions

1. Using Playwright (built-in screenshot comparison):

import { test, expect } from '@playwright/test';

test('dashboard matches visual snapshot', async ({ page }) => {
  await page.goto('/dashboard');
  await page.waitForLoadState('networkidle');

  // Full page screenshot comparison
  await expect(page).toHaveScreenshot('dashboard.png', {
    maxDiffPixelRatio: 0.01,    // allow 1% pixel difference
    animations: 'disabled',     // deterministic screenshots
  });
});

test('button states', async ({ page }) => {
  await page.goto('/components');
  const button = page.locator('[data-testid="primary-button"]');

  // Element-level screenshot
  await expect(button).toHaveScreenshot('button-default.png');
  await button.hover();
  await expect(button).toHaveScreenshot('button-hover.png');
});

2. Update baseline screenshots:

npx playwright test --update-snapshots

3. CI setup — run on consistent OS:

- name: Visual regression
  run: npx playwright test --grep visual
  # Use same OS as dev (Linux container) for consistent rendering

Rules

• Disable animations for deterministic screenshots
• Test on one OS/browser consistently (rendering differs across platforms)
• Review screenshot diffs carefully in PRs