• [E2E] Visual Differing Tests with Puppeteer and PixelMatch


    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

  • 相关阅读:
    Git上传文件不能超过100M的解决办法
    微信小程序 转发 分享功能(二)
    微信小程序 转发 分享功能(一)
    github上分支的合并
    微信小程序公告滚动通知
    django-blog:多对多查询
    正弦型函数的给出方式
    人教版|反三角函数
    在线|北京人大附中高一试题
    争鸣|深层次理解几何概型的概念和求解
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9291411.html
Copyright © 2020-2023  润新知