Happo vs BackstopJS: Features, Setup, and Workflow

Short answer: Choose Happo if you want a hosted visual regression service with integrations for Storybook, Playwright, Cypress, and an API, plus accessibility regression checks and a published browser and plan matrix. Choose BackstopJS if you want an open-source, CLI-centered workflow in which your team defines scenarios, stores reference images, reviews a report, and explicitly approves baseline updates.

Both tools compare rendered screenshots against baselines to surface UI changes. Their operating models differ: Happo runs comparisons as a managed service and returns reviewable diffs; BackstopJS gives you a configurable local package workflow. This guide covers setup, review, coverage, cost, reliability, and how to decide between them.

1. Happo vs BackstopJS at a glance

Dimension	Happo	BackstopJS
Operating model	Hosted visual and accessibility testing service with an open-source integration client.	Open-source package with a CLI-centered screenshot comparison workflow.
Typical setup	Install Happo or a framework integration, configure credentials and targets, then run it in CI.	Install the package, initialize a project, define scenarios and viewports, then run the CLI.
Review loop	CI captures selected stories or test states, compares them with a baseline, and provides a review link and diffs.	`backstop test` creates captures and a visual report; `backstop approve` promotes accepted captures to references.
Browser evidence	Published plan matrix lists Chrome, Firefox, Safari, iOS Safari, and Microsoft Edge, with availability varying by plan.	The README documents Chrome Headless and integrated Docker rendering. Confirm current project documentation for your required browser setup.
Accessibility	Happo documents accessibility regression checks alongside screenshot runs or as a standalone suite.	The reviewed README does not establish an accessibility-testing feature. Plan a separate, verified accessibility check if you need one.
Configuration focus	Integration, credentials, browser targets, viewports, and CI.	URLs, cookies, viewports, selectors, interactions, rendering, and file paths.
Ownership	Service plan, snapshot usage, supported integrations, and browser tiers.	CI runtime, reference image storage, rendering environment, and package maintenance.

Happo’s product material also describes silencing animations, waiting for fonts and asynchronous assets, and setting a color-delta tolerance to reduce visual noise. BackstopJS exposes scenario and rendering configuration; do not assume the same noise-control behavior without checking its current documentation. Happo Storybook overview · BackstopJS README

2. How the workflows differ

Happo: integration-led, hosted review

Happo fits into an existing component or browser-test workflow. For a Storybook project, configure its plugin; with Playwright or Cypress, use the relevant integration; a generic API is also available. A CI run captures the selected states against configured targets and produces comparisons for review. The team decides whether a change is expected. Happo documents visual and accessibility regression testing in the same general workflow. See the Storybook setup overview and accessibility overview.

BackstopJS: define scenarios, compare, approve

BackstopJS centers on three commands: initialize the project, run comparisons, and approve changes that should become the new baseline. Scenarios describe pages or states, with options for viewport sizes, selectors, cookies, and interactions. After a test, inspect the report before approving. Approval updates reference files, so treat it as a reviewed change rather than a cleanup command. The BackstopJS README documents the workflow and configuration.

3. Set up Happo with a project integration

The precise integration steps depend on your framework, so follow Happo’s current official documentation for Storybook, Playwright, Cypress, or the generic API. The repository’s package example uses a configuration file, environment credentials, browser targets, and the npx happo command.

Install Happo as a development dependency.
Create a happo.config.ts file and select only the browser targets and viewport sizes your project needs.
Set HAPPO_API_KEY and HAPPO_API_SECRET in your local environment and your CI provider’s secret store. Do not commit credentials.
Run Happo locally, review the comparison, then add the command to the CI job that builds the UI or runs visual checks.
Connect the relevant project integration. For Storybook, use the current Happo Storybook instructions.

npm install happo --save-dev

Example configuration based on the package README:

import { defineConfig } from 'happo';

export default defineConfig({
  apiKey: process.env.HAPPO_API_KEY!,
  apiSecret: process.env.HAPPO_API_SECRET!,
  targets: {
    'chrome-desktop': {
      type: 'chrome',
      viewport: '1280x720',
    },
    'firefox-desktop': {
      type: 'firefox',
      viewport: '1280x720',
    },
    'ios-safari': {
      type: 'ios-safari',
    },
  },
});

Run a comparison with:

npx happo

Happo’s package documentation lists configuration file variants including happo.config.js, .mjs, .cjs, .ts, .mts, and .cts. Targets can include desktop browser types and mobile Safari types; target options include viewport sizing, maximum dimensions, color-scheme preferences, and animation silencing. Verify exact current option names in the Happo package documentation before relying on them. Use CI secrets for credentials and limit targets deliberately to control snapshot volume.

4. Set up BackstopJS from scratch

Use a local development dependency to pin the package version with the project and make the CLI available to teammates and CI. BackstopJS initialization may create or overwrite project files, so run it in the intended project directory and inspect the generated files.

npm install --save-dev backstopjs
npx backstop init

The generated backstop.json holds viewports and scenarios. This small example checks a local page at two sizes:

