cypress测试脚本_Cypress 小试牛刀-测试报告（四）

Cypress 小试牛刀-测试报告(四)

这篇将介绍 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 文件吧，一睹测试报告的神秘芳容！哈

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

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