[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
[E2E] Visual Differing Tests with Puppeteer and PixelMatch的更多相关文章
- ant design pro (十二)advanced UI 测试
一.概述 原文地址:https://pro.ant.design/docs/ui-test-cn UI 测试是项目研发流程中的重要一环,有效的测试用例可以梳理业务需求,保证研发的质量和进度,让工程师可 ...
- Vue Study [1]: Vue Setup
Description The article for vue.js Setup. Original post link:https://www.cnblogs.com/markjiang7m2/p/ ...
- vue-cli 第一章
一.安装 Node.Python.Git.Ruby 这些都不讲解了 二.安装 Vue-Cli # 最新稳定版本 # 全局安装 npm install --global vue-cli # 创 ...
- vue单页面模板说明文档(1)
Introduction This boilerplate is targeted towards large, serious projects and assumes you are somewh ...
- Vue 系列之 基础入门
背景叙述 渐进式 JavaScript 框架 易用:已经会了 HTML.CSS.JavaScript?即刻阅读指南开始构建应用! 灵活:不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩. 高 ...
- 搭建VueMint-ui框架
搭建VueMint-ui框架 2018年01月07日 22:29:58 阅读数:2660 vueweb vue project 检查项目环境 一.检查是否安装node.js # 检查node版本 $ ...
- Vue 全家桶 + Electron 开发的一个跨三端的应用
代码地址如下:http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...
- Vue Study [2]: Vue Router
Description The article for vue router. Original post link:https://www.cnblogs.com/markjiang7m2/p/10 ...
- vue - 前置工作 - 目录功能介绍
一个DEMOS的完整目录(由于GWF问题,我就不一一打开网站一个个去搜索并且解释了)可以去关注:https://www.cnblogs.com/ye-hcj build build.js(本文来自ht ...
随机推荐
- 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 ...
- 点开瞅瞅,再来几道Python面试题吧,Python面试题No20
本面试题题库,由公号:非本科程序员 整理发布 第1题:如何理解 Django 被称为 MTV 模式? 这个题就是面向对象设计和设计模式的开始. 你可能比较熟悉的模式叫做: MVC.说是 Model V ...
- WPF PasswordBox MVVM 实现
由于PasswordBox.Password属性非依赖属性,所以不能作为绑定的目标,以下是本人的MVVM实现方法. PasswordBox.Password与TextBox.Text同步,TextBo ...
- UE4源码版食用要记
UE4源码版和预编译版不能共享工程,这和插件版是一样的. 一般来说我都是在VS中生成编辑器,于编辑器中添加新类,VS中编辑代码. 编译引擎的时候编译配置使用的是devepolmenteditor.开发 ...
- Json——一般应用
引用命名空间 using Newtonsoft.Json; 序列化类或者类的集合 string jsonData1 = JsonConvert.SerializeObject(p1);//序列化类 s ...
- 【译】x86程序员手册11- 4.1系统寄存器
4.1 Systems Registers 系统寄存器 The registers designed for use by systems programmers fall into these cl ...
- python发送文本邮件
#!/usr/bin/env python #coding=utf-8 #Author: Ca0Gu0 import time import smtplib from email.mime.text ...
- 安装hiredis后swoole扩展消失
php -m报错: PHP Warning: PHP Startup: Unable to load dynamic library 'swoole' (tried: /home/work/study ...
- Chromium CEF 2623 -- 支持 xp 的最后一个版本源码下载和编译步骤
背景 因为项目需要在客户端中内嵌浏览器,需要支持 xp 操作系统和播放视频,但 CEF 2623 以后的版本已经不支持 xp 操作系统,也不再提供 2623 版本的二进制发布包下载,只好自己手动编译. ...
- 20180429NOIP提高组精英班Day1测试