Skip to main content

Full-page

The full-page integration helps you get screenshots of an existing website.

Installation​

No other libraries than happo.io need to be installed for a full-page integration:

npm install --save-dev happo.io

Configuration​

Add a pages option to your .happo.js config file:

// .happo.js
module.exports = {
  // other config...
  pages: [
    { url: 'https://www.google.com/', title: 'Google' },
    { url: 'https://www.airbnb.com/', title: 'Airbnb' },
  ],
};

The urls to the website need to be publicly available, otherwise Happo workers won't be able to access the pages

Add a happo script to your package.json file:

{
  "scripts": {
    "happo": "happo"
  }
}

Running​

Invoke npm run happo run to execute the pages test suite. To run in CI, follow the Continuous Integration guide.

Options​

Each item in the pages array can the following optional attributes in addition to url and title:

waitForContent​

If present, Happo will wait for content to appear on the page before taking the screenshot. E.g.

module.exports = {
  pages: [
    {
      url: 'https://twitter.com/',
      title: 'Twitter',
      waitForContent: 'Sign up with phone',
    },
  ],
};

Happo will wait at most 10 seconds for the content to appear before it takes the screenshot.