How to incorporate PixelMatch into a Node.js script that runs Google Puppeteer

Integration of Visual Diffing into Google Puppeteer for Easy End-to-end Testing

const puppeteer = require('puppeteer');
const pixelmatch = require('pixelmatch');
const fs = require('fs-extra');
const PNG = require('pngjs').PNG;
const testNum = 0; // EDIT before each individual test
const dPath = 'apple.com-20180704'; // EDIT before each set of tests
const filenameBase = 'apple-test';
const pathBase = dPath + testNum + '/' + filenameBase;

(async () => {
    await fs.ensureDir(dPath + testNum);
    const phoneWidth = 320;
    const phoneHeight = 480;
    const tabletWidth = 780;
    const tabletHeight = 1024;
    const laptopWidth = 1200;
    const laptopHeight = 600;
    const browser = await puppeteer.launch();
    const testpage = await browser.newPage();
    testpage.setDefaultNavigationTimeout(50000); // default is 30000
    // Test Apple Homepage
    await testpage.goto('https:apple.com', { waitUntil: 'networkidle2' });
    // start taking pictures at different screen sizes
    await testpage.setViewport({ width: phoneWidth, height: phoneHeight });
    await testpage.screenshot({
        path: pathBase + '01.phone.png',
        fullPage: true,
    });
    // Do visual diffing here
    if (testNum > 0) {
        await compareScreenshots(0, testNum, filenameBase + '01.phone.png');
    }
    await testpage.setViewport({ width: tabletWidth, height: tabletHeight });
    await testpage.screenshot({
        path: pathBase + '01.tablet.png',
        fullPage: true,
    });
    if (testNum > 0) {
        await compareScreenshots(0, testNum, filenameBase + '01.tablet.png');
    }
    await testpage.setViewport({ width: laptopWidth, height: laptopHeight });
    await testpage.screenshot({
        path: pathBase + '01.laptop.png',
        fullPage: true,
    });
    if (testNum > 0) {
        await compareScreenshots(0, testNum, filenameBase + '01.laptop.png');
    }

    await browser.close();
})();

function compareScreenshots(num1, num2, filename) {
    var img1 = fs
            .createReadStream(dPath + num1 + '/' + filename)
            .pipe(new PNG())
            .on('parsed', doneReading),
        img2 = fs
            .createReadStream(dPath + num2 + '/' + filename)
            .pipe(new PNG())
            .on('parsed', doneReading),
        filesRead = 0;

    function doneReading() {
        if (++filesRead < 2) return;
        var diff = new PNG({ width: img1.width, height: img1.height });
        // NOTE: The default threshold for PixelMatch is 0.1
        pixelmatch(img1.data, img2.data, diff.data, img1.width, img1.height, {
            threshold: 0.2,
        });

        diff.pack().pipe(
            fs.createWriteStream(dPath + num2 + '/' + filename + '-diff.png')
        );
    }
}
/**
Instructions (in Markdown)
#### Edit the script

*dPath* -- decide what to call the new sub-directories where the screenshots and diff images will be placed

*testNum* -- set to 0

provide all the calls to goto() with the desired test URL

#### Run the script
```node test.js```

#### Edit the script again, but only to increase testNum by 1

#### Run the script again to set a baseline

#### DO UPDATES

#### Edit the script again (testNum++)

#### Run the script again to collect data. 

Check the diff files in *dPath-testNum* and ensure that there are no unexpected changes. Beware of false positives due to videos, animation etc. Repeat cycle (do updates, testNum++, run the script, examine the diffs) as needed.

#### Enjoy all the time you just saved :)

Credit: I drew heavily from [this blog article](https://meowni.ca/posts/2017-puppeteer-tests/) to incorporate the use of Pixelmatch into my code.
**/

Instructions

Edit the script

dPath -- decide what to call the new sub-directories where the screenshots and diff images will be placed

testNum -- set to 0

provide all the calls to goto() with the desired test URL

Run the script

node test.js

Edit the script again, but only to increase testNum by 1

Run the script again to set a baseline

DO UPDATES

Edit the script again (testNum++)

Run the script again to collect data.

Check the diff files in dPath-testNum and ensure that there are no unexpected changes. Beware of false positives due to videos, animation etc. Repeat cycle (do updates, testNum++, run the script, examine the diffs) as needed.

Enjoy all the time you just saved :)

Credit: I drew heavily from this blog article to incorporate the use of Pixelmatch into my code.