Chromatic vs Applitools for Storybook Visual Testing

Short answer: Both Chromatic and Applitools can use your existing Storybook stories as visual test cases. Chromatic documents pixel-based snapshot diffs and a workflow closely tied to Storybook. Applitools offers a Storybook addon and describes Visual AI with configurable match levels, alongside broader testing coverage. Neither method is established by the available evidence as more accurate for every interface. Choose by how your team runs and reviews tests, the platforms you need to cover, deployment requirements, and how usage is priced.

This guide compares their documented workflows and published plan information. It is not a hands-on test or an independent performance benchmark. Product capabilities and prices can change, so confirm current details with each vendor before committing.

1. What each product does with Storybook

Storybook describes visual testing as capturing story snapshots and comparing them with known-good baselines. Its documentation names @chromatic-com/storybook as the official addon and presents Chromatic as a cloud service for cross-browser testing. Storybook’s visual testing documentation is a useful starting point for understanding the underlying workflow.

Chromatic builds and uploads your Storybook to its cloud, captures UI snapshots, compares them with baselines, and supports review from the Storybook addon and CI. It documents pixel diffs and workflows involving Storybook, Vitest browser mode, Playwright, and Cypress.

Applitools provides a Storybook addon that runs within Storybook and can also be invoked from a CLI in CI. It describes checks per story or component, reuse of existing stories, and grouped review of similar changes. Applitools also describes coverage beyond Storybook components. These broader-scope and review descriptions are vendor statements; validate the exact SDK and plan for your use case.

Storybook itself says: “Storybook supports cross-browser visual testing natively using Chromatic, a cloud service made by the Storybook team.” That is Storybook’s description of its integration, not a comparative test result.

2. Side-by-side comparison

Decision area	Chromatic	Applitools	What to verify
Storybook entry point	Official Storybook addon; build and upload Storybook for cloud capture and review.	Storybook addon, with a CLI path for CI.	Who runs checks locally and in CI, and whether the same settings apply in both.
Comparison method	Documents pixel-based snapshot diffs against baselines.	Describes Visual AI and configurable match levels.	How the method handles animation, antialiasing, dynamic content, and your design system.
Review and baselines	Documents baseline and branch workflows and review through addon and CI.	Vendor comparison describes grouped review of similar changes.	Approval permissions, bulk review, baseline updates, and repeated differences across browsers.
Coverage	Documents Storybook and compatible Vitest browser, Playwright, and Cypress workflows.	Describes Storybook checks and broader web, mobile, desktop, and PDF coverage.	Exact framework, SDK, browser, platform, and plan requirements.
Deployment	Hosted SaaS, according to the vendor comparison cited in the research.	Vendor comparison describes public SaaS, dedicated cloud, and on-premises options.	Current hosting choices, data processing terms, residency, and security requirements.
Usage economics	Usage is based on billed snapshots, with documented rates for captured, copied, and bypassed snapshots.	Pricing page publishes a Starter plan with checkpoint allowances; checkpoint and snapshot units are different.	Your expected volume, included allowance, overage or pause behavior, and annual commitment.

The descriptions above characterize documented product approaches. They do not establish which tool finds more defects or is faster on a given project.

3. How to estimate the workflow fit

Chromatic fits naturally when

Your visual cases already live in Storybook and you want the documented Storybook addon and cloud review workflow.
You want to reason about pixel diffs against baselines and branch-based changes.
Your existing checks use compatible Vitest browser, Playwright, or Cypress workflows and you want to investigate the documented snapshot integrations.

Applitools fits naturally when

You want to run checks through its Storybook addon or CI CLI.
You want to evaluate Visual AI and configurable match levels on your actual components.
You need to investigate vendor-described coverage beyond Storybook, or need to assess its listed deployment models.

These are workflow signals, not universal recommendations. A short trial with representative stories is the practical way to assess review effort and visual noise; no independent head-to-head result is available in this research.

4. Plan a representative evaluation

Select representative stories. Include common components, critical states, long content, themes, and cases with dynamic data. Avoid evaluating only a static button.
Decide the execution path. Run the integration developers would actually use, then run it in CI with the configuration intended for production.
Define browser and viewport coverage. Write down the combinations that matter. More configurations generally mean more captured states or checkpoints, so include only needed coverage.
Exercise baseline review. Make a deliberate visual change and observe how reviewers inspect, approve, reject, and update the baseline.
Measure the team’s work. Track setup friction, review steps, noisy diffs, and time spent resolving expected changes. These are your own evaluation results, not vendor-wide performance claims.
Check procurement constraints. Confirm plan limits, deployment, security terms, retention, and billing with the vendors using your expected volume.

5. Snapshot and checkpoint costs

Chromatic billed snapshots

Chromatic’s billing documentation assigns 1 billed snapshot to a captured snapshot, 0.2 to a TurboSnap copied snapshot, and 0 to a bypassed snapshot. Its free-plan FAQ says the free plan includes 5,000 snapshots per month; when exhausted, testing and review pause until the next monthly reset unless the account upgrades. These are vendor-published figures checked in 2026; confirm the current terms before budgeting.

To estimate usage, inventory the stories and configurations that produce captures, then account for builds and the documented snapshot behavior. Do not assume that every story or every CI run maps one-to-one to a billed snapshot: copied and bypassed snapshots have different documented rates. The Chromatic Storybook page also addresses the question, “Does the addon take more billed snapshots? Will my bill go up?” Check the current billing documentation for how your particular addon and CI workflow are counted.

