Visual Regression Testing

Scope: visual regression checks for variable changes.

Failure if ignored: visual regressions ship without detection.

Visual regression testing

Screenshot comparison

Compare screenshots before and after variable changes:

1. Take screenshot of component with old variables
2. Update variables
3. Take screenshot of component with new variables
4. Compare screenshots
5. Flag differences

Mode switching tests

Test mode switching visually:

1. Take screenshot in light mode
2. Switch to dark mode
3. Take screenshot in dark mode
4. Compare mode differences
5. Verify mode switching works

Component testing

Test individual components

Test components with variable changes:

1. Render component with variables
2. Take screenshot
3. Update variables
4. Re-render component
5. Compare screenshots

Test component states

Test component states:

1. Default state
2. Hover state
3. Focus state
4. Disabled state
5. Error state

Tools

Playwright

Use Playwright for visual regression:

import { test, expect } from "@playwright/test";
test("button visual regression", async ({ page }) => {
  await page.goto("/button");
  await expect(page).toHaveScreenshot("button.png");
});
                    

Chromatic

Use Chromatic for component visual testing:

import { Button } from "./Button";
export default {
  component: Button,
  parameters: {
    chromatic: { viewports: [320, 768, 1024] },
  },
};
                    

Percy

Use Percy for visual testing:

import percySnapshot from "@percy/playwright";
test("button visual test", async ({ page }) => {
  await page.goto("/button");
  await percySnapshot(page, "Button");
});
                    

Implementation rules

1. Test critical components
2. Test all modes
3. Test all states
4. Use the same viewport sizes across runs
5. Review differences carefully

Failure modes

If visual regression testing fails:

• Visual changes go unnoticed
• Mode switching breaks
• Component states break
• Viewport sizes differ between runs

Out of scope

• Test tool setup (see tool docs)
• Component rendering (separate concern)
• Test infrastructure (separate concern)