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.

vscode logo
muji logo
seek logo
lego logo
mozilla logo
github logo
bbc logo
vscode logo
muji logo
seek logo
lego logo
mozilla logo
github logo
bbc logo
vscode logo
muji logo
seek logo
lego logo
mozilla logo
github logo
bbc logo
vscode logo
muji logo
seek logo
lego logo
mozilla logo
github logo
bbc logo
vscode logo
muji logo
seek logo
lego logo
mozilla logo
github logo
bbc logo

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.

Visual Tests Addon in Storybook
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
Kaelig Deloumeau-Prigent
Principal software engineer
Netlify

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.

Stories to tests
Storybook app that shows a component rendered in isolationChromatic 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
Dan Green-Leipciger
Sr. Engineering manager
wave

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.

Visual Test Addon
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
Lauren Eastridge
Director of open source
Formidable
Visual Test Addon
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.
Visual Test Addon
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
CircleCIJenkinsBitbucketGithubGitlabBuildkiteAzure PipelinesTravis
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.

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

“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
Tim Hingston
Principal engineer
Apollo