大家好。 今天，我将向您展示如何通过在Cypress.io上运行测试来生成漂亮的测试报告。 您可能已经知道Cypress是建立在Mocha之上的，所以Mocha的大多数功能都可以与Cypress一起使用，即Mocha的bdd语法，挂钩甚至报告模块。

默认情况下，Mocha提供了许多报告者（超过9个报告者），您可以选择其中一个（或多个）作为自己的测试报告。 在Cypress.io上配置Mocha的报告程序非常简单，只需在cypress.json文件中设置报告程序参数的值即可。

首先，让我向您展示一些内置的Mocha记者，以及如何与Cypress.io一起使用

1.规格

Spec记者是Mocha的默认记者。 因此，如果您未在项目中配置任何报告器，则将其视为测试报告。 规格报告器在TTY上以ANSI颜色显示测试结果，如下所示

要在Cypress.io上配置规格报告器，请将报告器参数配置为spec

{ "reporter": "spec"}

2.点矩阵

如果您想在运行测试时看到一些进展，可以选择这一步。 点矩阵记者是一系列点。 代表运行测试进度的字符。 测试失败会以红色感叹号突出显示！ ，待定或跳过的测试以蓝色逗号突出显示，

要在赛普拉斯上配置点矩阵报告器，请将报告器参数指定为点

{
  "reporter": "dot"
}

3.Nyan尼安

您可以选择更多内置的Mocha记者。 请在此页面上找到更多信息https://mochajs.org/#reporters

让我们用Mochawesome创建一个漂亮的Mocha Reporter

Mochawesome是自定义的Mocha报告程序，可生成脱机HTML / CSS报告以可视化您的测试结果。 它分步显示您的测试用例和失败测试的堆栈跟踪。 此外，它支持将您自己的自定义上下文添加到报告中。 这意味着您可以将屏幕快照添加到失败的测试示例中。 就像它的名字一样很棒

步骤1：安装Mochawesome

sh$ yarn add mocha@5.2.0 mochawesome mochawesome-merge

· mocha用作创建自定义报告程序的依赖库。

· mochawesome生成HTML格式的精美报告。

· mochawesome-merge自Cypress v3.0.0起，它分别运行每个规范，从而导致生成多个mochawesome报告（每个规范文件一个）。因此，我们必须使用该库合并所有报告，然后将其生成为一个HTML文件。

步骤2：将Mochawesome配置为Cypress Reporter

{
  "reporter": "mochawesome",
  "reporterOptions": {
      "reportDir": "cypress/report/mochawesome-report",
      "overwrite": false,
      "html": false,
      "json": true,
      "timestamp": "mmddyyyy_HHMMss"
   }
}

将报告程序配置为mochawesome，还可以为报告程序添加一些选项。 ReporterOptions参数取决于您指定的报告者。 这是Mochawesome记者的一些选项。

· 覆盖：覆盖现有的报告文件。 在这种情况下，由于赛普拉斯分别运行每个测试规范文件，因此我必须将此参数设置为false以避免替换现有的报告文件。

· html：在测试（规范）运行后生成html报告。 我计划在所有规格文件完成后生成一个HTML报告。 所以我将此参数设置为false

· json：在测试（规范）运行后生成JSON报告。 是的，我想要这样做是因为我希望这些文件（每个规格一个）将所有测试合并到一个HTML报告中。 所以我将此参数设置为true

您可以在这里找到更多有关摩卡车记者的选项

3.创建自己的赛普拉斯定制测试运行器

通常，对于任何简单的用例，您都可以使用cypress命令在Cypress上运行测试。 但是在这种情况下，我想在所有测试运行之前和之后做一些事情。 因此，我必须使用赛普拉斯模块API创建自己的自定义测试运行器

为自定义测试运行程序安装依赖项

sh$ yarn add yargs ls rimraf

· yargs：从命令行选项解析参数。 这是可选的。

