这篇将介绍 Cypress 如何生成测试报告

Cypress 可以生成 XML 和 JSON 的测试报告文件，需要我们再生成可视化的报告

在这里就介绍一下简单且好看的测试报告 mochawesome

现在让我们来安装它吧

```
npm install --save-dev mocha mochawesome mochawesome-merge mochawesome-report-generator
```

接下里让我们做一下配置，我们在 cypress.json 配置报告生成器

reportDir： 配置生成的 测试结果 JSON 文件目录

overwrite：是否覆盖

HTML： 是否生成 HTML，这里我们不生成，我们要生成更好看的

配置完成！

然后我们如何使用呢？

这里我们使用脚本方式来调用它

我们现在 package.json 中的 scripts 中添加 调用外部 js 脚本

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

```
//引入本地模块
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()
```

值得注意的是，在这里我遇到了一个巨大无比的深坑，困扰了我很久。

那就是在 merge 方法中 4.0.3 版本后需要指定 JSON 文件的目录，这里需要与 cypress.json 中配置生成目录相同。否则会报找不到 JSON 文件。

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

```
npm run cy:run
```

这个时候就会在项目目录下生成一个目录

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

好吧，也不是特别好看哈哈，但是挺简洁明了的不是吗？

至此，我们完成了如何生成测试报告，还有很多功能还待挖掘使用，感兴趣的同学们可以自行探索哦，这几篇文章简单粗略，抛砖引玉，希望能对需要的人有所帮助。