Happo Review for Indian React Developers: Setup and CI Workflow

Happo is a hosted visual regression and accessibility testing service. It captures selected UI states in configured browser targets and lets a team compare them with a baseline during code review. To add its documented CLI setup to a React repository, install the happo development dependency, create a root configuration file, provide API credentials through environment variables, choose targets, and run npx happo. In CI, run that command after installing dependencies and building or starting whatever your chosen integration needs.

Happo complements React unit, integration, and end-to-end tests: those tests can verify behavior while a change to color, spacing, positioning, or rendering still needs visual review. For a component library with maintained stories, Storybook is a natural capture inventory. For a team with Playwright tests and important user states already encoded there, use the Playwright route. These are different workflows; most teams should begin with the assets that already represent the UI they care about.

This is a review of Happo’s documented workflow, not an India-specific commercial review. The sources do not establish local pricing, taxes, payment methods, or support terms. Verify current plan limits and purchasing details with Happo before adopting it. Happo’s site describes its hosted visual and accessibility testing product; its official repository documents the current consolidated package and CLI setup.

1. What Happo checks, and what it does not

A regular behavior test asks whether an interaction or outcome meets an assertion. A visual comparison asks whether a captured UI looks different from its accepted baseline. A page can keep working while an unintended CSS change alters its text color, spacing, alignment, or layout. Conversely, a screenshot comparison alone does not prove that a button works, that a form submits correctly, or that an accessible name is present.

Happo’s documented targets include browsers and an accessibility target. Teams can use visual checks alongside their existing functional and accessibility practices. Happo’s homepage includes a customer example in which Playwright end-to-end tests passed while Happo detected unwanted text color and positioning changes. That is a customer testimonial displayed by Happo, not an independent study or a guarantee that every visual defect will be caught.

Question	What the check contributes
Did a behavior assertion pass?	Unit, integration, or end-to-end tests verify the behavior they explicitly assert.
Did the rendered UI change?	Happo compares captured screenshots with a baseline for review.
Does the UI meet accessibility expectations?	Happo offers an accessibility target; teams should still validate the coverage and standards relevant to their product.

2. Install and configure Happo in a React repository

Step 1: Add the development dependency

Use the package manager already committed by your project. The official repository documents these commands:

npm install happo --save-dev
# or
pnpm add happo --save-dev
# or
yarn add happo --dev

The current repository instructions do not establish a release number for this article. Avoid pinning a version based on a possibly stale search listing; use your lockfile to keep CI reproducible and check the package registry when selecting or updating a version.

Step 2: Add credentials to the environment

Create API credentials in your Happo account, then expose them to the local process as HAPPO_API_KEY and HAPPO_API_SECRET. For local runs, load them using your team’s existing environment-variable method. In CI, save them in the provider’s secret store and make them available only to the job that needs them. Do not commit credentials into the repository, configuration file, or logs.

Step 3: Create a root configuration

The official README documents a TypeScript config using defineConfig. This example sets Chrome desktop, Firefox desktop, and iOS Safari targets:

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',
    },
  },
});

Save it as happo.config.ts in the project root. Happo also automatically recognizes happo.config.js, .mjs, .cjs, .mts, and .cts variants. The non-TypeScript filenames use the same happo.config. prefix.

The non-null assertions (!) in this documented TypeScript example tell TypeScript to treat the environment variables as present; they do not validate them at runtime. If credentials are missing, supply them before invocation and consider adding an explicit presence check using your project’s preferred config pattern.

Step 4: Choose targets for the risk you need to review

The repository lists desktop target types chrome, firefox, edge, safari, and accessibility, plus ios-safari and ipad-safari. Target options include viewport sizing, maximum dimensions, color-scheme preference, and animation silencing. Configure only browsers, viewports, and UI states that matter to your product and review capacity. Animated APNG capture is described as experimental and unsupported on iOS Safari and iPad Safari.

Step 5: Run from the repository root

npx happo

The CLI looks for a supported config filename and runs the visual regression suite. Keep the local and CI invocation aligned so that a green local run represents the same configured capture job.

