当前,我正在尝试在javascript中设置UI测试。我使用了诸如摩卡咖啡和木偶戏等几种工具。我的测试是产品两个版本之间的图像比较。因此,我有一个screenshot.js脚本(可以在每个页面上为我截屏)和另一个compare.js脚本(可以将两个版本的图像与我进行比较),如果存在差异,则会创建一个图像,以显示两个图像的差异,比较。
能够针对图像之间的差异执行测试报告。我找到了一种摩卡(mocha)超赞的工具,可以制作测试报告,但我认为我配置错误。
compare.js
let fs = require("fs"),
PNG = require("pngjs").PNG,
pixelmatch = require("pixelmatch");
let assert = require("chai").assert;
let expect = require("chai").expect;
const rimraf = require("rimraf");
const path = require("path");
const mkdirp = require("mkdirp");
const config = require("./config.json").compare;
const versions = require("./config.json").version;
let imgFolder = path.join(__dirname, config.image);
const folderCurrent = path.join(imgFolder, versions.current);
const folderOld = path.join(imgFolder, versions.old);
const diffFolder = path.join(imgFolder, config.diff);
const dirFolder = path.join(diffFolder, "*");
mkdirp(diffFolder);
rimraf.sync(dirFolder);
describe("Compare images", function() {
let files = fs.readdirSync(folderCurrent);
files.forEach(value => {
it(`Image: ${value}`, async () => {
return compareScreenshots(value);
});
});
});
function compareScreenshots(file) {
return new Promise((resolve, reject) => {
const img1 = fs
.createReadStream(path.join(folderCurrent, file))
.pipe(new PNG())
.on("parsed", doneReading);
const img2 = fs
.createReadStream(path.join(folderOld, file))
.pipe(new PNG())
.on("parsed", doneReading);
let filesRead = 0;
function doneReading() {
if (++filesRead < 2) return;
// The files should be the same size.
expect(img1.width, "image widths are the same").equal(img2.width);
expect(img1.height, "image heights are the same").equal(img2.height);
const diff = new PNG({ width: img1.width, height: img1.height });
const mismatch = pixelmatch(
img1.data,
img2.data,
diff.data,
img1.width,
img1.height,
{
threshold: 0.05
}
);
if (mismatch !== 0) {
diff
.pack()
.pipe(
fs.createWriteStream(
path.join(diffFolder, "diff-" + path.basename(file))
)
);
}
// The files should look the same.
expect(mismatch, "number of different pixels").equal(0);
resolve();
}
});
}
server.js
const express = require('express');
const app = express();
const path = require('path');
const port = 9988;
app.use(express.static(__dirname +'/mochawesome-report'));
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname+"/mochawesome-report"+"/mochawesome.html"));
});
app.listen(port, () => console.log(`Test Report shows on port ${port}`));
我想问您关于如何修改我的代码或配置以首先创建测试报告的建议。您认为有可能吗?