Chromatic ensures consistency in UI components, down to the pixel. Every commit is automatically tested for visual changes in the cloud.
Made for Storybook by Storybook maintainers
Test every UI component
Automatically check for UI changes in each component every commit.
UI component coverage
Test the furthest reaches of your UI to give users a consistent look and feel wherever they go.
Automated testing in the cloud
Each component gets automatically tested every commit in the cloud. Have 100% confidence in UI every time you ship.
Capture rendered UI
Chromatic renders the real code, styling, and assets to take pixel-perfect snapshots.
Builds run at max concurrency always. Get lightning-fast test results no matter how many UI components.
Consistency across browsers
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.
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.