Storybook visual testing: snapshot every component state

Hosted: Chromatic

Chromatic is built by the Storybook maintainers. It publishes your Storybook, snapshots every story in the cloud and shows changes for review on each build.

npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN

Self-managed: Playwright against story iframes

Each story is served on its own iframe URL, so a Playwright test can visit it and compare a screenshot without any hosted service.

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

const stories = ['button--primary', 'button--disabled', 'card--long-title'];

for (const id of stories) {
  test(id, async ({ page }) => {
    await page.goto(`http://localhost:6006/iframe.html?id=${id}&viewMode=story`);
    await expect(page.locator('#storybook-root')).toHaveScreenshot(`${id}.png`);
  });
}

Write stories for the states that break

Snapshot value comes from coverage of edge cases, not just the default state.

• Very long and translated text
• Empty, loading and error states
• Dark mode and high contrast
• Narrow and wide containers

Why component tests are not enough

Components pass in isolation but pages break when real content, CMS data, third-party scripts and translations are combined. Production page monitoring covers that gap.

Or skip the test code entirely

Code-based visual tests only cover the pages and states someone wrote a test for, and only run when the pipeline runs. VisualRunner captures production pages from a sitemap, crawl or URL list, across languages and viewports, and monitors them on a schedule — so CMS edits, translations and third-party scripts are caught too. Engineers can still trigger a monitor from CI through the API.