3. Choose a React capture workflow: Storybook or Playwright

Workflow	Good fit when	What to plan
Storybook	Your team already maintains stories for reusable components and their important states.	Use those stories as the capture inventory. Decide which stories and browser or viewport targets matter, and make expected data and fonts available consistently.
Playwright	Your existing browser tests already create important product states, such as a menu open or a form showing validation.	Use the Happo integration to inject screenshots for selected UI states into the existing test setup. Select stable, high-value states rather than treating every end-to-end step as a visual case.

Happo documents both integrations. Its Storybook integration article describes capturing stories and reviewing changes, while the Playwright integration documentation explains its Playwright route. Check the current integration instructions before adding integration-specific packages or configuration: the consolidated CLI setup above is not a substitute for the integration’s own setup.

Choose based on existing assets, not on a requirement to use both. Storybook tends to make component states easy to enumerate in isolation. Playwright can cover rendered application states that are costly or impractical to model as stories. Compare coverage, maintenance, CI runtime, and review ownership in a small initial set before expanding.

4. Add Happo to CI

A typical job checks out the change, installs locked dependencies, builds the project if the selected integration requires it, exposes Happo credentials, and runs the CLI. Happo’s documented service flow is code push, CI run, screenshot capture, and baseline comparison. Results can be tied into pull request review. The exact job syntax and integration steps depend on your CI provider and whether the source is Storybook, Playwright, or another supported integration.

For a GitHub Actions workflow that already has a working Happo capture setup, the following minimal job shows the ordinary install-and-run shape. Add the required build or Storybook-serving step for your integration; no Happo-specific Storybook command is assumed here.

name: Visual regression
on:
  pull_request:

jobs:
  happo:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: npm
      - run: npm ci
      # Add your app build or integration-specific server step here.
      - run: npx happo
        env:
          HAPPO_API_KEY: ${{ secrets.HAPPO_API_KEY }}
          HAPPO_API_SECRET: ${{ secrets.HAPPO_API_SECRET }}

The action versions and Node version above are workflow choices, not requirements stated by Happo. Match them to your repository’s supported environment. Configure the secret names in the CI provider, restrict access according to your repository policy, and make sure forked pull requests cannot expose secrets unintentionally. The example runs on pull requests; teams may also need a trusted-branch run to establish or update baselines according to their review process.

GitLab availability and caveat

Happo announced GitLab support on September 10, 2026, including merge request status checks, baseline lookup through commit history, and cancellation of superseded jobs. Happo labels this integration experimental and says it still needs real-world use. Self-managed GitLab may require allowlisting Happo IP addresses. Validate it with your own runner, repository permissions, merge request flow, and concurrency patterns before making it a required production check. See the official GitLab announcement.

The announcement also lists GitHub, GitHub Enterprise, Bitbucket, and Azure DevOps support. For any provider, confirm current setup instructions and plan availability before designing a required check around it.

5. Make screenshot comparisons stable and useful

• Capture intentional states. Choose representative component or product states, including meaningful empty, error, loading, and responsive states where visual defects matter.
• Stabilize changing data. Use deterministic fixtures for dates, random values, user data, and content. A changing timestamp can create review noise without a product change.
• Control asynchronous rendering. Ensure the integration captures after the UI is ready. Avoid relying on arbitrary timing if the state can be made deterministic.
• Silence animation where appropriate. Happo target settings include animation silencing. Use it for motion that makes the screenshot nondeterministic, while separately reviewing motion behavior when that is the change under test.
• Keep viewport and color scheme deliberate. A baseline is meaningful only when the target dimensions and color preference represent a supported experience.
• Review changed snapshots intentionally. A diff may indicate a real regression or an intended design change. Update a baseline only after the change has been reviewed and accepted.
• Start with a manageable matrix. More browsers and states increase capture and review work. Prioritize areas with cross-browser risk and user impact, then expand based on observed value.

6. Limits, pricing questions, and fit for teams in India

