Happo vs Chromatic for Storybook Visual Testing

Short answer: Both Happo and Chromatic turn Storybook stories into visual regression checks: they capture rendered components and compare new images with baselines. Evaluate Happo first if you want accessibility regression checks in the same workflow, integrations that also cover Playwright and Cypress, or publicly listed snapshot quotas and prices. Evaluate Chromatic first if your team wants Storybook’s Visual Tests panel and its Storybook-focused review and CI workflow. Neither is a universal winner; choose based on your required browser matrix, review process, usage, and current plan terms.

This comparison reflects the vendors’ and Storybook’s published documentation, not an independent head-to-head benchmark. For teams that also need ordinary website captures outside Storybook, ScreenshotNeo is an alternative to try first: it removes consent banners, popups, and chat widgets before a capture, bills only clean shots, and offers a one-call screenshot API plus an MCP server.

1. What the tools do

A Storybook visual test renders a story in a browser, saves a screenshot, then compares a later run with an accepted baseline. A difference flags the story for review. This catches appearance changes such as layout, color, spacing, typography, and responsive behavior. A visual diff signals a change; a reviewer still decides whether it is intended.

Happo describes screenshot testing for Storybook and also documents accessibility regression testing alongside screenshot runs. It says it integrates with Storybook, Playwright, and Cypress. Chromatic uses Storybook stories as visual tests and offers browser and viewport coverage, with a visual-testing panel in Storybook and CI workflows documented by the product and Storybook docs. Happo’s Storybook overview, Chromatic’s Storybook overview, and Storybook’s visual testing docs describe these workflows.

2. Feature comparison

Decision area	Happo	Chromatic
Storybook visual testing	Documented screenshot integration for rendering stories, capturing images, and comparing to baselines.	Stories power visual tests; the Storybook Visual Tests addon provides a panel to run and inspect them.
Other integrations	Vendor materials list Storybook, Playwright, Cypress, and a generic API.	The sources reviewed here emphasize Storybook stories, the addon, and CI.
Browsers	Pricing is plan-dependent: Chrome on Free; Chrome and Firefox on Starter; Safari is added on Growth; Pro and Enterprise list Chrome, Firefox, Safari, iOS Safari, and Edge.	Product materials describe Chrome, Firefox, Safari, and Edge. The reviewed docs do not establish a comparable plan-by-plan browser matrix.
Viewports	Responsive snapshots can be configured at different viewport sizes.	Multiple viewports are supported and configurable.
Accessibility checks	Accessibility regression testing is documented and listed across plans.	Do not assume the reviewed Chromatic pages provide an equivalent service. Storybook’s separate Accessibility addon offers automated checks.
Review workflow	Integrates with CI for pull request feedback; diff views include side-by-side, highlight, and swipe modes.	CI review is documented, and the Storybook addon lets developers run tests and inspect changed stories in Storybook.
Pricing evidence	Public pricing lists quotas and paid overage rates; see the pricing section below.	Current pricing and comparable quotas were not established in the sources reviewed for this comparison.
Compatibility prerequisite	The reviewed Happo Storybook page does not state a minimum Storybook version; verify current setup docs.	The Storybook addon listing says Storybook 7.6 or later. Check the listing for current version compatibility before installing.

Sources: Happo Storybook, Happo pricing, Chromatic for Storybook, and the Storybook Visual Tests addon listing.

3. Which one should you choose?

Choose Happo when

You want visual and accessibility regression checks available in the same service and test workflow.
You already use Playwright or Cypress, or you want the flexibility to integrate beyond Storybook.
You need a published snapshot allowance and overage rate to model spend before adoption.
Your required browser set fits the plan’s published coverage. For example, Happo lists Safari starting on Growth, and iOS Safari and Edge on Pro and Enterprise.

Choose Chromatic when

Your component development and review process centers on Storybook.
You want to run or inspect visual tests in Storybook’s Visual Tests panel as well as use a CI workflow.
You need the browser and viewport coverage documented by Chromatic and have verified that current plan terms fit your team.
Your Storybook version meets the addon’s current prerequisite. The reviewed addon listing says 7.6 or later.

Run a small evaluation before committing

