initial-rendering

Use Chrome headless screenshots for comparing the following steps with the full loaded page:

• only the document is loaded
• the document without any style and script tags is loaded

The library uses puppeteer as wrapper for Chrome headless.

Install

npm install initial-rendering

Usage

The library returns a json object with the results. All images are passed as optimized base64 encoded pngs. imagemin-pngquant is used for optimizing the images. pixelmatch is used for comparing the images.

Here I wroten an article at medium.com about the library.

const initialRendering = require('initial-rendering');
initialRendering({
	url: 'https://foo.bar',
	puppeteerOptions: {}, // optional
	device: 'Nexus 5X', // optional. default: Nexus 5X
	returnScreenshots: true, // optional. default: true
	waitFor: { // optional
		1: 0, // optional. default: 0
		2: 500, // optional. default: 0
		3: 500 // optional. default: 0
	}
}).then(data => {
	// handle result
}).catch(err => {
	// handle err
});

API

initialRendering(options)

Use Chrome headless screenshots for comparing the initial rendering and return all the informations as object

Parameters

• options object options (optional, default {})
  • options.url string url (optional, default false)
  • options.device string device name which is supported by chromium (optional, default Nexus5X)
  • options.puppeteerOptions object additional options for puppeteer (optional, default {})
  • options.auth object http authentication (optional, default {})
    • options.auth.username string username
    • options.auth.password string password
  • options.returnScreenshots boolean return screenshot as base64 image (optional, default true)
  • options.waitFor object waitFor n ms after each step (optional, default {})
    • options.waitFor.1 number delay after step 1
    • options.waitFor.2 number delay after step 2
    • options.waitFor.3 number delay after step 3

Returns promise<initialRenderingResult>

initialRenderingResult

Type: object

Properties

• execution number unix timestamp of execution in ms
• url string url
• device string device name
• width number screenshot width in px
• height number screenshot height in px
• full string base64 png screenshot of fully loaded website
• steps array<initialRenderingStep> loading steps
• version string version tag

initialRenderingStep

Type: object

Properties

• name string step name
• numDiffPixels number number of diff pixels
• ratio number ratio of diff pixels
• screenshot string base64 png screenshot of loaded step
• diff string base64 png screenshot of diff image

Examples

Screenshots

JSON result

{
	"execution": 1527064733409,
	"url": "https://www.buecher.de",
	"device": "Nexus 5X",
	"width": 1082,
	"height": 1922,
	"full": "data:image/png;base64,abc",
	"steps": [{
		"name": "initial",
		"numDiffPixels": 627364,
		"ratio": 30.17,
		"screenshot": "data:image/png;base64,abc",
		"diff": "data:image/png;base64,abc"
	}, {
		"name": "no-assets",
		"numDiffPixels": 295434,
		"ratio": 14.21,
		"screenshot": "data:image/png;base64,abc",
		"diff": "data:image/png;base64,abc"
	}],
	"version": "0.0.1"
}