Chromatic: Visual Regression Testing for Components
Chromatic is a smoke detector for your UI's appearance, taking snapshots of every component on every commit to catch unintended visual changes. It's used in CI/CD to prevent visual regressions when refactoring. The footgun is relying on it for business logic.
Why it exists
Modern UIs are complex systems of components. A small CSS change can have unintended, cascading visual effects across an entire application. Manually checking every page and component state after every change is impossible, leading to visual bugs shipping to production.
The mental model
Think of Chromatic as an automated QA engineer with a photographic memory for visuals. For every component in every state (defined in Storybook, Cypress, or Playwright), it takes a picture. On the next code change, it takes another picture and plays "spot the difference." If anything has changed visually, it fails the build and shows you a pixel-by-pixel diff for review.
How it works
Chromatic integrates into your CI pipeline. When you push code, it connects to your project's Git history and test framework. For Storybook, it converts each story into a visual test case. For Playwright or Cypress, it archives the UI's state (DOM, CSS, assets) as your E2E tests run. It then renders these states in parallel across multiple cloud browsers and viewports, taking a snapshot. An optimization called TurboSnap analyzes the dependency graph to only re-test components affected by a change, saving significant time.
When to use it
Use Chromatic when you have a component library and need to guarantee visual consistency. It's ideal for teams that want to refactor styles or update dependencies with confidence, knowing any visual side effects will be caught automatically. It also streamlines design review by providing a single place for stakeholders to approve UI changes.
When not to use it
Do not use Chromatic as your sole testing tool. It is not designed to test complex business logic, API integrations, or data transformations. It verifies what the user sees, not the underlying data calculations. For that, you still need traditional unit, integration, and E2E tests.
One canonical example
A team updates their design system's primary button, changing its padding. They run Chromatic. The tests for the button story pass, showing the intended change, which they approve as the new baseline. However, a test for a UserInfo card component, which uses the button, now fails. The visual diff shows the button's size increase has pushed the user's name to a new line, breaking the card's layout. The team catches this unintended side effect before it reaches users.
Interview question
A development team is using Chromatic. Which of the following scenarios represents an inappropriate use of this tool?
- a.Catching visual regressions in a component library when updating third-party dependencies.
- b.Ensuring that a complex data transformation within a component correctly calculates and displays the final output.Correct
- c.Streamlining the design review process by providing a visual history of UI changes for stakeholders.
- d.Verifying that a refactor of CSS styles doesn't introduce unintended visual side effects across components.
Why? this is the answer
Chromatic is designed to verify what the user sees, not the underlying data calculations or complex business logic. The card explicitly states it is not for testing data transformations. The other options are all appropriate uses of Chromatic as described in the card.
Just read this? Test yourself on what you have been reading.
Read the original → chromatic.com
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on design systems — each one lists the topics its interview covers.
See open roles