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 three different views: 1up, 2up, and Diff. Each view highlights 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.
Review and merge
Approve changes in a glance using the merge manager. Get timely test notifications in your Git workflow and CI tool.
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.
Fully inspectable components
Reproductions are easier than ever with fully inspectable DOM, styling, and assets uploaded every commit.
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.
Built by Storybook maintainers
Chromatic was created by Storybook maintainers to take advantage of your existing stories to automate visual testing. It's used to develop Storybook itself.
Component libraries & design systems
Automate UI consistency. In one shared location, your team can browse UI components, review updates, and get notified whenever there are changes.
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:
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.
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.
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.