Check for UI regressions in every component each time you push code to pinpoint changes instantly.
UI component coverage
Test the furthest reaches of your UI components to give users a consistent look and feel wherever they go.
Automated testing with CI
All components get tested every commit automatically. Have 100% confidence in UI every time you ship.
Capture rendered UI
Chromatic takes cross-browser, pixel-perfect snapshots of real rendered code, styling, and assets.
No test flake
Test at the component-level in a controlled environment to eliminate test flake, especially when compared to E2E and other strategies.
No waiting
Our parallelized cloud delivers lightning-fast results no matter how big your component library. No upsells for concurrency.
Responsive testing
Test responsive components by specifying viewport widths in the same place as your stories.
Consistency across browsers
UIs can be beautiful in one browser and broken in another. In one click, expand test coverage to Chrome, Firefox, Safari, and Edge simulatenously.
“Just deleted all component snapshot tests from our React component library—in favour
of @chromaui [Chromatic] screenshot tests...”
Mark Dalgleish
Design systems lead
“I really believe Chromatic was the last missing block to really perform visual regression testing.”
Loic Chollier
Director of Engineering
“I've done visual regression manually in the past but has always caused more problems than it's solved. Not the case with Chromatic.”
Alasdair McLeay
UI architect
Spot the differences
Detect visual changes in components down to the tiniest detail.
Every pixel matters
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 to focus testing only on the changes you care about.
“Chromatic has been indispensable since the day we added it. It has really increased the confidence and speed with which we merge changes 💯”
Sid Kshetrapal
Design systems engineer
Review and merge
Approve changes in a glance using Chromatic’s web-based merge manager. Get timely test notifications in your Git 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.
Integrations
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.
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.
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.
How is this compared to Selenium or Cypress?
Chromatic complements your existing End-to-End 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.
Can I get rid of my BrowserStack or Sauce subscription?
Our aim isn’t to replace services like Browserstack or Sauce. Cloud browser services are invaluable for verifying interactive behavior (e.g., clicking around the UI) and End-to-End testing but aren’t built or priced for visual testing.
Chromatic gives professional UI engineers a purpose-built service for visual testing which helps you reduce your reliance on cloud browser services. In practice, our customers typically scale back their usage and save a boatload of money while increasing their testing productivity.
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
