Visual component testing for Storybook

Chromatic helps frontend teams iterate on UI faster with less manual work. Automate visual & interaction testing and streamline stakeholder sign-off with CI/CD.
  • Publish Storybook
  • Test look and feel
  • Get team sign off
  • Ready to merge!
adobe
auth0
circleci
govuk
bbc

Use stories as test cases
Stories capture the “known good” states of UI components. They’re a pragmatic, reproducible way to keep track of UI edge cases. Chromatic runs automated tests against your existing stories to catch bugs.
logo/html5
Build UI components and pages in isolation
Implement components and pages without needing to fuss with data, APIs, or business logic.
Mock hard-to-reach edge cases as stories
Save tricky component states as stories to revisit during app development, testing, and QA.
Simulate user interactions
Attach a play function to a story to simulate user interactions such as clicking, hovering, and typing. Powered by Testing Library and Jest.

“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
UX development manager
company logo

Catch visual & interaction bugs automatically
Chromatic checks for visual changes & verifies component behavior using a hyper-parallelized fleet of browsers. We prioritize test speed and consistency.
ChromeFirefoxInternet Explorer
Pinpoint visual bugs
Chromatic takes pixel-perfect snapshots of real rendered code, styling, and assets.
Detect broken behavior
Simulate user behavior like click, type, keyboard, and hover. Write assertions to verify interactions.
Consistency across browsers
Flip a switch to test components in Chrome, Firefox, and IE11. No extra setup needed. Safari and Edge coming soon.
Responsive testing
Test responsive UIs by specifying viewport widths in the same place as your stories.
No waiting
Our parallelized cloud delivers lightning-fast results no matter how many tests you have.
No test flake
Test at the component-level in a controlled environment to eliminate test flake, especially when compared to E2E and other strategies.

Spot the differences, visually
Detect visual changes in components down to the tiniest detail.
Every pixel matters
Even the tiniest tweak can set off major bugs. Our eagle-eyed algorithm catches the subtlest UI changes.
3 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 to focus testing only on the changes you care about.

“The more things we have in Storybook, the more coverage we get in Chromatic.”
Dan Green
Dan Green
Senior software engineer
company logo

Speed up team sign-off with CI/CD integrations
Chromatic integrates with leading devops tooling to supercharge your workflow. It badges your PRs with status checks for UI Tests, UI Review, and Publish Storybook.
Set up in seconds
No-hassle integrations with your existing version control and CI tools.
Fully automated
You get best practice defaults that are fully customizable. Chromatic runs automatically whenever you push code.
Create custom workflows
Sequence devops with PR checks for UI Test, UI Review, and Publish Storybook. Each check tracks a key part of the fronted workflow.
Request feedback
Assign teammates to review work in progress and sign-off on finished UI.
Comment on look and feel
Pin comments to make UI feedback clear and actionable.
Manage change requests
Complement your code review process with UI Review, a workflow for managing change requests.

You build in Storybook. We stop UI bugs.

Frequently asked questions

Why can’t I do this myself?

UI developers are responsible for component development, test, review, and documentation. This is often done manually. Chromatic automates these jobs and integrates them into your existing Git and CI tooling. That means you avoid tedious manual work while also saving time.

Sure, it’s possible to cobble together libraries to build some of Chromatic’s features – we’ve even published free guides and articles that share how. But then you’d have to invest time and effort into maintaining your DIY service instead of building valuable features for your customers.

What’s the difference between Chromatic and running tests in my CLI?

Chromatic is a managed service that runs your tests in the cloud with a dedicated web UI for reviewing and approving changes. It’s much faster and more reliable than running tests locally because we maintain a fleet of standardized cloud browsers on your behalf. You get deterministic test results and fast test runs.

Our infrastructure is effectively capable of running all your tests in parallel, no matter how many builds you run, or stories you write. Customers can test 2000+ stories in less than a minute.

Since we maintain the infrastructure, we also take care of reliability, migrations, and security so you don’t have to. This means fewer questions from your teammates like “why did these tests fail on my machine?”.

Who made Chromatic?
Chromatic is made by the team behind Storybook. It integrates seamlessly into Storybook to automatically test stories for visual and behavior bugs.
“Just deleted all component snapshot tests from our React component library—in favour of @chromaui [Chromatic] screenshot tests… it’s priced well for our use case where manually testing everything would be much more expensive.”
Mark Dalgleish
Mark Dalgleish
Design systems lead
company logo
“Our product team loves Chromatic. It's truly helped kickstart a better relationship between designers and developers.”
Andrew Cianci
Andrew Cianci
Sr. product designer
company logo
“I've done visual regression manually in the past but has always caused more problems than it's solved. Not the case with Chromatic”
Alasdair McLeay
Alasdair McLeay
UI architect
company logo