Visual testing for Storybook

Chromatic catches visual and functional bugs in your stories automatically. It runs UI tests across browsers, viewports, and themes to speed up frontend teams. Made by Storybook.

Go to documentation

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 to deliver results in the least time possible. Parallelization is automatic with no extra configuration from you.

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!”

Kaelig Deloumeau-Prigent

Principal software engineer

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’re a pragmatic, reproducible way to keep track of UI test cases. Chromatic uses these stories to power visual tests. The best part? It just works - no configuration necessary.

Storybook app that shows a component rendered in isolation

Chromatic Library view that shows all your components in one shared workspace

“The more things we have in Storybook, the more coverage we get in Chromatic.”

Dan Green-Leipciger

Sr. Engineering manager

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.”

Lauren Eastridge

Director of open source

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.

Smart branching and merging

Keep track of your component variations across branches to get conflict-free merges. Zero configuration.

Install with one command

All it takes is storybook add chromatic to install and run Chromatic. We automatically turn existing stories into test cases.

Run in CI for full coverage

Chromatic is made to run both in Storybook and CI. When you run in CI, Chromatic seamlessly manages test baselines across separate users and branches. This way, everyone on your team sees the most up-to-date and relevant snapshots every time.

Integrates with

Chromatic adds status checks for your pull/merge requests. The badges show errors or changes that need to be reviewed.

Never fix the same visual bug twice.

Get startedRequest demo

Storybook sessions

Join us for one-hour sessions where we will explore the component-driven approach to building, testing, and documenting UIs using Storybook.

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.”

Tim Hingston

Principal engineer