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

[E2E] Visual Differing Tests with Puppeteer and PixelMatch的更多相关文章

  1. ant design pro (十二)advanced UI 测试

    一.概述 原文地址:https://pro.ant.design/docs/ui-test-cn UI 测试是项目研发流程中的重要一环,有效的测试用例可以梳理业务需求,保证研发的质量和进度,让工程师可 ...

  2. Vue Study [1]: Vue Setup

    Description The article for vue.js Setup. Original post link:https://www.cnblogs.com/markjiang7m2/p/ ...

  3. vue-cli 第一章

    一.安装 Node.Python.Git.Ruby 这些都不讲解了   二.安装 Vue-Cli    # 最新稳定版本 # 全局安装 npm install --global vue-cli # 创 ...

  4. vue单页面模板说明文档(1)

    Introduction This boilerplate is targeted towards large, serious projects and assumes you are somewh ...

  5. Vue 系列之 基础入门

    背景叙述 渐进式 JavaScript 框架 易用:已经会了 HTML.CSS.JavaScript?即刻阅读指南开始构建应用! 灵活:不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩. 高 ...

  6. 搭建VueMint-ui框架

    搭建VueMint-ui框架 2018年01月07日 22:29:58 阅读数:2660 vueweb vue project 检查项目环境 一.检查是否安装node.js # 检查node版本 $ ...

  7. Vue 全家桶 + Electron 开发的一个跨三端的应用

    代码地址如下:http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...

  8. Vue Study [2]: Vue Router

    Description The article for vue router. Original post link:https://www.cnblogs.com/markjiang7m2/p/10 ...

  9. vue - 前置工作 - 目录功能介绍

    一个DEMOS的完整目录(由于GWF问题,我就不一一打开网站一个个去搜索并且解释了)可以去关注:https://www.cnblogs.com/ye-hcj build build.js(本文来自ht ...

随机推荐

  1. assistant: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.15' not found (required by

    [oracle@oracledb button]$ assistantassistant: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.15' no ...

  2. 点开瞅瞅,再来几道Python面试题吧,Python面试题No20

    本面试题题库,由公号:非本科程序员 整理发布 第1题:如何理解 Django 被称为 MTV 模式? 这个题就是面向对象设计和设计模式的开始. 你可能比较熟悉的模式叫做: MVC.说是 Model V ...

  3. WPF PasswordBox MVVM 实现

    由于PasswordBox.Password属性非依赖属性,所以不能作为绑定的目标,以下是本人的MVVM实现方法. PasswordBox.Password与TextBox.Text同步,TextBo ...

  4. UE4源码版食用要记

    UE4源码版和预编译版不能共享工程,这和插件版是一样的. 一般来说我都是在VS中生成编辑器,于编辑器中添加新类,VS中编辑代码. 编译引擎的时候编译配置使用的是devepolmenteditor.开发 ...

  5. Json——一般应用

    引用命名空间 using Newtonsoft.Json; 序列化类或者类的集合 string jsonData1 = JsonConvert.SerializeObject(p1);//序列化类 s ...

  6. 【译】x86程序员手册11- 4.1系统寄存器

    4.1 Systems Registers 系统寄存器 The registers designed for use by systems programmers fall into these cl ...

  7. python发送文本邮件

    #!/usr/bin/env python #coding=utf-8 #Author: Ca0Gu0 import time import smtplib from email.mime.text ...

  8. 安装hiredis后swoole扩展消失

    php -m报错: PHP Warning: PHP Startup: Unable to load dynamic library 'swoole' (tried: /home/work/study ...

  9. Chromium CEF 2623 -- 支持 xp 的最后一个版本源码下载和编译步骤

    背景 因为项目需要在客户端中内嵌浏览器,需要支持 xp 操作系统和播放视频,但 CEF 2623 以后的版本已经不支持 xp 操作系统,也不再提供 2623 版本的二进制发布包下载,只好自己手动编译. ...

  10. 20180429NOIP提高组精英班Day1测试