Applitools checkpoints

Applitools’ official pricing page currently lists Starter at $667 per month, paid annually, with 100,000 component checkpoints or 1,000 page checkpoints; it lists Storybook component testing among included features. Price and plan inclusions are volatile. Ask Applitools to estimate the intended checkpoint volume and verify the precise plan terms.

Snapshots and checkpoints are not equivalent billing units. Comparing the raw quantities as if one snapshot equaled one checkpoint would produce a misleading price comparison. Compare each vendor’s quote and counting rules against the same set of stories, builds, browsers, and modes.

6. Coverage, reliability, and performance considerations

Coverage: Count the meaningful interface states you need, not just the number of stories in the repository. Include relevant themes, responsive layouts, and browser differences. Confirm exactly which integrations and targets your plan supports.

Reliability: Visual checks depend on repeatable rendering. Make stories deterministic: stabilize dates, random values, network responses, animations, fonts, and feature flags. Keep baseline changes reviewable and make sure CI reports whether a check failed, was skipped, or needs human approval.

Performance: No independent speed benchmark was established in this research. Measure your own build duration and review throughput using representative stories. Story count, browser configurations, parallelism, CI resources, and vendor-side processing may all affect elapsed time; validate these in your project rather than relying on unsupported general comparisons.

Cost control: Track actual billed units during evaluation, establish a monthly budget, and alert before reaching an allowance. For Chromatic, include captured, TurboSnap-copied, and bypassed behavior in the estimate. For Applitools, get checkpoint counting and plan terms in writing. Recheck both vendors’ live pricing before purchase.

7. Troubleshooting common problems

Symptom	Likely cause	What to do
Many diffs appear without an intentional UI change	Rendering varies between runs because of animation, timestamps, random data, fonts, network content, or environment differences.	Make stories deterministic, wait for required content, and compare the same browser and viewport configuration. Review changed baselines deliberately.
CI differs from local Storybook	Different dependencies, environment variables, fonts, browser settings, or build output.	Pin dependencies and align CI and local build configuration; record the environment used for captures.
Expected change is hard to approve	Reviewers lack context about why the change happened or which baseline should move.	Include the UI change and expected states in the change description; ensure the right reviewers can approve baseline updates.
Usage is higher than expected	More stories, builds, browser configurations, or capture modes are running than the estimate assumed.	Inspect actual billed snapshots or checkpoints, identify the workflow producing them, and adjust coverage or build frequency where appropriate.
Free usage runs out mid-month	Chromatic documents a 5,000-snapshot monthly free allowance; testing and review pause after exhaustion unless upgraded.	Check usage during the month and decide whether to reduce unnecessary runs or move to a paid plan. Confirm current policy in the billing FAQ.
A required platform or deployment mode is unavailable	The needed SDK, target, or hosting option may not be available on the selected plan or under current terms.	Verify framework support, plan inclusion, and deployment choices directly with the vendor before migration.

8. ScreenshotNeo as an alternative for page captures

Chromatic and Applitools address visual testing workflows built around components and test checkpoints. If your need is instead to capture complete web pages through an API, ScreenshotNeo is a separate option to consider. It is a website screenshot API and MCP server from Yorker Media; it does not replace Storybook component visual testing.

ScreenshotNeo accepts a URL in one GET request and returns a PNG, JPEG, WebP, or PDF. Its clean-shot flow can accept cookie and consent banners like a visitor and remove more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks/CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and whether the request was billed. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.

Available options include full-page capture with lazy images loaded, CSS selector element capture, dark mode, 12 device presets or a custom viewport, retina scale, PDF paper size/margins/orientation/page ranges, HTML/CSS rendering, custom CSS and JavaScript, clicking an element before capture, hiding selectors, waiting for a selector/delay/network idle, blocking ads/trackers/requests/resource types, headers/cookies/user agent/Authorization, timezone and geolocation, transparent backgrounds, resizing, configurable-TTL caching, signed links for public image tags, async jobs with signed webhooks, batches of 100 URLs, a usage API, and an OpenAPI spec. Common screenshot API parameter names also work to ease migration.

9. Or skip the browser setup

For a page screenshot, a single request can save the response as an image. See the ScreenshotNeo API documentation for parameters and response details.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed; an MCP server lets AI agents take screenshots. The Free plan includes 1,000 screenshots per month with no card, and paid plans start at $5 for 3,000. Every feature is on every plan; yearly billing gives two months free. Sign up free for 1,000 screenshots a month, with no card.

10. Frequently asked questions

Can I use my existing Storybook stories with either product?

Yes. Both vendors document Storybook component workflows that use existing stories as test cases. Confirm the integration details for your Storybook version and build setup.

Does a pixel diff or Visual AI guarantee better bug detection?

No conclusion like that follows from the method descriptions alone. Evaluate both approaches with representative UI changes and expected noise in your own interface.

Are Chromatic snapshots and Applitools checkpoints comparable?

No. They are different vendor-defined usage units. Build separate estimates from the same intended test matrix and each vendor’s counting rules.

Can either product test beyond Storybook?

Chromatic documents compatible Vitest browser, Playwright, and Cypress snapshot workflows. Applitools describes coverage beyond Storybook. Confirm exact support for the framework and plan you intend to use.

Sources

Storybook visual testing documentation
Chromatic documentation, including snapshot and billing guidance
Chromatic’s Storybook page
Applitools Storybook documentation
Applitools pricing