HomeAll comparisons
CompareTesting & BrowserPercy vs Chromatic
Testing & Browser

Percy vs Chromatic: Which MCP should you use?

👁️

Percy

Visual review platform (BrowserStack)

VS
🎨

Chromatic

Visual testing for Storybook

TL;DR

Percy captures full-page screenshots from any E2E framework. Chromatic is tied to Storybook — it captures each story as a snapshot, plus UI review workflows for designers. If your design system lives in Storybook, Chromatic is purpose-built; for general app screenshots, Percy is the pick.

Percy: 0 winsChromatic: 3 wins5 ties
👁️

Pick Percy

Pick Percy when you test full pages from Cypress/Playwright/etc, not just components.

🎨

Pick Chromatic

Pick Chromatic when you use Storybook and want story-level visual + interaction tests.

Feature-by-feature comparison

Feature👁️Percy🎨ChromaticWinner
Target
Full pages / E2E
Storybook stories
Tie
Storybook integration
None
Native
B
Cross-browser snapshots
Yes
Yes (Chrome, FF, Safari, Edge)
Tie
Interaction testing
No
Yes (via play functions)
B
Review UI
Excellent
Excellent, design-oriented
Tie
Pricing model
Per snapshot
Per snapshot
Tie
Owner
BrowserStack
Storybook team (Chromatic Inc)
Tie
Component-level diffs
DIY
Native per story
B

Target

Tie

Percy

Full pages / E2E

Chromatic

Storybook stories

Storybook integration

B

Percy

None

Chromatic

Native

Cross-browser snapshots

Tie

Percy

Yes

Chromatic

Yes (Chrome, FF, Safari, Edge)

Interaction testing

B

Percy

No

Chromatic

Yes (via play functions)

Review UI

Tie

Percy

Excellent

Chromatic

Excellent, design-oriented

Pricing model

Tie

Percy

Per snapshot

Chromatic

Per snapshot

Owner

Tie

Percy

BrowserStack

Chromatic

Storybook team (Chromatic Inc)

Component-level diffs

B

Percy

DIY

Chromatic

Native per story

👁️

Best for

Percy

  • No clear wins on the compared features — see summary and tradeoffs above.
🎨

Best for

Chromatic

  • Storybook integration: Native
  • Interaction testing: Yes (via play functions)
  • Component-level diffs: Native per story

Migration path

Not a direct migration — they test different things. If you're killing Storybook, drop Chromatic and move your visual coverage into Percy against your real pages. If you're adopting Storybook, adding Chromatic is a few lines in CI (npx chromatic --project-token=...). Teams often run both: Chromatic for the design system, Percy for the app.

Frequently asked questions

What is the main difference between Percy and Chromatic?

Percy captures full-page screenshots from any E2E framework. Chromatic is tied to Storybook — it captures each story as a snapshot, plus UI review workflows for designers. If your design system lives in Storybook, Chromatic is purpose-built; for general app screenshots, Percy is the pick. In short: Percy — Visual review platform (BrowserStack). Chromatic — Visual testing for Storybook.

When should I pick Percy over Chromatic?

Pick Percy when you test full pages from Cypress/Playwright/etc, not just components.

When should I pick Chromatic over Percy?

Pick Chromatic when you use Storybook and want story-level visual + interaction tests.

Can I migrate from one to the other?

Not a direct migration — they test different things. If you're killing Storybook, drop Chromatic and move your visual coverage into Percy against your real pages. If you're adopting Storybook, adding Chromatic is a few lines in CI (npx chromatic --project-token=...). Teams often run both: Chromatic for the design system, Percy for the app.

Do Percy and Chromatic both work with MCP-compatible AI agents?

Yes. Both have MCP servers installable via MCPizy (mcpizy install percy and mcpizy install chromatic). They work identically across Claude Code, Claude Desktop, Cursor, Windsurf, and any other MCP-compatible client. You can install both side by side and route queries in your agent's prompt.

More Testing & Browser comparisons

🎭VS🧑‍🎤

Playwright vs Puppeteer

Playwright (Microsoft) is the spiritual successor to Puppeteer — same core team, but cross-browser (Chromium, Firefox, WebKit), better auto-wait, built-in test runner, and first-class language bindings. Puppeteer remains solid for Chrome-only scraping/automation, but Playwright is the default for new projects.

🎭VS🌲

Playwright vs Cypress

Cypress pioneered modern E2E DX (time-travel debugger, docs, VS Code-feel). Playwright caught up and surpassed on: cross-browser, multi-tab, iframe handling, parallelization, and API testing. Cypress still has the nicer 'first 30 minutes' experience; Playwright wins at scale.

🎭VS🧪

Playwright vs Selenium

Selenium is the original cross-browser test framework — 20 years old, huge ecosystem, mandatory for legacy IE/old-Safari coverage. Playwright is modern, faster, has auto-wait, and doesn't need a separate driver. For new projects in 2026, Playwright wins on almost every axis except raw browser breadth.

Install both with MCPizy

Not sure? Run both side by side — swap between them in your AI agent with a single config line.

$mcpizy install percy && mcpizy install chromatic
👁️Install Percy🎨Install Chromatic
Free to install. Swap between them in your agent config.