Happo for Cypress

Cypress clicks through it. Happo looks at it.

Your Cypress specs already walk through the flows that matter. Add one command and Happo renders each step in Chrome, Firefox, Edge, Safari, and on iPhone, so you see what a pull request changed before you merge.

Start for free

Start free with 5,000 snapshots a month. No credit card needed.

checkout.cy.js
describe('Checkout', () => {
  it('shows the order summary', () => {
    cy.visit('/checkout');

    cy.get('.order-summary').happoScreenshot({
      component: 'Checkout',
    });
  });
});
The CI run

npx happo -- cypress run

31 passing (52s)

Happo 3 diffs need reviewSafari, iOS Safari

Review

The gap

Passing specs, broken pixels.

A spec that clicks through checkout proves the flow works. It doesn’t notice that the button got wider and pushed the price onto its own line in Safari. Happo does.

What CI checked

  • cy.get('.reserve').should('be.visible')
  • cy.contains('€412')
  • cy.get('.reserve').click()
  • cy.url().should('include', '/confirm')

All checks passed

What Happo saw1 diff

Checkout / defaultSafari

The button was visible and the click went through, so every spec passed. In Safari, the price wrapped under the button.

Give Happo a try. Convince your team to test it out. You'll have better tests and a better looking application that will not change day to day for the worse.

Gleb BahmutovCypress

Setup

Add Happo in an afternoon.

You keep your Cypress setup. Happo adds a step to it, and every pull request gets a status that links to its diffs.

  1. Install Happo

    Terminal
    npm install --save-dev happo

  2. Add the command

    cypress/support/commands.js
    import 'happo/cypress';

  3. Register the task

    cypress.config.js
    import { defineConfig } from 'cypress';
import happoTask from 'happo/cypress/task';

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      happoTask.register(on);
      return config;
    },
  },
});

  4. Pick your browsers

    happo.config.ts
    import { defineConfig } from 'happo';

export default defineConfig({
  apiKey: process.env.HAPPO_API_KEY,
  apiSecret: process.env.HAPPO_API_SECRET,
  integration: {
    type: 'cypress',
  },
  targets: {
    chrome: { type: 'chrome', viewport: '1024x768' },
    safari: { type: 'safari', viewport: '1024x768' },
    iphone: { type: 'ios-safari' },
  },
});

  5. Wrap cypress run in CI

    Terminal
    npx happo -- cypress run

    Then call happoScreenshot on any element in a spec. Happo collects the screenshots as the specs run, renders them in each browser in parallel, and posts a status on the pull request.

The full Cypress guide

Built for Cypress

Right where your specs are.

There’s no second suite to keep up. Happo’s screenshots ride along with the Cypress specs your team already writes.

  • One command

    Chain happoScreenshot() onto any cy.get: one component, or body for the whole page.

  • Specs in one browser, screenshots in five

    Your specs can keep running in Electron or Chrome. Happo takes the page at each screenshot and renders it again in every browser you pick, Safari and iOS Safari included.

  • Any state your spec can reach

    Sign in, fill the cart, open the menu, then take the screenshot. Happo sees what your spec sees, at the moment you choose.

  • Out of the way locally

    Happo runs when CI wraps cypress run. When you work in cypress open, it stays out of the way.

Happo to the rescue! It's a direct competitor to Percy, but it's much cheaper, supports more browsers, and is easier to use. Another big selling point? It supports Cypress integration.

Boris YordanovToptal

In every run

Your Cypress suite, in every browser.

Cypress runs your tests in one browser. Happo takes what they render, draws it again in each browser you pick, and compares each one with your base branch.

  • Chrome
  • Firefox
  • Edge
  • Safari
  • iOS Safari

  • Every browser your users have

    Each screenshot renders in the browsers you pick: Chrome, Firefox, Edge, Safari, and Safari on iPhone and iPad, at any viewport, in light mode and dark.

    Browsers and targets

  • Accessibility in the same run

    Add an accessibility target and every screenshot is checked too, with each violation pointed out on a screenshot. New ones block approval; the ones you already have don't.

    Accessibility testing

  • Animations, frame by frame

    Spinners, toasts, and transitions get stepped to exact moments and compared frame by frame, so a change to the motion is a diff like any other.

    Animation testing

  • Only real changes

    Rendering noise under your threshold is filtered out, every diff is deterministic, and a flake you report once stays ignored.

    Keeping diffs stable

  • A status on every pull request

    Happo compares with your base branch and posts a status that links to the review. It turns green when someone signs off.

    Continuous integration

  • Diffs your agents can read

    Claude Code and Cursor read the same diffs through Happo’s MCP server, fix what they broke, and hand you a pull request that already passes.

    The MCP server

FAQ

Questions, answered

What is Cypress visual regression testing?

Visual regression testing takes screenshots during your Cypress specs and compares them with the same screenshots on your base branch, so a change to how the page looks shows up as a diff before you merge.

Where should I add screenshots first?

Start with the flows and components where looks matter most and many people make changes: checkout, sign up, navigation, dashboards, and anything responsive. Adding a screenshot is one line, so it’s easy to grow from there.

Do my specs have to run in every browser?

No. Run your specs the way you do today. Happo takes the page at each screenshot and renders it in every browser you pick, including Safari and iOS Safari.

Does Happo test accessibility too?

Yes, with no new tests to write. Add an accessibility target and each screenshot is checked for accessibility violations in the same run. It’s included on every plan.

How does Happo keep screenshots from being flaky?

Happo waits for fonts and images, holds animations still unless you ask it to test them, and filters out rendering noise below a threshold you set. When a diff is a flake, report it once and Happo ignores it from then on.

Does it run on every pull request?

Yes. Wrap cypress run with npx happo in CI, and every pull request gets a status that links to its diffs. It works with GitHub Actions, CircleCI, Azure DevOps, and the rest.

Integrations

Happo works with what you have

Every flow, every browser.

Add Happo to your Cypress specs this afternoon. Your next pull request shows what it changed, in the browsers your users have.

Start for free

Start free with 5,000 snapshots a month. No credit card needed.

Need help?