zoukankan      html  css  js  c++  java
  • [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

  • 相关阅读:
    组合与封装
    继承与派生
    面向对象编程
    subprocess、re、logging模块
    json、pickle、collections、openpyxl模块
    python内置模块
    递归函数与模块
    生成式、面向过程、与函数式
    叠加装饰器与迭代器
    闭包函数与装饰器
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9291411.html
Copyright © 2011-2022 走看看