Chromatic vs Percy: Visual Regression Workflow Fit

Chromatic and Percy both automate visual regression testing, but they fit different workflows: choose Chromatic if your stack is built around Storybook and you want tight component-level integration, or choose Percy if you need broader cross-browser and cross-framework coverage with a more flexible SDK. This article compares their architectures, pricing models, and practical trade-offs so you can decide which one aligns with your team’s existing testing pipeline.

Background: What Visual Regression Testing Solves

Visual regression testing catches unintended changes in UI appearance that unit or functional tests miss. A CSS tweak can shift a layout, a font update can alter spacing, or a new prop can break a component’s look—all without throwing a JavaScript error. Visual regression tools take screenshots of your UI before and after code changes, then diff them to highlight pixel-level differences. Both Chromatic and Percy automate this process, but they were built with different primary use cases in mind.

Chromatic emerged from the Storybook ecosystem, created by the team behind Storybook itself. It treats each story as a test case and integrates directly into the Storybook development workflow. Percy, now owned by BrowserStack, positions itself as a general-purpose visual testing platform that works with any web app, not just component libraries. This fundamental difference shapes everything from setup to daily usage.

How Chromatic Works

Chromatic is designed around Storybook. You publish your Storybook to Chromatic’s cloud, and it captures snapshots of every story across a configurable set of browsers and viewports. When you push a new commit, Chromatic rebuilds your Storybook and compares new snapshots against the baseline (usually the last accepted commit on the main branch). It then shows a side-by-side diff with overlaid highlights.

Key features include:

• TurboSnap: Only tests stories affected by changed files, using webpack dependency graphs to skip unaffected stories, which speeds up CI significantly.
• UI Review: A built-in review interface where team members can comment on specific snapshots and approve or reject changes.
• Play function support: You can simulate user interactions (clicks, typing) before capturing the snapshot, using Storybook’s play function.

Setup typically involves installing the Chromatic package, adding a script to your package.json, and running a single command in CI. The tool automatically detects your Storybook configuration and requires minimal extra code.

How Percy Works

Percy is a more general-purpose visual testing tool. It provides SDKs for various frameworks and testing libraries (e.g., Cypress, Playwright, Selenium, Puppeteer) and can snapshot any web page or component. You write scripts that navigate to a URL or render a component, then call Percy’s snapshot function. Percy captures the DOM and renders it in its own browser environment, which means it doesn’t require a live app to be running during the snapshot—it uses a static snapshot of the page’s HTML and CSS.

Percy’s key features include:

• Cross-browser testing: You can configure multiple browsers (Chrome, Firefox, Edge, Safari) and viewport sizes, and Percy will render the same snapshot in each.
• SDK flexibility: Works with any JavaScript framework or even non-JavaScript apps via their REST API.
• Visual diffs: Percy shows a side-by-side comparison with a heatmap overlay that highlights the areas of change.

Setup involves installing the appropriate SDK, initializing Percy with a project token, and adding snapshot calls to your existing test scripts. You can also use Percy’s CLI to snapshot a static directory or a running app.

Comparing Integration and Workflow

The biggest practical difference is how each tool fits into your development process. Chromatic is deeply integrated with Storybook, so if you already use Storybook as your component development environment, Chromatic is almost a no-brainer. You don’t need to write extra test code—every story becomes a test automatically. Percy, on the other hand, requires you to explicitly define what to snapshot, which gives you more control but also more setup work.

Consider your CI pipeline: Chromatic runs as a standalone step that builds and publishes Storybook. Percy integrates into your existing test runner (e.g., Cypress or Playwright) and runs alongside your functional tests. If you already have a robust E2E suite, Percy can piggyback on that infrastructure. If you live in Storybook, Chromatic is more direct.

Another factor is the review workflow. Chromatic’s UI review is built around Storybook’s component structure, making it natural for component library maintainers. Percy’s review interface is more generic, suitable for full-page and multi-page applications. Both support GitHub, GitLab, and Bitbucket integrations for status checks and inline comments.

Costs and Pricing Models

Both tools offer free tiers for open-source projects and small teams, but their paid plans differ. Chromatic’s pricing is based on the number of snapshots taken per month. Snapshots are counted per story per browser per viewport, so large Storybooks with many stories and viewports can consume quota quickly. Percy’s pricing is also snapshot-based, but it counts each snapshot (a single capture of a page or component) and offers different tiers based on the number of snapshots and team members.

