initial-rendering

0.0.3 • Public • Published

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

example screenshot

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"
}

Package Sidebar

Install

npm i initial-rendering

Weekly Downloads

0

Version

0.0.3

License

ISC

Unpacked Size

1.61 MB

Total Files

9

Last publish

Collaborators

  • fry2k