[E2E] Visual Differing Tests with Puppeteer and PixelMatch

Take your end to end tests to the next level by comparing your current application's view with an already accepted screenshot. With the combination of running a live chromium browser, taking a screenshot and running a pixelmatch test, we are able to make sure our UI matches exactly as intended. We will make the test pass and then have it fail by adding an extra p tag to our App.js

 

const puppeteer = require('puppeteer')
const devices = require('puppeteer/DeviceDescriptors')
const iPhone = devices['iPhone 6']
const pixelTest = require('./diffImages.js')

/* Setting up testing env, which is not important*/

let browser
let page
beforeAll(async () => {
    browser = await puppeteer.launch({ headless: false })
    page = await browser.newPage()
    await page.goto('http://localhost:3000/')
    await page.emulate(iPhone)
})

afterAll(() => {
    browser.close()
})

/* Finish Setting up testing env */

/*Start testing*/
describe('screenshots are correct', () => {
    it('/index', async () => {
        const file = 'screenshot.png'
        await page.screenshot({ path: file })
        return pixelTest.compareScreenshots(file)
    })
})

const pixelmatch = require('pixelmatch')
const fs = require('fs')
const PNG = require('pngjs').PNG

exports.compareScreenshots = fileName => {
    return new Promise((resolve, reject) => {
        const doneReading = () => {
            expect(img1.width).toBe(img2.width)
            expect(img1.height).toBe(img2.height)

            const numDiffPixels = pixelmatch(
                img1.data,
                img2.data,
                null,
                img1.width,
                img1.height,
                { threshold: 0.1 }
            )
            expect(numDiffPixels).toBe(0)
            resolve()
        }
        const img1 = fs.createReadStream('testScreenShot.png').pipe(new PNG())
        const img2 = fs.createReadStream(fileName).pipe(new PNG()).on('parsed', doneReading)

    })
}

 

https://www.npmjs.com/package/pixelmatch