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.

Check if you’re eligible

Publish Storybook
Test look and feel
Get team sign off
Ready to merge!

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.

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

UX development manager

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.

Learn about testing

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

Senior software engineer

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.

Integrate Chromatic into CI/CD

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.

Check eligibility for $500 credit

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

Design systems lead

“Our product team loves Chromatic. It's truly helped kickstart a better relationship between designers and developers.”

Andrew Cianci

Sr. product designer

“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

UI architect