Test Automation

Percy vs Chromatic: Choosing a Visual Regression Testing Platform

HelpMeTest

HelpMeTest

— 5 min read
Percy vs Chromatic: Choosing a Visual Regression Testing Platform

Visual regression testing catches the bugs your unit tests miss — the button that shifted 4 pixels, the font that reverted to system default, the card layout that broke on a specific viewport. Two platforms dominate this space: Percy (by BrowserStack) and Chromatic (by the Storybook team). Both take screenshots, diff them against a baseline, and flag changes for human review. But they target different workflows and integrate differently into your stack.

This post gives you a concrete comparison so you can choose without regret.

What Each Tool Does

Percy is a general-purpose visual testing platform. It integrates with Playwright, Cypress, Selenium, and most other test frameworks. You call a Percy snapshot function from within your existing tests, and Percy captures the DOM (not just a PNG) for rendering in its own infrastructure — which means you get consistent, cross-browser screenshots regardless of your CI runner's GPU or font configuration.

Chromatic is built specifically for Storybook. It takes screenshots of your component stories, diffs them, and integrates tightly with pull request workflows. It can also run interaction tests and accessibility checks from your stories. If you use Storybook, Chromatic is a natural fit. If you don't, Chromatic offers less value.

Snapshot Storage and Baseline Management

Both tools store snapshots in the cloud and let you accept or reject diffs in a web UI.

Percy stores the DOM serialization plus assets. It re-renders snapshots in its own Chrome instances, which gives you deterministic results. Baselines are per-branch: when you open a PR, Percy uses the target branch's accepted snapshots as the baseline. When you merge, your approved snapshots become the new baseline on main.

Chromatic works similarly but stores actual PNG screenshots. Baselines are also per-branch. One notable Chromatic feature is TurboSnap: it uses Git history and Webpack module graphs to figure out which stories actually changed, and only re-screenshots those. On large component libraries this can cut your snapshot count by 80%.

Diffing Algorithms

Percy renders the DOM in its own infrastructure and does pixel-by-pixel comparison. You can configure a threshold to ignore minor rendering differences, but the comparison is fundamentally pixel-based. Percy's cloud rendering removes OS-level font differences from the equation.

Chromatic also does pixel diffing, but offers a perceptual diffing mode that's more tolerant of antialiasing and sub-pixel rendering changes. Chromatic's diff UI is notably polished — it shows a side-by-side slider, a diff overlay, and lets you zoom into specific regions.

Setting Up Percy with Playwright

Install the Percy Playwright SDK:

npm install --save-dev @percy/cli @percy/playwright

Set your Percy token:

export PERCY_TOKEN=your_token_here

In your Playwright test:

import { test, expect } from '@playwright/test';
import percySnapshot from '@percy/playwright';

test('homepage visual snapshot', async ({ page }) => {
  await page.goto('https://example.com');
  await page.waitForLoadState('networkidle');

  // Mask dynamic content before snapshotting
  await percySnapshot(page, 'Homepage', {
    widths: [375, 768, 1280],
    minHeight: 1024,
  });
});

Run with Percy:

npx percy exec -- npx playwright test

Percy wraps your test runner, intercepts the snapshot calls, and uploads them to its service.

Setting Up Percy with Cypress

npm install --save-dev @percy/cli @percy/cypress

In cypress/support/commands.js:

import '@percy/cypress';

In your test:

describe('Dashboard', () => {
  it('renders correctly', () => {
    cy.visit('/dashboard');
    cy.get('[data-testid="chart"]').should('be.visible');

    cy.percySnapshot('Dashboard - loaded state', {
      widths: [1280, 768],
    });
  });
});

Run it:

npx percy exec -- npx cypress run

Setting Up Chromatic with Storybook

Install Chromatic:

npm install --save-dev chromatic

Add your project token and run:

npx chromatic --project-token=your_token_here

That's the entire setup. Chromatic discovers your Storybook stories automatically. In CI, add it to your pipeline:

