Skip to main content
Cypress应用

Cypress 中的报告器

info
你将学到​
  • 如何在 Cypress 中使用自定义报告器
  • 如何使用多个报告器
  • 如何跨测试文件合并报告

简介​

在 Cypress 中编写并运行测试后，查看测试结果至关重要。 Cypress 提供了多种方式来查看测试运行结果。

  • Cypress Cloud - 在 Cypress Cloud 中查看测试结果、测试数据、错误、截图、视频和测试回放。
  • Cypress App 的开源内置及自定义报告器。

本文档介绍如何在 Cypress App 中使用内置报告器和自定义报告器。

tip

要开始使用Cypress Cloud， 注册即可享受2周免费试用 - 包含所有 Cypress Cloud高级功能以及充足的测试结果， 让您体验Cypress Cloud的强大功能！

内置报告器​

由于 Cypress 基于 Mocha 构建，因此任何为 Mocha 构建的报告器都可以与 Cypress 一起使用。以下是 Mocha 的内置报告器列表。

默认情况下，Cypress 使用 spec 报告器将信息输出到 STDOUT。

我们还添加了两个最常用的 Mocha 第三方报告器。这些报告器已内置到 Cypress 中，无需安装即可使用。

自定义报告器​

Cypress 支持创建自定义报告器或使用任何类型的第三方报告器。

本地安装​

你可以通过相对或绝对路径加载自定义 Mocha 报告器。这些可以在 Cypress 配置文件或通过命令行指定。

例如，如果你有以下目录结构：

> my-project
  > cypress
  > src
  > reporters
    - custom.js

你可以通过以下任一方式指定自定义报告器的路径。

Cypress 配置​

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  reporter: 'reporters/custom.js',
})

命令行​

npx cypress run --reporter reporters/custom.js

通过 npm 安装​

当通过 npm 使用自定义报告器时，请指定包名。

Cypress 配置​

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  reporter: 'mochawesome',
})

命令行​

npx cypress run --reporter mochawesome

报告器选项​

某些报告器接受自定义行为的选项。这些可以在 Cypress 配置或通过命令行选项指定。

报告器选项因报告器而异（可能根本不支持）。请参阅你使用的报告器文档以了解支持的选项。

以下配置将 JUnit 报告输出到 STDOUT 并保存为 XML 文件。

Cypress 配置​

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  reporter: 'junit',
  reporterOptions: {
    mochaFile: 'results/my-test-output.xml',
    toConsole: true,
  },
})

命令行​

npx cypress run --reporter junit \
  --reporter-options "mochaFile=results/my-test-output.xml,toConsole=true"

跨测试文件合并报告​

每个测试文件在每次 cypress run 执行期间都是完全独立处理的。因此，每个测试运行都会_覆盖_之前的报告文件。要为每个测试文件保留唯一的报告，请在 mochaFile 文件名中使用 [hash]。

以下配置将在 results 文件夹中创建单独的 XML 文件。然后，你可以使用第三方工具合并报告输出。例如，对于 Mochawesome 报告器，可以使用 mochawesome-merge 工具。

Cypress 配置​

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  reporter: 'junit',
  reporterOptions: {
    mochaFile: 'results/my-test-output-[hash].xml',
  },
})

命令行​

npx cypress run --reporter junit \
  --reporter-options "mochaFile=results/my-test-output-[hash].xml"

多个报告器​

我们经常看到用户希望使用多个报告器。在 CI 中运行时，你可能希望生成 junit 报告和 json 报告。这很好，但设置此报告器后，你将无法在测试运行时获得任何额外反馈！

解决方案是使用多个报告器。你将同时获得两者的好处。

我们建议使用 npm 模块 cypress-multi-reporters。

示例​

将 spec 输出到 STDOUT，保存 JUnit XML 文件​

我们希望将 spec 报告输出到 STDOUT，同时为每个测试文件保存一个 JUnit XML 文件。

我们需要安装额外的依赖项：

npm install cypress-multi-reporters mocha-junit-reporter --save-dev

在 Cypress 配置或通过命令行中指定你的报告器和报告器选项。

Cypress 配置​

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  reporter: 'cypress-multi-reporters',
  reporterOptions: {
    configFile: 'reporter-config.json',
  },
})

命令行​

npx cypress run --reporter cypress-multi-reporters \
  --reporter-options configFile=reporter-config.json

然后添加单独的 reporter-config.json 文件（在配置中定义）以启用 spec 和 junit 报告器，并指示 junit 报告器保存单独的 XML 文件。

reporter-config.json
{
  "reporterEnabled": "spec, mocha-junit-reporter",
  "mochaJunitReporterReporterOptions": {
    "mochaFile": "cypress/results/results-[hash].xml"
  }
}

我们建议在运行此命令之前删除 cypress/results 文件夹中的所有文件，因为每次运行都会输出新的 XML 文件。例如，你可以将以下 npm 脚本命令添加到 package.json 中，然后调用 npm run report。

package.json
{
  "scripts": {
    "delete:reports": "rm cypress/results/* || true",
    "prereport": "npm run delete:reports",
    "report": "cypress run --reporter cypress-multi-reporters --reporter-options configFile=reporter-config.json"
  }
}

如果你想将生成的 XML 文件合并为一个文件，可以添加 junit-report-merger。例如，要将所有文件合并为 cypress/results/combined-report.xml，可以添加 combine:reports 脚本。

package.json
{
  "scripts": {
    "delete:reports": "rm cypress/results/* || true",
    "combine:reports": "jrm cypress/results/combined-report.xml \"cypress/results/*.xml\"",
    "prereport": "npm run delete:reports",
    "report": "cypress run --reporter cypress-multi-reporters --reporter-options configFile=reporter-config.json",
    "postreport": "npm run combine:reports"
  }
}

将 spec 输出到 STDOUT，生成合并的 Mochawesome JSON 文件​

此示例显示在 https://github.com/cypress-io/cypress-example-circleci-orb 的 spec-and-single-mochawesome-json 分支中。我们希望将 "spec" 报告输出到 STDOUT，为每个测试文件保存一个单独的 Mochawesome JSON 文件，然后将所有 JSON 报告合并为一个报告。

我们需要安装一些额外的依赖项。

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

我们需要在 Cypress 配置 中配置报告器，以跳过 HTML 报告生成，并将每个单独的 JSON 文件保存在 cypress/results 文件夹中。

Cypress 配置​

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  reporter: 'mochawesome',
  reporterOptions: {
    reportDir: 'cypress/results',
    overwrite: false,
    html: false,
    json: true,
  },
})

命令行​

npx cypress run --reporter mochawesome \
  --reporter-options reportDir="cypress/results",overwrite=false,html=false,json=true

我们的运行将生成文件 cypress/results/mochawesome.json, cypress/results/mochawesome_001.json, ...。然后我们可以使用 mochawesome-merge 工具合并它们。

npx mochawesome-merge "cypress/results/*.json" > mochawesome.json

现在，我们可以使用 https://github.com/adamgruber/mochawesome-report-generator 从 mochawesome.json 文件生成一个合并的 HTML 报告：

npx marge mochawesome.json

它会生成如下所示的漂亮独立 HTML 报告文件 mochawesome-report/mochawesome.html。如你所见，所有测试结果、时间信息甚至测试体都包含在内。

Mochawesome HTML 报告

更多信息，请参阅 将 Mochawesome 报告器与 Cypress 集成

历史​

版本变更
4.4.2自定义 Mocha 报告器更新为使用 Cypress 捆绑的 Mocha 版本。无需单独安装 mocha 即可使用自定义报告器。

目录