背景：在测试页面的时候，经常会遇到css变更或者某个组件有变更，但是下意识的只会在乎当前页面是否符合整体产品使用而不会去对比曾经的版本，甚至根本不会回归。所以诞生了Visual Testing，该测试方法能够帮助回归测试（当然，这里的回归肯定只包含老旧区）。
我所使用的视觉测试是集成在cypress上的，所以视觉测试也是一种辅助E2E的测试方法。
一：首先，需要安装视觉测试包
直接 npm install --save-dev cypress-image-snapshot，安装完成后会在package.json中看到包名以及版本。
二：在[root]/plugins/index.js中加包并定义方法
const {
addMatchImageSnapshotPlugin,
} =require('cypress-image-snapshot/plugin');
导出全局方法名
module.exports = (on, config) => {
addMatchImageSnapshotPlugin(on, config);
}
三：在[root]/support/commamd.js中引入方法
import {addMatchImageSnapshotCommand }from 'cypress-image-snapshot/command';
addMatchImageSnapshotCommand({
failureThreshold:0.03,
customDiffConfig: {threshold:0.1 },
failureThresholdType:'percent',
capture:'viewport'
});
四：最后就可以在用例中使用该方法了
以下是官方所提供的使用方法，在用例的方法中添加配置，会覆盖全局配置。
// addMatchImageSnapshotPlugin
addMatchImageSnapshotPlugin(on,config);
//addMatchImageSnapshotCommand
addMatchImageSnapshotCommand();
addMatchImageSnapshotCommand(commandName);
addMatchImageSnapshotCommand(options);
addMatchImageSnapshotCommand(commandName,options);
//matchImageSnapshot.matchImageSnapshot();
.matchImageSnapshot(name);
.matchImageSnapshot(options);
.matchImageSnapshot(name,options);
// ---or---cy.matchImageSnapshot();
cy.matchImageSnapshot(name);
cy.matchImageSnapshot(options);
cy.matchImageSnapshot(name,options);
该方法官方推荐是使用在断言之后。
五：第一次运行该代码，会在cypress/snopshot/${spec.name}中生成一个baseImage
六：再次运行该代码，如果两次截图不一致，会在cypress/snopshot/${cypress.spec.name}/__diff_output__中生成一个diffImage。
下图就是diff图，左边为baseImage，右边为本次运行时截图。中间就是diff图片。
七：参数
Updating snapshots
Run Cypress with --env updateSnapshots=true in order to update the base image files for all of your tests.
Preventing failures
Run Cypress with --env failOnSnapshotDiff=false in order to prevent test failures when an image diff does not pass.
八：diffImage加入报告
这个也是琢磨了很久才搞出来的办法，肯定不是最优的，但这是我当前能想到的办法了。。
方法还是跟上一篇文章一样，需要使用到addContext方法并且配合pipeline归档使用。但是这个diffimages的相对路径还有一点不一样，不知道则呢么去获取，只能通过捕获到错误消息去替换路径获得diff图片的相对路径。如果有更好的办法，可以评论一下哦。
在[root]/support/index.js中加入全局方法。
Cypress.on('test:after:run', (test, runnable) => {
if (test.state ==='failed') {
// Build image path
if(test.err.message.includes('See diff')) {
// If the test failed due to cypress-image-snapshot the message will always be the same and the plugin gives you in the message the url of the path
const linuxDiffImages = test.err.parsedStack[1].message.replace('See diff for details: ', '').split("/").slice(-5).join("/");
const diffImages = test.err.parsedStack[1].message.replace('See diff for details: ', '').split("/").slice(-6).join("/");
if(navigator.userAgent.indexOf("Linux")>0){
addContext({test}, {
title:'diffImage',
value:`${Cypress.env("jobUrl")}` +"lastSuccessfulBuild/artifact/" + `${linuxDiffImages}`
});
}else {
addContext({test}, {
title:'diffImage',
value:`/${diffImages}`
});
}
}
}
});
pipeline
使用pipeline归档这个diff图片的时候，遇到了一个问题。
（先交代下背景：cypress/snapshots/${cypress.spec.name}文件夹中存在baseImage，所以我不会去删除snapshots文件夹）
所以在开始归档前，我使用了fileExists去判断__diff_output__文件夹是否存在，但是该文件夹又是存在于${cypress.spec.name}中的，所以就要写成
if(fileExists('cypress/snapshots/**/__diff_output_') == true){
`````code`````
}
但是fileExists不支持通配符，只能指定死文件夹（**代表无论这里有多少层，*代表仅一层）。所以fileExists方法就不可用，只能换成findFiles方法。该方法会返回一个list，所以我这里通过判断这个list的长度来确定是否存在diff图片，如果存在的话，则归档所有的.diff.png图片
// fileExists不支持通配符
script{
def files=findFiles excludes:'',glob:'cypress/snapshots/**/*.diff.png'
echo"${files}"
if("${files.size()}" != "0"){
echo"---------------存在diff失败用例截图，开始归档---------------"
archiveArtifactsartifacts:'cypress/snapshots/**/*.diff.png'
}
}
报告
生成了测试报告后，就可以在用例步骤里看到diffImage图片了
