Puppeteer Healthcheck

Puppeteer Healthcheck is a tool wrapped over puppeteer to check page and critical asset status'.

The Problem

Often post deploy we want to check our site/app has been deployed sucessfully. We would want to ensure the web server is responding, critical assets and certain DOM elements exists post deploy.

Requirements & Installing

Node requirements:

• v8.9.4

NPM

yarn add global @nathf/puppeteer-healthcheck
# or if you prefer NPM
npm i -g @nathf/puppeteer-healthcheck

Docker

docker pull nathf/puppeteer-healthcheck

Config

Example command with config

puppeteer-healthcheck --config healthcheck.config.js

Config schema breakdown

uri: string

Valid URI to check

wait: number

Milliseconds to wait before requesting the URI

assetRegex: string[]

List of regex strings to match asset URLs

e.g.

assetRegex: [
  'script-(.+)\.js',
  'style-(.+)\.css'
]

screenshots: Screenshot[]

A screenshot object consists of:

These options are referenced from the official Puppeteer Docs

• path: string: absolute path to save the screenshot
• type: string: Specify screenshot type, can be either jpeg or png. Defaults to 'png'.
• quality: number: The quality of the image, between 0-100. Not applicable to png images.
• fullPage: boolean: When true, takes a screenshot of the full scrollable page. Defaults to false.
• clip: Object: An object which specifies clipping region of the page. Should have the following fields:
  • x: number: x-coordinate of top-left corner of clip area
  • y: number: y-coordinate of top-left corner of clip area
  • width: number: width of clipping area
  • height: number: height of clipping area
• omitBackground: boolean: Hides default white background and allows capturing screenshots with transparency. Defaults to false.
• viewport: Object Referenced from Puppeteer docs
  • width: number: page width in pixels.
  • height: number page height in pixels.
  • deviceScaleFactor: numer: Specify device scale factor (can be thought of as dpr). Defaults to 1.
  • isMobile: boolean: Whether the meta viewport tag is taken into account. Defaults to false.
  • hasTouch: boolean: Specifies if viewport supports touch events. Defaults to false
  • isLandscape: boolean: Specifies if viewport is in landscape mode. Defaults to false.

Sample config

A sample config checking the GitHub login page, checking their hashed css and js and taking screenshots at various sizes.

// healthcheck.config.js
module.exports = {
  uri: 'https://github.com/login',
  assetRegex: [
    'github-(.+)\.js',
    'github-(.+)\.css',
  ],
  screenshots: [
    {
      path: `${__dirname}/desktop.png`,
      viewport: {
        width: 800,
        height: 300
      }
    },
    {
      path: `${__dirname}/fullpage.png`,
      fullPage: true
    },
    {
      path: `${__dirname}/narrow.png`,
      viewport: {
        width: 375,
        height: 667
      }
    }
  ]
}

Results in the following output: