Happo for Playwright

Your tests passed. Did the page?

Playwright tells you the checkout button is there. Happo shows you how it looks in Chrome, Firefox, Edge, Safari, and on iPhone, and what your pull request changed. It’s one line in the tests you already have.

Start for free

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

checkout.spec.ts
import { test } from 'happo/playwright';

test('checkout', async ({ page, happoScreenshot }) => {
  await page.goto('/checkout');

  await happoScreenshot(page.locator('.order-summary'), {
    component: 'Checkout',
    variant: 'default',
  });
});
The CI run

npx happo -- playwright test

48 passed (41s)

Happo 3 diffs need reviewSafari, iOS Safari

Review

The gap

Green tests, broken layout.

Playwright checks what your app does: the button is there, the click works, the total adds up. It can’t tell you the price slid under the button in Safari. That’s what Happo is for.

What CI checked

  • expect(reserve).toBeVisible()
  • expect(total).toHaveText('€412')
  • await reserve.click()
  • expect(page).toHaveURL('/confirm')

All checks passed

What Happo saw1 diff

Checkout / defaultSafari

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

Our Playwright E2E tests passed successfully, as the app's functionality remained intact. However, Happo detected the unwanted changes in the text's color and positioning, which would have been noticeable and disruptive to users.

Arne Zeisingre:cap

Setup

Add Happo in an afternoon.

You keep your Playwright 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. Take a screenshot in a test you have

    checkout.spec.ts
    import { test } from 'happo/playwright';

test('checkout', async ({ page, happoScreenshot }) => {
  await page.goto('/checkout');

  await happoScreenshot(page.locator('.order-summary'), {
    component: 'Checkout',
    variant: 'default',
  });
});

    Already have fixtures of your own? Combine them with Happo’s through Playwright’s mergeTests.

  3. 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: 'playwright',
  },
  targets: {
    chrome: { type: 'chrome', viewport: '1024x768' },
    safari: { type: 'safari', viewport: '1024x768' },
    iphone: { type: 'ios-safari' },
  },
});

  4. Wrap your test command in CI

    Terminal
    npx happo -- playwright test

    Happo collects the screenshots as the tests run, renders them in each browser in parallel, and posts a status on the pull request.

The full Playwright guide

Built for Playwright

Built into the tests you have.

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

  • One fixture, one line

    happoScreenshot is a Playwright fixture. Import test from happo/playwright, or merge it into yours, and call it wherever a screenshot would help.

  • One browser in CI, five in Happo

    Your tests can keep running in Chromium. Happo takes the page as your test left it and renders it again in each browser you pick, on its own machines.

  • Any state your test can reach

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

  • A component or the whole page

    Point happoScreenshot at a locator for one component, or at body for the whole page.

Happo gives us the confidence that we are not introducing any unwanted visual changes in our pull requests. Something that pure end-to-end tests cannot always cover.

Adrian Burkhartre:cap

In every run

Your Playwright suite, in every browser.

Playwright 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 Playwright visual regression testing?

Visual regression testing takes screenshots during your Playwright tests 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.

Why not use Playwright’s own screenshot assertions?

They work well for a small suite in one browser. The baseline images live in your repository, they depend on the operating system that took them, and you review changes as image files. Happo renders in real browsers on its own machines, so results don’t change with your CI machine, and you review every diff in one place, with a status on the pull request.

Do my tests have to run in every browser?

No. Run your tests 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 your test command 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

Keep the tests. See the page.

Add Happo to your Playwright suite 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?