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