DOCSEARCHbyAlgolia
Submit Docs

Happo Documentation

website·Indexed 34 days ago

https://docs.happo.io

A visual regression testing service that supports multiple browsers and accessibility testing. Happo provides integrations for Storybook, Playwright, and native apps, as well as a RESTful JSON API, webhooks, and an MCP server for AI assistants. The platform includes features for managing animated snapshots (v6.15.0+), continuous integration via GitHub Actions, and tools for handling browser updates and visual diffs.

Tokens
58.6K
Snippets
301
Records
455
Agent score
63%

What's inside Happo

  1. Overview of Happo MCP server capabilities

    Happo provides an MCP (Model Context Protocol) server that enables AI assistants (such as Claude, ChatGPT, and Cursor) to manage visual-regression comparisons. The server uses 'Streamable HTTP' transport with OAuth 2.1 authentication, allowing clients to discover OAuth endpoints automatically via /.well-known/oauth-protected-resource without manual token configuration. The server endpoint is https://happo.io/api/mcp.

  2. Capture animated snapshots with Happo

    Happo can capture animations by stepping through explicit times and storing frames as an animated PNG (APNG). This allows reviewers to see motion changes as diffs. The first frame serves as the default image for viewers that do not support APNG. Happo drives animations by 'seeking' (pausing and rendering at exact times) to ensure deterministic results across runs.

  3. Explore new features in the unified Happo package

    After migrating to the unified happo package, the following features are available:

    • Partial runs using --skip and --only flags.
    • The happo flake command to list reported flakes.
    • integration.autoApplyPseudoStateAttributes to capture hover, active, and focus states in Cypress and Playwright tests.
    • estimatedSnapsCount in custom integrations for automatic chunking.

  4. Understand Happo's screenshot comparison logic

    By default, Happo uses 'bitmap hashing' for performance. Each screenshot is assigned a hash based on its pixels; if hashes differ, a diff is triggered. This is a strict comparison where even a single pixel difference results in a diff. For cases where this is too strict, Happo provides 'Deep Comparisons', which perform a pixel-by-pixel analysis after a shallow hash diff has already been detected.

  5. Understand Happo visual testing concepts

    Happo is a visual regression testing service that renders UI in real browsers, takes screenshots, and compares them against a baseline to detect changes. Key terminology includes:

    • Snapshot: A single screenshot of one component in one specific variant (e.g., Button / disabled).
    • Target: A specific browser and screen size (or accessibility check) used for rendering. Every snapshot is rendered once per target.
    • Test Suite: The complete set of components and variants to be rendered, typically generated by an integration (e.g., Storybook, Cypress, Playwright).
    • Report: The output produced by a single run of a test suite.
    • Comparison: The process of diffing two reports, usually a feature branch report against a baseline report from the main branch.

  6. Understand Happo's default screenshot comparison

    By default, Happo uses 'bitmap hashing' for performance and strictness. Each screenshot is assigned a hash based on its pixels; if the hashes differ (even by a single pixel), Happo marks it as a diff. This avoids the expensive process of comparing every individual pixel for every test run.

  7. Perform automated accessibility testing with Happo

    Happo provides an accessibility target that uses axe-core® and static analysis to automatically detect accessibility violations. When configured, Happo analyzes the rendered components' DOM structure, ARIA attributes, and color contrast ratios to identify violations. This allows developers to track accessibility issues over time and maintain standards during the development process.

  8. Use ARIA Snapshots for accessibility verification

    ARIA snapshots provide a text-based representation of how screen readers interpret your interface. This allows developers to verify that the semantic structure of components and pages is correct and that the interface is presented in an understandable way to assistive technologies.

  9. Set up Happo webhooks

    Webhooks allow you to receive notifications about events in your Happo account. To configure a webhook, you must be an administrator of the Happo account. Navigate to the Webhooks admin page in the Happo dashboard and provide a server URL and a secret for signing requests. You must enable at least one event type for the webhook to function.

  10. Understand ARIA Snapshots in Happo

    ARIA snapshots provide a text-based representation of how screen readers interpret your interface. They are used to verify that the semantic structure of components and pages is correct and understandable for assistive technologies.

  11. Install the Happo CLI

    The happo CLI is an npm package required for building and uploading test suites. It requires a project with a package.json file.
    npm install --save-dev happo

  12. Store custom screenshots using the Happo Image API

    For custom integrations where you take your own screenshots, the Happo Image API allows you to store PNG images. This API uses the same authentication mechanism as the regular Happo API. The process involves generating a hash of the image, checking if that hash already exists to get an upload URL, and then uploading the file if necessary.