Pinpoint UI component bugs instantly

Chromatic ensures consistency in UI components, down to the pixel. Every commit is automatically tested for visual changes in the cloud.
Start your 30-day free trial
logos/storybookiconMade for Storybook by Storybook maintainers
priceline
auth0
apollo
trax
workco
formidable

Test every UI component
Automatically check for UI changes in each component every commit.
/logo/react/logo/angular/logo/vue
illustration/components
UI component coverage
Test the furthest reaches of your UI to give users a consistent look and feel wherever they go.
illustration/runtest
Automated testing in the cloud
Each component gets automatically tested every commit in the cloud. Have 100% confidence in UI every time you ship.
illustration/interface
Capture rendered UI
Chromatic renders the real code, styling, and assets to take pixel-perfect snapshots.
illustration/lightning
No waiting
Builds run at max concurrency always. Get lightning-fast test results no matter how many UI components.

ChromeInternet ExplorerFirefoxSafari
...and more
Consistency across browsers
Coming soon
Components can be beautiful in one browser and broken in another. With Chromatic it’s effortless to start testing your components in Chrome (currently supported) and soon Firefox, IE, Safari, and more.

Spot the differences
Detect visual changes in components down to the tiniest detail.
illustration/pixel
Every pixel matters
Even the tiniest tweak can set off major bugs. Our eagle-eyed algorithm catches the subtlest UI changes.
illustration/overlap
3 perspectives to view changes
See changes quickly using three different views: 1up, 2up, and Diff. Each view highlights changes in a unique way.
illustration/ignore
Selectively ignore elements
Ignore specific UI elements from your tests to focus testing only on the changes you care about.

illustrations/responsive
Test responsive components
Get test coverage for responsive components in a snap. Conveniently specify viewport widths to test in the same place as your stories.

Review and merge
Approve changes in a glance using the merge manager. Get timely test notifications in your Git workflow and CI tool.
illustration/branch
Smart branching and merging
Keep track of your component variations across branches to get conflict-free merges. Zero configuration.
Review with your team
Collaborate on reviewing changes with design, product, and engineering using the online merge manager. No pulling code required.
illustration/code
Fully inspectable components
Reproductions are easier than ever with fully inspectable DOM, styling, and assets uploaded every commit.
illustration/rewind
Hit rewind on components
Go back in time to see how components change from branch-to-branch and commit-to-commit in one click. No Git needed.

Stop hunting bugs. Chromatic finds them for you.
Frontend teams
Automating visual QA helps you ship bulletproof UIs faster and more efficiently.
Ship features smarter
Design systems
Testing components ensures a consistent look & feel at every touchpoint.
Ensure UI consistency
Digital agencies
Chromatic automates visual review so you can dodge expensive bugs, avoid rework, and move fast.
Deliver projects faster
Work-saving integrations
Every company is different and so is their workflow. Integrations with leading tools boost your workflow without adding more work.

Why test components instead of screens?
Screen testing is burdensome for apps made with components. Components are reused across many screens. If a component changes, it often results in a deluge of test failures on every screen it’s used. Sorting through these failures on every screen is excruciating.
Does Chromatic replace Jest or Enzyme?
Nope. Chromatic complements your existing Jest or Enzyme tests. Chromatic adds coverage where none previously existed: the rendered UI. It is built to detect UI regressions. In practice, creating and maintaining Chromatic visual tests takes much less effort than the equivalent unit test.
Why run tests in the cloud?
Speed and collaboration. Local tests inevitably slow to a crawl when tasked with snapshotting even a modest component libary. This blocks the development workflow. Further, collaborating on review is impossible because tests run on an individual machine. Chromatic runs tests in parallel at cloud-speed and offers a collaborative online review flow made for app teams.
How is this compared to Selenium or Cypress?
Chromatic complements your existing end-to-end(E2E) tests with Selenium or Cypress. E2E tests are intended to QA the “happy path”, but are time-consuming to create and brittle to maintain. They end up being poor value for wide UI test coverage. Adding Chromatic to your test suite gives you expansive yet accurate UI coverage without having to write even more tests.
Isn’t this just snapshot testing?
Not quite. Jest snapshot testing captures your component’s HTML output. Chromatic captures a pixel-perfect image. Chromatic is best suited for testing UIs for these reasons:
  1. The way the browser renders UI is also determined by styling and assets such as images. Unlike Jest snapshots, Chromatic renders markup, styling, and assets in a browser to capture what users really see.
  2. Changes are not necessarily “failures”. Deciphering intentional changes from bugs is hard when all you have is a markup diff. Chromatic’s online merge manager helps you visualize, review, and merge UI changes.
  3. Code changes don’t always result in UI changes. Jest snapshot tests only identify changes in code. This ends up leading to a lot of false positives and resorting to “approve all” to make test failures go away. Chromatic does not have this problem.
But what about Jest image snapshot? Image snapshotting is one of Chromatic’s features. With Chromatic you also get cloud performance, an online review flow, no-hassle branching, painless merging, component history, and more work-saving features for professional developers. Learn more

Get 100% component coverage in one Storybook addon.