# .github/workflows/chromatic.yml
name: Chromatic
on: [push]

jobs:
  chromatic:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0  # Required for TurboSnap
      - uses: actions/setup-node@v4
      - run: npm ci
      - name: Publish to Chromatic
        uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          onlyChanged: true  # Enable TurboSnap

Review Workflows

Both platforms integrate with GitHub, GitLab, and Bitbucket pull requests. They post a status check that blocks merge until all diffs are reviewed.

Percy's review UI is functional. You see changed snapshots, can accept or reject individual ones, and the status check updates in real time.

Chromatic's review UI is more polished and has a few extras: you can assign reviewers, add comments on specific diff regions, and configure which stories require approval from whom. For teams doing regular design reviews alongside engineers, Chromatic's workflow is more structured.

Pricing and Limits

Percy (BrowserStack pricing as of 2024):

  • Free tier: 5,000 snapshots/month
  • Team plans start around $599/month for 50,000 snapshots
  • Snapshots are counted per unique screenshot (width × page = one snapshot)
  • BrowserStack integration available for real-device testing

Chromatic:

  • Free tier: 5,000 snapshots/month
  • Team plans start around $149/month for 35,000 snapshots
  • Snapshots are counted per story × browser
  • TurboSnap can significantly reduce snapshot consumption on large codebases

Both charge by snapshot volume, and that volume can grow fast on large component libraries. TurboSnap makes Chromatic meaningfully cheaper for Storybook-heavy teams.

CI Integration Comparison

Percy requires wrapping your test command with percy exec --. This is straightforward but means Percy adds latency to your existing test suite (it has to process and upload snapshots before returning).

Chromatic runs as a separate job — it builds your Storybook and uploads it independently of your test suite. This means visual testing doesn't add to your test suite runtime. The tradeoff is that Chromatic is decoupled from your end-to-end test flows.

# Percy in CI (GitHub Actions)
- name: Run Playwright with Percy
  env:
    PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
  run: npx percy exec -- npx playwright test

# Chromatic in CI (separate job)
- name: Publish to Chromatic
  uses: chromaui/action@latest
  with:
    projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

Cross-Browser Testing

Percy supports Chrome, Firefox, and Safari snapshots. You configure which browsers you want, and Percy renders your captured DOM in each. This is a key Percy advantage: you test visual consistency across browsers without running your test suite multiple times.

Chromatic supports Chrome and Firefox. Safari support is available but in beta as of mid-2024. For cross-browser visual coverage, Percy has the edge.

When to Choose Percy

  • You use Playwright, Cypress, or Selenium and want visual testing integrated into your existing test flows
  • You need cross-browser visual testing (especially Safari)
  • Your visual tests need to cover full page flows, not just isolated components
  • You don't use Storybook (or use it minimally)

When to Choose Chromatic

  • You actively use Storybook for component development
  • You want automatic visual coverage of every component story without writing explicit test code
  • You want TurboSnap to minimize CI costs on large component libraries
  • You want a tighter design review workflow for component changes

The Short Answer

If your team uses Storybook, start with Chromatic. The setup is one command, TurboSnap keeps costs manageable, and the story-based workflow gives you component coverage without writing any test code beyond your stories.

If your team does significant end-to-end testing in Playwright or Cypress, or if you need Safari visual coverage, Percy fits better.

Many teams end up using both: Chromatic for component-level regression, Percy for full-page integration-level snapshots. The overlap is acceptable if the value justifies the cost.

Conclusion

Percy and Chromatic solve the same problem with different philosophies. Percy is framework-agnostic and excels at cross-browser, full-page visual testing within your existing test suite. Chromatic is Storybook-native and excels at component-level coverage with minimal configuration and smart snapshot diffing.

Evaluate against your actual stack: what test framework do you use, do you have Storybook, and where do your visual regressions actually occur. That answer will tell you which tool to reach for.

Read more

Start now free