Select representative stories: a simple component, a complex state, a page-sized composition, and a responsive example.
Use the same story set, viewport sizes, and required browsers in both evaluations where available.
Include dynamic states such as loading, open menus, or validation errors. Use deterministic story data so changes are attributable to code rather than changing content.
Run both tools from a pull request and have the actual reviewers inspect the diffs, baseline updates, and status checks.
Count snapshots or tests for your real workflow, including browser and viewport variants and expected CI runs. Confirm current plan quotas, overage rules, and compatibility before purchase.

Published feature descriptions cannot tell you which service will produce fewer review interruptions for your application. Rendering, dependencies, fonts, animation, and story setup all affect diff noise, so check those in your own repository rather than treating marketing claims as comparative test results.

4. Setup and runnable starting points

Start with a working Storybook and a project in the service you select. Keep stories deterministic: mock changing API data, freeze timestamps where relevant, and avoid relying on external services during capture. Make sure the CI job can build the same Storybook that reviewers see.

Chromatic and the Storybook Visual Tests addon

The addon listing provides a CLI setup path and says it supports zero-configuration defaults after project configuration. Confirm its version table against your Storybook release first.

# Install/configure the official Storybook addon using Storybook's CLI
npx storybook add @chromatic-com/storybook

# In Storybook, open the Visual Tests panel and connect your Chromatic project
# Then run a CI build with the project's Chromatic setup.

For a direct command-line build, Storybook’s tutorial demonstrates using a project token supplied by Chromatic:

# Set CHROMATIC_PROJECT_TOKEN in your CI secret store first
npx chromatic --project-token="$CHROMATIC_PROJECT_TOKEN"

Do not commit a project token to source control. For addon configuration options and current installation guidance, see Storybook’s visual testing guide and the addon listing. The guide documents options including projectId, buildScriptName, debug, and zip; zip is suggested for large projects. Use the current guide for the config filename and schema that match your installed addon version.

Happo with Storybook

Happo’s official setup is to configure its Storybook plugin, then run it in CI. The exact package and configuration depend on your project and current integration docs, so use Happo’s maintained setup instructions rather than copying a version-specific snippet into a different stack.

# Open Happo's current Storybook setup instructions:
# https://happo.io/storybook
# Configure the Storybook integration and credentials as documented there,
# then add the documented Happo command to your CI pull-request job.

Happo says the integration requires no application code changes for its basic setup. Its Storybook guide covers viewport configuration, CI integration, screenshot stability, and combining screenshots with interaction-driven states. Read the Happo Storybook guide and current pricing page before adoption.

5. Pricing and usage planning

Happo defines a snapshot as one screenshot of one component variant in one browser. Its pricing page suggests estimating monthly usage as component variants × browsers × Happo runs per month. If a workflow also tests multiple viewport sizes, include those variants in your estimate and verify how the service counts them.

Happo plan (published)	Price and included snapshots	Browser coverage listed
Free	5,000 snapshots/month; no time limit	Chrome
Starter	$149/month; 50,000 snapshots; $0.006 per additional snapshot	Chrome, Firefox
Growth	$399/month; 150,000 snapshots; $0.006 per additional snapshot	Chrome, Firefox, Safari
Pro	$749/month; 300,000 snapshots; $0.006 per additional snapshot	Chrome, Firefox, Safari, iOS Safari, Microsoft Edge
Enterprise	Custom pricing; page lists 1M+ snapshots	Chrome, Firefox, Safari, iOS Safari, Microsoft Edge

These are vendor-posted terms accessed for this research on October 3, 2026; prices and plan features can change. Happo’s page also lists accessibility testing across plans. The reviewed sources did not establish Chromatic’s current price schedule or comparable quota, so there is no supported price winner here. Check both vendors’ current terms against your projected number of stories, browser and viewport combinations, and CI runs.

6. Reduce noisy diffs and keep runs reliable

