Compare screenshots of every component state

How to do it

Run the catalogue stories in a browser driver, such as Playwright, or a hosted service, such as Chromatic or Percy. Run the suite once per width, such as two Playwright projects with a phone and a desktop viewport. Render in a pinned browser inside a container, with fonts installed and animations off, so pixels match between runs. Allow a small difference, such as 0.1 percent of pixels. Commit new baselines in the same change, so the review shows them. Keep each screenshot to one component, as small snapshots advises.

Example

import { test, expect } from '@playwright/test';
import stories from '../storybook-static/index.json' with { type: 'json' };

for (const story of Object.values(stories.entries).filter(entry => entry.type === 'story')) {
  for (const colorScheme of ['light', 'dark'] as const) {
    test(`${story.id} ${colorScheme}`, async ({ page }) => {
      await page.emulateMedia({ colorScheme, reducedMotion: 'reduce' });
      await page.goto(`/iframe.html?id=${story.id}&viewMode=story`);
      await expect(page.locator('#storybook-root')).toHaveScreenshot(`${story.id}-${colorScheme}.png`, { maxDiffPixelRatio: 0.001 });
    });
  }
}

from PIL import Image, ImageChops

MAX_CHANGED_SHARE = 0.001

def changed_share(baseline_path: str, current_path: str) -> float:
    baseline, current = Image.open(baseline_path).convert("RGB"), Image.open(current_path).convert("RGB")
    if baseline.size != current.size:
        return 1.0
    difference = ImageChops.difference(baseline, current).convert("L").point(lambda value: 255 if value > 16 else 0)
    return difference.histogram()[255] / (baseline.width * baseline.height)

assert changed_share("baselines/order-table--empty-dark.png", "current/order-table--empty-dark.png") <= MAX_CHANGED_SHARE

How to check

Change one token's colour on a branch. The visual tests fail and name every story that changed.