{
  "id": "website-visual-checks",
  "viewports": [
    { "label": "desktop", "width": 1280, "height": 800 },
    { "label": "mobile", "width": 390, "height": 844 }
  ],
  "scenarios": [
    {
      "label": "home-page",
      "url": "http://127.0.0.1:3000/",
      "delay": 500,
      "selectors": ["document"]
    }
  ]
}

Start the application at the configured URL, then create an initial comparison:

npx backstop test

On a new project, the first test has no approved reference images yet. Review the generated captures in the report, then create the initial baseline:

npx backstop approve

For subsequent changes, run npx backstop test, inspect each reported difference, and run npx backstop approve only for intended changes. BackstopJS also supports a global install (npm install -g backstopjs), JavaScript configuration files, a --config path, a --filter to run or approve a subset, Docker rendering via --docker, JUnit reports, and interaction scripts using Playwright or Puppeteer. Refer to the README for supported scenario properties and current details.

5. Baselines, CI, and review policy

Visual regression tools are only as useful as their baseline process. Agree on a review owner and a rule for accepting intentional changes before putting either tool in a required CI check.

Bootstrap deliberately: inspect initial captures carefully; the baseline represents what future runs will treat as expected.
Review the context: connect diffs to the code change and check affected viewports and states, not only the first image in the report.
Keep approval auditable: commit BackstopJS reference updates alongside the UI change. For a hosted review flow, require a reviewer to accept the comparison.
Cover states explicitly: capture loading, error, empty, open-menu, and authenticated states when they matter. A screenshot tool cannot discover states your scenarios never render.
Keep environments consistent: use stable fixture data, deterministic fonts and assets, and a consistent rendering environment. BackstopJS documents Docker as a way to reduce cross-environment rendering differences.
Separate signal from noise: avoid volatile timestamps, rotating content, and unseeded data in captured areas; configure waits and tolerances according to the tool’s documented options.

In CI, make sure the application is available at the configured URL before capture. Keep credentials in the CI secret store, retain reports and reference artifacts in a place the team can access, and ensure failed visual checks produce a non-zero job result. BackstopJS documents a CLI return value of 0 for success and 1 when a layout error is found.

6. Browser coverage and accessibility

Happo’s current pricing page lists Chrome on its free plan; Chrome and Firefox on Starter; Chrome, Firefox, and Safari on Growth; and Chrome, Firefox, Safari, iOS Safari, and Microsoft Edge on Pro and Enterprise. Browser access is plan-dependent, so check the live Happo pricing page when budgeting.

BackstopJS’s repository README specifically documents Chrome Headless rendering and integrated Docker rendering. That evidence does not establish a complete current browser matrix. If your requirement includes a particular browser, verify it in the current project documentation before selecting BackstopJS.

Happo explicitly documents accessibility regression testing, which can run alongside visual checks or as a standalone suite. The BackstopJS README reviewed for this comparison does not establish an equivalent capability. If accessibility regressions are a selection requirement, confirm the needed checks and reporting in the chosen tool, or pair screenshot comparison with a separate accessibility solution.

7. Cost and usage planning

Happo counts a snapshot as one component variant captured in one browser. Its official pricing page, checked for this article, lists these monthly figures:

Happo plan	Included snapshots/month	Price shown	Browser coverage shown
Free	5,000	$0	Chrome
Starter	50,000	$149/month	Chrome, Firefox
Growth	150,000	$399/month	Chrome, Firefox, Safari
Pro	300,000	$749/month	Chrome, Firefox, Safari, iOS Safari, Microsoft Edge
Enterprise	1M+ listed	Custom	Chrome, Firefox, Safari, iOS Safari, Microsoft Edge

The page lists $0.006 per additional snapshot for Starter, Growth, and Pro. These are page observations and can change; verify pricing and quotas before purchase. Estimate demand as variants × browser targets × monthly runs, then account for accessibility checks and how often CI runs. Happo’s pricing page defines the snapshot unit and current plan details.

BackstopJS is an installable open-source package, but package availability does not make the full workflow cost-free. Include CI compute, Docker use if applicable, reference-image storage, time spent maintaining scenarios, and the work required to keep captures deterministic. There is no sourced current hosting or support cost comparison here.

8. Performance and reliability

Performance depends heavily on the number of stories or scenarios, viewports, browser targets, page readiness, and available parallel resources. More coverage means more capture work. Start with the states that matter most, then expand according to the risk and cost your team can support.

Happo describes parallel browser runs and noise reduction through animation silencing, waiting for fonts and assets, and color-delta tolerance. Those features can help make comparisons easier to review, but reliable results still depend on deterministic page data and appropriate integration setup. Its own published material is product documentation, not an independent benchmark.

BackstopJS documents parallel capture and comparison controls. Its README gives default limits of 10 concurrent captures and 50 concurrent comparisons, and notes that comparison concurrency affects memory use; tune these settings based on available runner memory rather than copying a high value blindly. It also documents Docker rendering to reduce environment-specific differences. These are configuration notes, not comparative speed measurements.

