Happo docs

Happo docs

  • To happo.io »

›Configuration

Overview

  • Getting started
  • Continuous Integration
  • API reference
  • CLI reference
  • Supported browsers

Configuration

  • List of options
  • Plugins

Integrations

  • Happo Examples
  • Static bundle
  • Storybook
  • Cypress
  • Playwright
  • Stencil
  • Full-page
  • Native Apps

Guides

  • Reviewing diffs
  • Compare with a threshold
  • Multi-project setup
  • Performance
  • Image API
  • Browser updates
  • Spurious diffs
  • Ignoring diffs
  • Debugging

Plugins

Plugins are configured through the plugins configuration option. The following is a list of officially supported plugins.

Storybook

The Happo plugin for Storybook will automatically turn your stories into Happo examples. See the Storybook integration page for a full introduction.

npm install --save-dev happo-plugin-storybook
const happoPluginStorybook = require('happo-plugin-storybook');

// .happo.js
module.exports {
  // ...
  plugins: [
    happoPluginStorybook(),
  ],
};

Puppeteer

The puppeteer plugin is deprecated. Use prerender: false in your config instead.

If you have Happo examples that rely on measuring the DOM, the default pre-renderer (JSDOM) might not produce the results you need. By using a real browser (Chrome) to pre-render examples, measurements are available on render time.

npm install --save-dev happo-plugin-puppeteer
const happoPluginPuppeteer = require('happo-plugin-puppeteer');

// .happo.js
module.exports {
  // ...
  plugins: [
    happoPluginPuppeteer(),
  ],
};

TypeScript

The Happo plugin for TypeScript will inject the necessary webpack configuration to make Happo process TypeScript files correctly. See https://github.com/happo/happo-plugin-typescript.

npm install --save-dev happo-plugin-typescript
const happoPluginTypescript = require('happo-plugin-typescript');

// .happo.js
module.exports {
  // ...
  plugins: [
    happoPluginTypescript(),
  ],
};

Scraping

The scrape plugin is deprecated. Use the Cypress integration instead.

The Happo "scrape" plugin will make it possible to grab Happo examples from an existing website. See https://github.com/happo/happo-plugin-scrape. Make sure to also check out the built-in full-page support.

Gatsby

The Gatsby plugin is not under active development. Try using the Cypress integration instead.

The Happo plugin for Gatsby turns all your static pages into Happo tests. See https://github.com/happo/happo-plugin-gatsby.

npm install --save-dev happo-plugin-gatsby
const happoPluginGatsby = require('happo-plugin-gatsby');

// .happo.js
module.exports {
  // ...
  plugins: [
    happoPluginGatsby(),
  ],
  type: 'plain',
};
← List of optionsHappo Examples →
  • Storybook
  • Puppeteer
  • TypeScript
  • Scraping
  • Gatsby
Happo docs
Docs
Getting StartedContinuous IntegrationAPI Reference
Support
support@happo.io
More
Happo.io websiteHappo on GitHub
Copyright © 2022 Recur AB