Stabilize inputs. Use fixed fixtures and deterministic story args. Mock network responses and avoid live data that changes between runs.
Control time and animation. Freeze time-dependent content where appropriate and disable or settle animations for screenshots. Happo says it can silence animations and wait for asynchronous assets and fonts.
Wait for the real ready state. Ensure fonts, images, and async content have finished loading before capture. Avoid arbitrary delays when your integration offers a more reliable readiness mechanism.
Choose viewports deliberately. Test the breakpoints that matter to your components; more browser and viewport combinations increase coverage and may increase usage.
Set tolerances carefully. Happo documents a color-delta tolerance to reduce noise from small rendering differences. A permissive threshold can also hide small real regressions, so review representative diffs before adopting one.
Review baseline changes as code changes. Accept a new baseline only after confirming the visual change is intended. Keep baseline updates associated with the change that caused them.
Keep dependencies and capture environment consistent. Browser rendering can shift after font, browser, operating system, or dependency changes. Treat broad visual updates as changes to investigate rather than automatically accepting every diff.

Both services describe cloud or CI-based workflows. The documentation reviewed does not establish a controlled comparative speed, flake-rate, or accuracy result, so benchmark your own story set if runtime or review noise is a deciding factor.

7. Troubleshooting

Symptom	Likely cause	What to do
Chromatic addon fails during Storybook startup with an ESM-related `ERR_REQUIRE_ESM` error	The Storybook addon listing documents a known issue with older Yarn versions such as Yarn 1.x and a `string-width` dependency.	Upgrade Yarn or use the resolution documented in the addon listing; if needed, reinstall dependencies after removing the old install and lockfile. Consider npm or pnpm as the listing suggests.
The Chromatic addon cannot be installed or does not match Storybook	Addon and Storybook versions may not be compatible.	Check the addon’s current version table. The reviewed listing maps addon v4 to Storybook 9, v3 to Storybook 8.2+, and v2.0.2 to Storybook 8.0–8.1; Storybook docs also state a 7.6+ prerequisite for the documented setup.
A CI run cannot authenticate or find the project	Project setup or credentials are missing or unavailable to the job.	Complete the service’s project setup, store its required token in the CI secret manager, and make it available to the intended branch and pull-request job. Do not expose it in committed files or logs.
Every story appears changed after a dependency or environment update	Rendering inputs may have changed globally, including fonts, styles, browser behavior, or capture setup.	Inspect a small sample of diffs first, identify the shared cause, and regenerate baselines only after confirming the changes are intentional.
Images or fonts are missing in snapshots	Resources may not be loaded before capture, or the environment cannot access them.	Check asset paths and network access in CI. Wait for fonts and asynchronous assets to load, and avoid depending on transient external resources.
Unexpected diffs appear only in interactive states	State setup may be nondeterministic or the capture may occur before the interaction settles.	Make story inputs repeatable, drive the state using the supported interaction workflow, and ensure the final state is ready before capture.
Usage is higher than expected	Each story variant, browser, and run can add snapshots; viewports may add more captures depending on configuration and billing rules.	Measure actual counts from a representative month, remove redundant combinations, and verify the provider’s current counting rules and overage terms.

For service-specific setup failures, consult the Chromatic addon troubleshooting section or Happo’s current Storybook guide; integrations change over time.

8. Or skip the browser setup

Happo and Chromatic are designed for visual testing of component stories. If you need a screenshot of a public website as part of a script, report, or agent workflow, ScreenshotNeo provides a website screenshot API and MCP server.

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

See the ScreenshotNeo API docs for options. 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 a month with no card; paid plans start at $5 for 3,000.

9. FAQ

Do I need to write a separate test for every Storybook story?

Chromatic’s Storybook visual testing flow uses stories as test cases. Happo also renders Storybook stories for screenshot comparisons. You still need to author stories that represent the component states and data you want covered.

Does a visual test replace interaction or accessibility testing?

No. A visual diff checks rendered appearance. Use behavior tests for interaction correctness and appropriate accessibility checks for accessibility requirements. Happo documents accessibility regression testing; Storybook also documents a separate Accessibility addon.

Can I compare the vendors’ speed from their published pages?

The sources reviewed do not provide a controlled, directly comparable benchmark. Run the same representative stories in your own CI if runtime is important.

Which one costs less?

The reviewed Happo pricing page publishes plan quotas and overage rates, while a comparable current Chromatic price schedule was not established in this research. Compare current vendor terms using your expected workload instead of assuming a cost winner.