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