[E2E] Visual Differing Tests with Puppeteer and PixelMatch

最新推荐文章于 2024-11-22 16:26:20 发布

weixin_33757911

最新推荐文章于 2024-11-22 16:26:20 发布

阅读量153

点赞数

文章标签： ui

本文介绍了一种结合实时 Chromium 浏览器、截图及像素匹配测试的端到端视觉回归测试方法，确保用户界面完全符合预期设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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