[E2E] Visual Differing Tests with Puppeteer and PixelMatch
Visual and with tests puppeteer
2023-09-14 09:00:50 时间
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) }) }
相关文章
- Visual Studio VS如何拷贝一个项目的窗体文件到另一个项目
- Visual Studio下SQLite数据库开发环境设置
- 吐槽Visual Studio 2010
- 如何让 Visual Studio Code 里显示 Cypress 的 intelligent code suggestion
- 使用Visual Studio Code调试运行在SAP云平台上处于运行状态的nodejs应用
- 使用Visual Studio Code调试运行在SAP云平台上处于运行状态的nodejs应用
- 【错误记录】Visual Studio 中配置 NDK 头文件路径 ( NDK 的三个头文件路径 | 与 CPU 架构相关 asm 头文件路径选择 )
- Visual Studio Code Dev
- Visual Studio静态分析组件更新一览
- 【RPA进阶】 一文了解使用Visual Studio扩展UiPath Activity Creator创建自定义Activity