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

  • 相关阅读:
    linux之sed用法
    vim 设置tab空格个数
    centos 7远程登陆win10
    linux find命令学习
    CENTOS 7 修改默认启动内核
    Centos7更改默认启动模式
    centos 7创建桌面快捷方式
    修改centos中文为英文显示
    正则的sub
    超时或错误重试
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9291411.html
Copyright © 2011-2022 走看看