[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 ...
随机推荐
- Git 迁库 标签
Git迁库 (一)克隆裸库 git clone --bare https://github.com/SunArmy/Tourist.git 克隆之后进入该目录下是这样的 (二)创建新的版本库 这里我已 ...
- Ubuntu下搭建repo服务器(三): 搭建Android repo服务器
1. 配置repo 1.1 下载git-repo.git(B端) mkdir -p ~/gitCfg cd ~/gitCfg git clone https://gerrit.googlesourc ...
- SSH Secure Shell Client连接centos6.5时中文字乱码处理
在学习Linux的过程中,最先碰到的是通过SSH终端连接时发现有乱码出现,使用这篇文章先从这里说起. 在 ssh , telnet 终端中文显示乱码解决办法#vim /etc/sysconfig/i1 ...
- JS高级——eval
eval函数可以用来将字符串转换成JavaScript代码并且运行 <script> eval('var a=10'); console.log(a);//10 </script&g ...
- html5——边框
精确控制 /*水平半径 垂直半径;*/ border-top-left-radius: 30px 40px; border-top-right-radius: 30px 40px; border-bo ...
- [Windows Server 2008] 安装IIS7.5及FTP
★ 欢迎来到[护卫神·V课堂],网站地址:http://v.huweishen.com★ 护卫神·V课堂 是护卫神旗下专业提供服务器教学视频的网站,每周更新视频.★ 本节我们将带领大家:安装IISII ...
- AcRxClass::addX
AcRxClass::addX函数 virtual AcRxObject * addX( AcRxClass* pProtocolClass, AcRxObject* pProtocolObject) ...
- jdbcUrl is required with driverClassName错误解决
jdbcUrl is required with driverClassName springboot2.0配置多数据源: spring.datasource.primary.url=jdbc:mys ...
- Eclipse 使用前的配置
一,修改eclipse对jdk的依赖项 1.查看设置的编译器编译版本:设置成本地jdk一致的版本 点击窗口->首选项 找到java 选择编辑器,查看现在的编译jdk版本 改成本地jdk版本 jd ...
- Android之手机振动和振铃
一.振动的实现1.使用振动所需的权限 <uses-permission android:name="android.permission.VIBRATE" />2.相关 ...