· ls：列出所有现有的报告文件。

· rimraf：在测试运行之前删除所有现有的报告文件。

const cypress = require('cypress')
const yargs = require('yargs')
const { merge } = require('mochawesome-merge')
const marge = require('mochawesome-report-generator')
const rm = require('rimraf')
const cypressConfig = require('./cypress')
const ls = require('ls')
const argv = yargs.options({
    'browser': {
        alias: 'b',
        describe: 'choose browser that you wanna run tests on',
        default: 'chrome',
        choices: ['chrome', 'electron']
    },
    'spec': {
        alias: 's',
        describe: 'run test with specific spec file',
        default: 'cypress/integration/*.spec.js'
    }
}).help()
  .argv

const reportDir = cypressConfig.reporterOptions.reportDir
const reportFiles = `${reportDir}/*.json`
// list all of existing report files
ls(reportFiles, { recurse: true }, file => console.log(`removing ${file.full}`))

// delete all existing report files
rm(reportFiles, (error) => {
    if (error) {
        console.error(`Error while removing existing report files: ${error}`)
        process.exit(1)
    }
    console.log('Removing all existing report files successfully!')
})

cypress.run({
    browser: argv.browser,
    spec: argv.spec
}).then((results) => {
    const reporterOptions = {
        reportDir: results.config.reporterOptions.reportDir,
    }
    generateReport(reporterOptions)
}).catch((error) => {
    console.error('errors: ', error)
    process.exit(1)
})

function generateReport(options) {
    return merge(options).then((report) => {
        marge.create(report, options)
    })
}

sh$ node cypress_runner -b chrome

知道了！ 这是Mochawesome HTML报告。 您可以查看测试用例的详细信息，例如 测试代码，测试执行时间（针对每个测试和所有测试）以及左侧的"测试过滤"菜单。 它太酷了。

4.将屏幕截图附加到测试失败的报告中

就像我之前提到的，您可以将自己的自定义上下文添加到Mochawesome报告程序中。因此，我将失败测试的屏幕截图附加到我的报告中。实际上，当在测试运行期间发生故障时，Cypress会自动捕获屏幕截图。因此，我只是将屏幕快照文件添加到报告中，仅此而已。我收听测试：after：运行事件，以通过Cypress支持文件在发生故障时将屏幕快照附加到报告中

const addContext = require('mochawesome/addContext')

Cypress.on('test:after:run', (test, runnable) => {
    if (test.state === 'failed') {
        const screenshotFileName = `${runnable.parent.title} -- ${test.title} (failed).png`
        addContext({ test }, `assets/${Cypress.spec.name}/${screenshotFileName}`)
    }
})

addContext是Mochawesome提供的一个对象，它允许您向报表添加任何自定义上下文。 不仅是屏幕截图文件，还包括您想要的任何东西，例如String，Object等。您可以在此处阅读有关此API的更多详细信息。

然后，我更新cypress.json中的screenshotFolder参数，以将我的屏幕截图放置到Mochawesome资产目录中。 我想确保我的测试报告可以正确引用屏幕快照文件。

我创建了一个新的测试用例，它总是在运行时失败。 之后，我再次运行测试。

最后，生成的测试报告如下所示。

呜呼。 屏幕截图附在报告中！ 您可以在此处查看我的完整测试报告。

最后，您可以将此技术应用于您的持续集成系统。 它可以帮助您以精美的格式可视化测试结果。 您的团队成员可以清楚地阅读和理解测试报告。 希望本文对您的工作有所帮助。 测试愉快！

感谢这些酷的lib：https://github.com/adamgruber/mochawesome，https://github.com/Antontelesh/mochawesome-merge

(本文翻译自Traitanit Huangsri的文章《Generate a Beautiful Test Report from running Tests on Cypress.io》，参考：https://medium.com/cypress-io-thailand/generate-a-beautiful-test-report-from-running-tests-on-cypress-io-371c00d7865a)