For either tool, avoid treating every pixel change as a product defect. Fonts, antialiasing, time-dependent content, image loading, and external data can vary. Fix sources of nondeterminism first; then use documented wait, tolerance, and rendering options where available.

9. Which tool should you choose?

Choose Happo when…	Choose BackstopJS when…
Your team wants a managed review workflow and published browser tiers.	Your team wants a CLI and direct control over scenario configuration and reference files.
You already use Storybook, Playwright, Cypress, or Happo’s API integration.	You need URL-oriented scenarios, selectors, cookies, or scripted interactions within the package workflow.
Accessibility regression checks belong in the same general review process.	You can meet accessibility requirements separately and have capacity to own CI, image storage, and setup.
You can estimate snapshots and budget for the required plan and browser targets.	You prefer to assess costs through your existing CI and storage infrastructure.

Before committing, run a representative slice of your actual UI through the candidate workflow: include a complex component, at least one responsive state, a dynamic page, and one intentional visual change. Compare setup effort, diff review clarity, CI fit, and who owns baseline approval. This evaluates your project without assuming a universal winner.

10. Troubleshooting common problems

Symptom	Likely cause	Fix
Happo cannot authenticate.	API key or secret is missing, malformed, or unavailable to the CI process.	Check the local environment and CI secret mapping; do not put real credentials in source control.
Happo captures the wrong stories or no stories.	The integration or Storybook target is not connected to the build being tested.	Follow the current framework-specific setup and verify the selected stories and build output.
Happo reports noisy visual diffs.	Animation, delayed fonts/assets, dynamic content, or small rendering differences affect captures.	Stabilize test data, wait for required assets, silence animation, and set documented tolerance where appropriate.
Happo usage exceeds the planned quota.	Snapshots multiply across variants, browser targets, and CI runs.	Calculate variants × browsers × runs; remove redundant targets only where coverage permits and recheck the live plan.
BackstopJS reports every first capture as changed.	No reference images have been approved yet.	Review the candidate images, then run `backstop approve` once to establish the initial reference set.
BackstopJS cannot reach a scenario URL.	The local app is not running, the URL is wrong, or CI starts capture before the server is ready.	Check the URL from the runner and make the CI job wait for the application before capture.
BackstopJS screenshots vary between machines.	Different fonts, browser rendering, or operating environments produce different pixels.	Align runner environments and consider the documented `--docker` rendering option.
BackstopJS is slow or runs out of memory.	Many scenarios/viewports or overly high parallel capture/comparison limits consume resources.	Filter to relevant scenarios while debugging and tune concurrency to the runner’s memory.
An approved BackstopJS baseline contains a regression.	Approval happened before the diff was reviewed, or too broad a set was promoted.	Restore the intended references from version control and re-run; use a filter for narrowly scoped approvals.
CI passes while a needed state was never checked.	The scenario list does not include that route, viewport, or interaction state.	Add explicit scenarios and confirm the report includes them on each run.

11. ScreenshotNeo as an alternative for page captures

Happo and BackstopJS are visual regression workflows: they compare captures against baselines. If your immediate task is to capture a website page as an image or PDF through an API, try ScreenshotNeo first. It is a website screenshot API and MCP server from Yorker Media. A single GET request takes a URL and returns a PNG, JPEG, WebP, or PDF. It does not replace baseline comparison or visual-diff review.

ScreenshotNeo is especially relevant when you need clean page captures: it accepts cookie or consent banners like a visitor and removes 60+ known consent platforms, newsletter popups, and chat widgets before capture, with each step optional. Bot checks/CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed; response headers identify the page verdict and billing status. Its MCP server offers take_screenshot, get_page_info, and capture_pdf for AI agents. Plans include 1,000 screenshots per month free with no card, then paid plans from $5 for 3,000; all features are on every plan. See the ScreenshotNeo API documentation.

Or skip the browser setup

Make a single request for a screenshot. The example saves a WebP response from a page capture:

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

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, and paid plans start at $5 for 3,000. Read the API docs and sign up free for 1,000 screenshots a month, no card required.

12. FAQ

Can I use Happo with Storybook?

Yes. Happo documents a Storybook plugin workflow. Follow its current setup guide to connect the plugin to your Storybook build and CI.

How does BackstopJS approve visual changes?

After reviewing a test report, run backstop approve to promote the latest captures to the reference images used in future comparisons.

Which tool includes accessibility regression checks?

Happo explicitly documents accessibility regression testing. The BackstopJS README reviewed here does not establish that feature.

Does BackstopJS have a full browser matrix like Happo?

The reviewed BackstopJS README establishes Chrome Headless and Docker rendering, not a complete current browser matrix. Confirm exact support in current project documentation.

Is BackstopJS free to operate?

The package is open source, but teams still need to account for CI compute, image storage, environment maintenance, and engineering time.

Sources and freshness

Happo pricing (checked for plan figures and snapshot definition).
Happo package README (configuration and CLI example).
Happo Storybook overview and accessibility overview.
BackstopJS repository README (workflow, rendering, and configuration notes).

Pricing, browser availability, integrations, and package options can change. Recheck the official pages linked above before adoption.