# Pixel-perfect bug detection

Chromatic visual tests every component and page, flagging even subtle appearance changes. Every commit gets checked before merge.

Test the real UI

Chromatic takes pixel-perfect snapshots of real code, styling, and assets. This way your tests reflect exactly what your users see.

Coverage across browsers

Expand test coverage to Chrome, Firefox, Safari, and Edge in one click. All browsers run in parallel so your test suite stays fast.

Responsive viewport testing

Specify viewport widths in the same place as your stories. Configure viewports for single stories or all components.

Run tests in parallel by default

Your tests run on as many machines as needed, so results come back fast. Parallelization is automatic with no extra configuration.

No test flake

Tests run in a standardized environment to eliminate flake. We auto-detect when UI finishes loading, painting, and reflowing before taking a snapshot.

Automated testing with CI

Components get tested on every commit in CI so visual regressions get caught before merge.

> “Chromatic has been indispensable since the day we added it. It has really increased the confidence and speed with which we merge changes 💯”

Siddharth Kshetrapal

Design systems engineer

## How does visual testing work?

Visual testing scans UI changes for appearance bugs by taking a pixel-perfect snapshot of your UI, complete with styling and static assets. As you commit code, new snapshots are captured and compared to baseline snapshots.

## Powered by your Storybook

Your existing Storybook stories power Chromatic’s visual tests with no extra setup. Capture every UI state, test it on every commit, and review changes before merge.

**Why use Storybook?** Every piece of UI is now a component. The superpower of components is that you can render a specific variation in isolation by passing in props and mocking APIs and events. Save these variations in a reproducible format called stories using Storybook.

Chromatic is built and maintained by the team behind Storybook. Together, Storybook and Chromatic give teams a structured way to develop, test, and document UI.

**Not using Storybook?** Chromatic integrates with Playwright and Cypress to provide comprehensive visual coverage for your E2E tests.

> “The more things we have in Storybook, the more coverage we get in Chromatic.”

## Catch every visual change

From colors to layouts, Chromatic flags even the tiniest changes in your components. Avoid accidental bugs and ship confidently, every time.

| Name | Description | Default | Control |
| --- | --- | --- | --- |
| propertyName* | This is a short description<br>summary | defaultValue | Set string |

# No Preview

Sorry, but you either have no stories or none are selected somehow.
- Please check the Storybook config.
- Try reloading the page.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Here are some common causes and how you can address them:

1. **Missing Context/Providers**: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the [Decorators documentation](https://storybook.js.org/docs/writing-stories/decorators).

2. **Misconfigured Webpack or Vite**: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring [Webpack](https://storybook.js.org/docs/builders/webpack) or [Vite](https://storybook.js.org/docs/builders/vite) with Storybook.

3. **Missing Environment Variables**: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the [Environment Variables documentation](https://storybook.js.org/docs/configure/environment-variables).

Accuracy to the pixel

Even the tiniest tweak can set off major bugs. Our eagle-eyed algorithm catches the subtlest UI changes.

Selectively ignore elements

Ignore specific UI elements from your tests, focusing only on the changes you care about.

> “Visual diffs make changes apparent and unmistakable... Chromatic has been extremely useful and confidence-inspiring.”

## Merge without the conflicts

Review changes at a glance in Chromatic before you merge. Stay in the loop with instant notifications straight to Git and CI tools with no surprises.

See what needs attention

Get a shortlist of important visual changes and interaction test failures that require human attention.

Bring design, product, and engineering into the review when a failed test needs a second opinion.

Pin comments to changes

Get straight to the point by pinning comments directly on visual changes. Mention teammates to ask for feedback.

Integrates with CI & version control

See build status in pull requests and keep access in sync with your Git provider or SSO.

Never fix the same visual bug twice.

## Frequently asked questions

How is this compared to unit tests?

Why run visual tests in the cloud?

Does Chromatic replace Jest or Enzyme?

How is this compared to Selenium, Cypress, or Playwright?

Can I get rid of my BrowserStack or Sauce subscription?

Isn’t this just snapshot testing?

> “I really believe Chromatic was the last missing block to really perform visual regression testing. In an era where front-end development tools got more and more visual, testing interfaces had to inherently become visual: this is Chromatic.”

Loic Chollier

Sr. Director of engineering