[E2E] Visual Differing Tests with Puppeteer and PixelMatch

转载

mb5fe18f0f5c8c6 2018-07-10 20:53:00

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)

    })
}