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 eitherjpeg
orpng
. 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 tofalse
. -
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 to1
. -
isMobile: boolean
: Whether themeta
viewport tag is taken into account. Defaults tofalse
. -
hasTouch: boolean
: Specifies if viewport supports touch events. Defaults tofalse
-
isLandscape: boolean
: Specifies if viewport is in landscape mode. Defaults tofalse
.
-
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: