Comprehensive front-end testing

Chromatic automatically tests every front-end component and page, detecting visual changes and functional regressions. Every commit is verified in the cloud.

Get started for freeBook a demo

Made for

Test the real UI

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

Coverage across browser

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.

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.

Automated testing with CI

All components get tested every commit automatically. Have 100% confidence in UI every time you ship.

“Chromatic has been indispensable since the day we added it. It has really increased the confidence and speed with which we merge changes 💯”

Siddharth Kshetrapal

Design systems engineer

How does front-end testing work with Chromatic?

Chromatic runs automated tests to compare your UI's current behavior against previously accepted baselines. When you push new code, Chromatic loads your front-end UI in cloud browsers and executes UI Tests to simultaneously verify its appearance and functionality.

Powered by your Storybook

Your existing Storybook stories power Chromatic’s visual and interaction tests — no setup required. Capture all your UI states, test them automatically, and keep bugs out of your workflow. It’s that easy.

Storybook app that shows a component rendered in isolation

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

Why use Storybook? Every piece of UI is now a component. The superpower of components is that you can render a specific variation in isolation by passing in props and mocking APIs and events. Save these variations in a reproducible format called stories using Storybook.

Chromatic is built and maintained by the team behind Storybook. Together, they turn your components and pages into an powerful yet pragmatic way to develop, test, and documenting UI.

Not using Storybook? Chromatic integrates with Playwright and Cypress to provide comprehensive visual coverage for your E2E tests.

Learn more

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

Dan Green-Leipciger

Sr. Engineering manager

Catch all front-end bugs

From colors to component logic, Chromatic flags any changes in appearance and functionality by comprehensively testing your front-end applications. This helps prevent accidental regressions and enables you to ship with confidence every time.

BaselineBuild 9 on master

NewBuild 10 on feature-branch

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

Merge without the conflicts

Review changes at a glance in Chromatic’s merge manager. Stay in the loop with instant notifications straight to Git and CI tools — no surprises.

screenshot of Chromatic’s UI Test build screen

Online merge manager

Get an online dashboard of interaction test status and visual changes for every build.

Verify tests with your team

Collaborate on verifying changes with design, product, and engineering using the online merge manager.

Pin comments to changes

Get straight to the point by pinning comments directly on visual changes. Mention teammates to ask for feedback.

Fully-inspectable components

Reproductions are easier than ever with fully inspectable DOM, styling, and assets uploaded with each test.

Smart branching and merging

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

+ SSO/SAML

Integrates with CI & version control

Chromatic integrates with your CI and version control workflow to keep everyone in the loop.

Never fix the same front-end bug twice.

Get started for freeBook a demo

Frequently asked questions

How is this compared to unit tests?

Why run visual tests in the cloud?

Does Chromatic replace Jest or Enzyme?

How is this compared to Selenium, Cypress, or Playwright?

Can I get rid of my BrowserStack or Sauce subscription?

Isn’t this just snapshot testing?

“I really believe Chromatic was the last missing block to really perform visual regression testing. In an era where front-end development tools got more and more visual, testing interfaces had to inherently become visual: this is Chromatic.”

Loic Chollier

Sr. Director of engineering