Test how UIs look & function

Chromatic catches bugs in appearance and functionality by running two types of UI Tests. It seamlessly integrates into your team’s CI workflow so that you can ship quality web UI without tedious manual testing.

Made for Storybook
Test the real UI
Chromatic tests the rendered code, styling, and assets that are shipped to the browser. UI Tests are as close as possible to what real people experience.
No test flake
Test in a standardized browser environment to eliminate test flake, especially when compared to other testing methods.
Storybook
Reuse stories in tests
UI Tests are powered by the stories you’ve already written to capture component states. This dramatically reduces maintenance burden and setup.
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.
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.
GitHubBitbucketGitLab+ SSO/SAML
Integrates with CI & version control
Chromatic integrates with your CI and version control workflow to keep everyone in the loop.
“We are using Storybook in every UI layer in all of our organization. Chromatic keeps us safe and helps us ship quality & performant UI.”
Orr Gottlieb
Orr Gottlieb
Engineering manager
monday.com

How it works

Every time you push code, Chromatic runs a suite of UI Tests on your code to instantly pinpoint bugs. All tests run in parallel across browsers for continuous coverage.

Test every facet of UI

With Chromatic’s UI Tests, you can verify the appearance and functionality of your UI at the same time. Our cloud browsers evaluate your UI just as users would.

Run tests in real browsers

Chromatic renders every possible state of your UI in a fleet of cloud browsers to check for bugs and errors.

transactionestimatedescriptionsummaryinvoiceCountnamebillingUrlidvaluetypelength
Heading 1Heading 2Heading 3Heading 4Heading 5
0--/2000/20020/2005/20015/20
  • Chrome
  • Safari
  • Firefox
  • Edge

Merge and ship

UI Tests get a pull request check in your Git provider. Pass the check to get certainty that your work is ready for production.

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

Incredible speed & reliability

Our platform is performance-tuned to run millions of UI tests a day without false positives or flake. Tests run in parallel to keep your CI pipeline fast.

Chromatic’s Capture Cloud renders and tests all your stories in parallel
Tuned for fastest test times
Tests use as many concurrent machines as needed to deliver results in the least time.
Test only what’s changed
Speed up testing by tracking modified component files and their dependencies and testing only what’s changed.
Install with one command
All it takes is one command to install and run Chromatic. We automatically turn existing stories into test cases.
“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
Siddharth Kshetrapal
Design systems engineer
GitHub

Developer-friendly dashboard

View test results in a developer-friendly dashboard that focuses your attention on the tests that need review. Share a link with teammates to get another opinion.

UI Test dashboard
See UI test status in one place
Get a report of visual changes, interaction errors, failed assertions, and render issues. Each report includes steps to reproduce and environment information.
Smart branching and merging
Keep track of your component variations across branches to get conflict-free merges. Zero configuration.
Responsive viewport testing
Specify viewport widths in the same place as your stories. Configure viewports for single stories or all components.

Debug locally and with your team

UI Tests run in real browsers to simplify reproductions. Write your tests using industry-standard JavaScript APIs. Debug issues with your own browser devtools. Share reproductions with your teammates.

With just one click, you can launch Storybook in your browser to debug a failing interaction test.
Fully-inspectable components
Reproductions are easier than ever with fully-inspectable DOM, styling, and assets uploaded with each test.
Verify tests with your team
Verify changes with design, product, and engineering using the testing dashboard.
Share links to debug
Send teammates a link to a specific instance of a component to ensure they’re referencing the exact same test you are.

Keep everyone in the loop with Slack, Figma, and custom webhooks

Keep everyone engaged by connecting Chromatic to workflows your team already uses.

Connect with
SlackFigmaFlow
Slack integration message
“Chromatic is a valuable addition to our testing toolset. It helps us catch UI bugs a lot quicker and easier!”
Malek Hakim
Malek Hakim
Sr. Software engineer
Priceline
Never fix the same bug twice.

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