cypress一键生成测试报告

前言

学习cypress后，生成的测试报告不如人意，步骤繁琐且不美观，面向度娘找方法，终于终于找到一个不错的方法。

一键生成测试报告

Cypress 可以生成 XML 和 JSON 的测试报告文件，需要我们再生成可视化的报告
在这里就介绍一下简单且好看的测试报告 mochawesome

现在让我们来安装它吧
npm install --save-dev mocha mochawesome mochawesome-merge mochawesome-report-generator

接下里让我们做一下配置，我们在 cypress.json 配置报告生成器
reportDir： 配置生成的 测试结果 JSON 文件目录
overwrite：是否覆盖
HTML： 是否生成 HTML，这里我们不生成，我们要生成更好看的

image.png

配置完成！
然后我们如何使用呢？
这里我们使用脚本方式来调用它
我们现在 package.json 中的 scripts 中添加 调用外部 js 脚本

image.png

接下来我们在项目同级目录新建一个目录 scripts 进入该目录新建一个 cypress.js 文件

image.png

//引入本地模块
const cypress = require('cypress');
const fse = require('fs-extra');
const { merge } = require('mochawesome-merge');
const generator = require('mochawesome-report-generator');

async function runTests() {
     await fse.remove("cypress/results");
     //移除之前生成的报告目录
    await fse.remove('mochawesome-report');
    const { totalFailed } = await cypress.run();
    const jsonReport = await merge({
        files:['./cypress/results/*.json']
    });
    await generator.create(jsonReport);
    process.exit(totalFailed)
}
runTests();

OK 最后让我们来启动测试，运行这个命令，cy：run 就是我们在 package.json 中的 scripts 中配置的 key。

npm run cy:run

等待脚本运行完成，这个时候就会在项目目录下生成一个目录

image.png

现在让我们打开 HTML 文件吧，一睹测试报告的神秘芳容！哈

image.png

参考：https://www.fewords.cn/article/124