Storybook screenshot testing

Automated Storybook screenshot testing (visual regression testing) for your component library, plus accessibility regression testing. Catch unintended UI changes and accessibility violations in pull requests with stable, cross-browser results.

Get started for free Learn more

Easy setup

Integrate Happo with Storybook in minutes. No code changes required. Just configure the Happo plugin and go.

View setup instructions

Stable & cross-browser

Happo captures screenshots of your stories in real browsers — Chrome, Firefox, Safari, Edge and iOS Safari. We parallize test runs across our large fleet of browsers to give you fast results.

Learn about browsers

Responsive testing

Tell Happo to take screenshots in different viewport sizes. This will ensure your stories look good no matter what device they are rendered on.

Configure viewport sizes

CI integration

Add Happo to your CI pipeline and get visual feedback on every pull request. Supports GitHub, Bitbucket, Azure, CircleCI, and more.

CI integration docs

Less flake

Happo will automatically silence animations, wait for asynchronous assets, fonts, and more. And you can specify a color-delta tolerance for visual changes so that you don't have to worry about minor differences.

Learn how to silence flake

Phil Glass

Monzo

Happo allows us to make changes to components used on hundreds of screens and upgrade core UI dependencies with confidence. It has been a big productivity boost over our previous workflow.

Adam Neary

Airbnb

Happo is a straight up life-saver. How many times did you think your change was contained only to discover that ten other teams started using what you built, and your change breaks three of the ten? Without Happo, you might not know.
From How Airbnb is Moving 10x Faster at Scale with GraphQL and Apollo

Denitsa Kulezich

Happo supports the latest versions of most browsers and emulators. Their speed of image comparison is impressive. They also have GitHub and CI integration and plugins to support Storybook and Cypress directly.
From Cross browser visual testing — Picking the right tool for NewsKit design system

Spot differences with ease

Happo's set of tools make it easy to spot differences between screenshots. When side by side isn't enough, the Diff view will highlight exactly where the change is located, and the swipe view allows you to quickly switch between the before and after.

To reduce noise, you can set a color-delta tolerance for visual changes. Happo will then treat changes below this threshold as noise and ignore them. This is great for image compression noise, anti-aliasing, and other minor differences.

Catch visual regressions in Storybook stories

If you already use Storybook to document and develop components, screenshot testing is the fastest way to ensure changes don’t introduce unintended visual regressions. Happo renders your stories in real browsers, captures screenshots, and highlights what changed—so reviewers can focus on the diffs instead of manually checking every state.

You can take screenshots at multiple viewport sizes, run across Chrome, Firefox, Safari, Edge, and iOS Safari, and plug the workflow into CI so every pull request gets a visual review link.

Happo also supports accessibility regression testing, which you can add to the same screenshot runs without writing any new tests—so you can catch new accessibility violations alongside visual diffs.

Screenshot different UI states with interaction tests

Already using Storybook interaction tests? Use them to drive components through different states (loading, error, hover, open menus, etc.), then take Happo screenshots for each state. This helps you keep behavioral tests and visual checks in the same workflow while making reviews easy with diffs.

FAQ

What is Storybook screenshot testing?

Storybook screenshot testing (visual regression testing) renders your stories, captures screenshots, and compares them to a baseline to catch unintended UI changes.

How is this different from Storybook interaction tests?

Interaction tests validate behavior (events, state, accessibility). Screenshot testing validates appearance—layout, colors, typography, spacing, and responsive behavior—where unit tests often miss regressions.

Can I take Happo screenshots from within Storybook interaction tests?

Yes. You can run interaction tests to drive your component through different UI states, then trigger Happo screenshots for those states—so you get both behavioral coverage and visual diffs.

Does Happo do accessibility testing too?

Yes. Happo includes accessibility regression testing that you can enable alongside your existing screenshot runs—no need to write new tests—to catch new accessibility violations alongside visual changes.

How do you keep visual tests from being flaky?

Happo silences animations, waits for fonts and assets, and lets you set tolerances to reduce noise from anti-aliasing and compression.

Can I run Storybook screenshot tests in CI?

Yes. Add Happo to your CI pipeline to capture screenshots and get review links on every pull request. Works with common CI providers and GitHub PRs.