The available research supports Happo’s product workflow and integrations but does not confirm India-specific prices, taxes, payment rails, billing currency, or support conditions. Happo has a pricing page; check its current plan details directly, including included browsers, snapshot or usage limits, collaboration needs, and any applicable commercial terms.

There are no independently verified benchmark results or quantified ROI figures in the reviewed sources. Do not estimate savings or claim a particular defect-detection rate from this evidence. For a team evaluating cost, measure its own number of capture states, browser targets, CI runs, review time, and the plan limits that apply.

Visual regression checks add work in CI and in reviewing changes. Their value depends on stable captures, useful coverage, and someone responsible for interpreting diffs. A broad, noisy baseline can make reviewers ignore changes; a carefully selected set of high-value states can make the feedback more actionable.

7. Happo troubleshooting

Symptom	Likely cause	Fix
CLI cannot find configuration	The file is outside the repository root or its name is not recognized.	Run npx happo from the project root and use one of the documented happo.config. filenames.
Authentication fails in CI	One or both environment variables are absent, misnamed, or unavailable to that job.	Check that HAPPO_API_KEY and HAPPO_API_SECRET are configured in the CI secret store and mapped to the invocation environment. Never print secret values while debugging.
TypeScript config fails to load	The project’s module/runtime configuration may not match the config format or the package manager install is incomplete.	Confirm the installed package and use a supported config extension. If needed, try a supported JavaScript config format that matches the project’s module setup.
Capture is blank or misses content	The page, story, or selected state may not be ready when capture occurs, or the integration’s source setup is incomplete.	Follow the relevant Storybook or Playwright integration instructions, ensure the app is available in CI, and make the target state deterministic before capture.
Many snapshots differ on every run	Dynamic content, animation, viewport differences, or unstable rendering creates noisy output.	Use fixed test data, consistent target settings, and animation silencing where appropriate. Remove irrelevant volatile content from the visual test state using the supported integration approach.
Local run works, CI run does not	CI may lack credentials, build artifacts, a running app, required dependencies, or the same environment assumptions.	Compare the invocation, environment variables, and integration prerequisites. Add the required build/server step and keep lockfile-based installation consistent.
GitLab merge request check or baseline lookup is unreliable	The integration is newly announced and experimental; permissions, history access, self-managed networking, or concurrency may differ.	Validate access tokens, project setup, commit history access, and runner/network rules. Contact Happo about IP allowlisting for self-managed GitLab if required.

8. Or skip the browser setup

Happo is for reviewing visual changes against baselines. If your immediate need is a clean screenshot of a live page for documentation, QA notes, or an AI workflow, ScreenshotNeo is a separate website screenshot API and MCP server. It does not replace Happo’s baseline comparison workflow.

One GET request returns an image or PDF. For example, save a WebP capture with cURL:

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

Or use Python:

import requests

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

Or 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(`ScreenshotNeo returned ${res.status}`);
const bytes = new Uint8Array(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', bytes));

See the ScreenshotNeo API documentation for request 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 per month with no card, and paid plans start at $5 for 3,000.

Sign up for ScreenshotNeo and get 1,000 free screenshots a month, with no card required.

9. FAQ

Does Happo work with React?

Yes. The documented package and CLI can be added to a React repository. Use Storybook or Playwright integration instructions to define what UI states Happo should capture.

Do I need both Storybook and Playwright?

No. Pick the integration that best matches the UI states and test assets your team already maintains.

Does a green Happo run prove the interface is accessible?

No single check proves overall accessibility. Happo offers an accessibility target, but teams should confirm its coverage against their requirements and retain appropriate accessibility testing and review.

Is Happo GitLab support production-proven?

Happo’s September 2026 announcement calls the GitLab integration experimental. Validate it with your own repository and CI setup before relying on it as a required production gate.

Can ScreenshotNeo replace Happo for visual regression testing?

No. ScreenshotNeo returns screenshots or PDFs; the described Happo workflow captures UI states and compares them against a baseline for review. They address different jobs.