Visual testing for Storybook

Chromatic catches visual and functional bugs in your stories automatically. It runs UI tests across browsers, viewports, and themes before changes merge. Made by Storybook.

1-click testing for Storybook

Click a button to run visual tests in all the major browsers. You’ll get notified directly inside Storybook if components don’t look right. This accelerates the feedback loop and helps you ship pixel-perfect UIs faster.

Run tests from Storybook

Chromatic takes pixel-perfect snapshots of real code, styling, and assets. This way your tests reflect exactly what your users see.

Coverage across browsers

Expand test coverage to Chrome, Firefox, Safari, and Edge in one click. All browsers run in parallel so your test suite stays fast.

Responsive viewport testing

Specify viewport widths in the same place as your stories. Configure viewports for single stories or all components.

Specify themes, i18n, and media features

Test how a story renders with different themes, languages, and other global settings. Combine globals into Modes to quickly apply to single stories or all components.

Run tests in parallel by default

Your tests run on as many machines as needed, so results come back fast. Parallelization is automatic with no extra configuration.

No test flake

Tests run in a standardized environment to eliminate flake. We auto-detect when UI finishes loading, painting, and reflowing before taking a snapshot.

“Setting up a first-class, cross-discipline contributor experience used to take my teams months. Today, I can build it myself in a few clicks thanks to Chromatic!”

How does visual testing work?

Visual testing scans UI changes for appearance bugs by taking a pixel-perfect snapshot of your UI, complete with styling and static assets. As you commit code, new snapshots are captured and compared to baseline snapshots.

Powered by your Storybook stories

Stories capture all states and variations of components. They give you a structured way to keep track of UI test cases. Chromatic uses these stories to power visual tests. Best of all, it just works with no configuration.

Spot the visual differences

Detect visual changes in your stories down to the tiniest detail. Chromatic gives you a suite of debugging tools to help you see the differences.

Accuracy to the pixel

Even the tiniest tweak can set off major bugs. Our eagle-eyed algorithm catches the subtlest UI changes.

Multiple perspectives to view changes

See changes quickly using different views: 1up, 2up, Diff, and more. Each view emphasizes changes in a unique way.

Selectively ignore elements

Ignore specific UI elements from your tests, focusing only on the changes you care about.

“Visual diffs make changes apparent and unmistakable... Chromatic has been extremely useful and confidence-inspiring.”

Quick and easy debugging

Stories with visual changes are highlighted in the sidebar for review. This makes it clear which stories need to be confirmed as bugs or accepted as baselines.

Fix and accept changes

Mark snapshots as accepted directly in Storybook to update the test baselines and prevent bugs in the future.

Verify tests directly in Storybook

Accept changes in 1-click using the addon panel. Accept individual stories, components, or everything at once.

Run in CI for full coverage

Chromatic is made to run both in Storybook and CI. When you run in CI, Chromatic keeps test baselines in sync across users and branches.

Never fix the same visual bug twice.

Frequently asked questions

How is this compared to unit tests?
Does Chromatic replace Jest or Enzyme?
Isn’t this just snapshot testing?
Why not take snapshots locally?
Does the addon take more snapshots? Will my bill go up?
What’s the difference between testing in the addon vs CI environment?
Should I use both the addon and run Chromatic in CI?
Does the addon work with TurboSnap?
Can I use Chromatic to host my Storybook?

“Chromatic has supercharged our PR reviews, making it easy to see visual changes at a glance. We have also come to rely on it to catch unintended style changes and regression bugs in our components.”