It’s worth noting that both tools have changed their pricing structures over time, so you should check their official pricing pages for current numbers. However, the general pattern is: Chromatic is more cost-effective if you have a large Storybook and only need a couple of browsers, while Percy might be more predictable if you have a smaller set of pages but need many browsers.

For open-source projects, both offer free usage, but the criteria differ. Chromatic provides free unlimited snapshots for public repositories, while Percy offers a free tier with limited snapshots for open-source projects. Verify the current terms before relying on them.

Common Problems and Misconceptions

Misconception: Visual regression testing replaces functional testing. It doesn’t. Visual tests only check appearance, not behavior. You still need unit and integration tests for logic. Both Chromatic and Percy are complements, not substitutes.

Common problem: Flaky tests due to dynamic content. Animations, date pickers, or loading spinners can cause false positives. Solutions include freezing time, disabling animations, or using Percy’s waitForSelector option. Chromatic has a similar pause option in its play function.

Common problem: Baseline drift. If you approve changes too quickly, your baseline can drift from the intended design. Both tools allow you to review diffs carefully and only approve intentional changes. It’s a process issue, not a tool issue.

Common misconception: Chromatic only works with Storybook. While it’s optimized for Storybook, you can use Chromatic with any app by writing a simple Storybook wrapper that renders your pages. However, that’s not its primary use case, so you’ll lose some benefits like TurboSnap.

Making the Choice: Which Fits Your Workflow?

To decide, ask yourself these questions:

• Do you already use Storybook for component development? If yes, Chromatic is the natural fit.
• Do you need visual testing for full pages, not just components? Percy is more flexible for that.
• Do you want to run visual tests alongside your existing E2E tests? Percy integrates with Cypress and Playwright directly.
• Do you need cross-browser coverage beyond Chrome? Both support multiple browsers, but Percy’s setup is more straightforward for non-Storybook apps.
• What’s your team’s familiarity with each tool? If you’re already using Storybook, the learning curve for Chromatic is minimal.

There’s also a hybrid approach: use Chromatic for component-level testing (since it’s free for open source and tightly integrated) and Percy for page-level or E2E visual regression. Many teams do this, but it adds cost and complexity.

Alternatives to Consider

Beyond Chromatic and Percy, other tools exist:

• BackstopJS: Open-source, self-hosted, requires more setup but no per-snapshot cost.
• Applitools: Uses AI to reduce false positives, but pricing is higher.
• Playwright’s built-in screenshot testing: You can write your own visual regression tests with Playwright’s toHaveScreenshot matcher, which is free but requires you to manage baselines and diffs manually.
• Storybook’s own visual tests: Storybook 7+ has a built-in test runner that can integrate with Playwright, but it doesn’t provide a diffing UI out of the box.

Each alternative has trade-offs in cost, maintenance, and features. For teams that need a managed service with a review UI, Chromatic and Percy are the most popular choices.

Frequently Asked Questions

Can I use Chromatic without Storybook?

Technically yes, but it’s not recommended. Chromatic’s core is Storybook, and you’d have to create a Storybook instance just to render your app, which adds complexity. If you don’t use Storybook, Percy is a better fit.

Does Percy work with React components?

Yes, Percy works with any framework. You can use Percy’s JavaScript SDK to snapshot a rendered component in a browser, or use it with Cypress or Playwright to capture your React app. It doesn’t require Storybook.

Which tool has better performance in CI?

Chromatic’s TurboSnap can skip unaffected stories, which can dramatically reduce CI time for large Storybooks. Percy also has a similar feature called percy-upload with selective testing, but it’s less automatic. In practice, performance depends on your project size and how you configure the tools.

Can I self-host Chromatic or Percy?

No, both are cloud-only services. If you need self-hosting, consider open-source alternatives like BackstopJS or Playwright’s built-in screenshot testing.

Do both tools support monorepos?

Yes, both can be configured to work with monorepos, but Chromatic has better built-in support for Storybook in monorepos, while Percy requires more manual setup to point to the correct build directory.

What happens when I have a visual diff?

Both tools will show the diff in their web UI and can block the PR via a status check. You can then review the diff, add comments, and approve or reject the change. If you reject, the baseline remains unchanged and the PR is blocked until the code is fixed.

Related

• Recover Deleted Files Desktop? Step-by-Step Guide
• Loot to Forge: Best Armor Set Full Guide
• TrueNAS Mirror Dataset Visible But Can’t Extract Files