Cypress - 测试报告

Cypress - 生成测试报告

Cypress 基于 Mocha 构建，支持多种兼容 Mocha 的报告生成器（reporter）。这使得生成适合本地分析或 CI/CD 集成的各种格式的报告变得非常灵活。此外，Cypress 还提供了功能强大的 Dashboard 服务，用于丰富的报告和分析。

Mochawesome 报告生成器

Mochawesome 是一种流行的报告生成器，它可以生成独立的 HTML/CSS 报告，提供测试运行的直观概览。

安装

要使用 Mochawesome，您需要安装几个软件包（packages）：

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

这些软件包提供了 Mocha（Cypress 使用的测试框架）、Mochawesome（核心报告生成器）、mochawesome-merge（用于合并来自多个 spec 文件 的报告），以及 mochawesome-report-generator（用于从合并的 JSON 生成最终的 HTML 报告）。

在 cypress.config.js 中配置

在您的 cypress.config.js 中配置 Cypress 使用 Mochawesome：

// cypress.config.js
const { defineConfig } = require('cypress');

module.exports = defineConfig({
  reporter: 'mochawesome',
  reporterOptions: {
    reportDir: 'cypress/reports/mochawesome',
    overwrite: false,
    html: false, // Generate HTML report via mochawesome-report-generator later
    json: true   // Essential for merging and generating the final report
  },
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

关键的 reporterOptions 配置项：

• reportDir：指定保存 JSON 输出文件的目录。
• overwrite：如果为 false，新报告不会覆盖旧报告（当文件具有唯一名称时很有用，否则请设置为 true）。
• html：设置为 false，因为我们将在合并后生成最终的 HTML 报告。
• json：设置为 true，为每个 spec 生成独立的 JSON 文件。

生成报告

1. 运行您的 Cypress 测试（这将生成独立的 JSON 文件）：

npx cypress run

运行特定的 spec 文件：

npx cypress run --spec "cypress/e2e/my_spec.cy.js"

2. 运行后，合并生成的 JSON 文件（如果运行了多个 spec）并创建 HTML 报告。将以下脚本添加到您的 package.json 中：

"scripts": {
  "cy:run": "cypress run",
  "combine:reports": "mochawesome-merge cypress/reports/mochawesome/*.json > cypress/reports/mochawesome.json",
  "generate:report": "marge cypress/reports/mochawesome.json -f report -o cypress/reports"
}

然后运行它们：

npm run combine:reports
npm run generate:report

这将在 cypress/reports 目录下创建一个 report.html 文件（或类似名称的文件）。在浏览器中打开此文件将显示详细的报告，包含测试状态、持续时间和步骤（如果配置了）。

报告通常包括通过（passed）、失败（failed）、待处理（pending）和跳过（skipped）的测试部分，以及执行时间，失败测试还可能包含截图（screenshots）。

JUnit 报告生成器

JUnit XML 报告被 CI/CD 系统（如 Jenkins、GitLab CI）广泛用于显示测试结果。

安装

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

在 cypress.config.js 中配置

// cypress.config.js
const { defineConfig } = require('cypress');

module.exports = defineConfig({
  reporter: 'cypress-multi-reporters',
  reporterOptions: {
    reporterEnabled: 'mocha-junit-reporter',
    mochaJunitReporterReporterOptions: {
      mochaFile: 'cypress/reports/junit/results-[hash].xml',
      toConsole: true
    }
  },
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

在 mochaFile 中使用 [hash] 可以确保为每个 spec 生成唯一的 XML 文件，防止覆盖。

生成报告

照常运行您的测试：

npx cypress run

这将在 cypress/reports/junit/ 目录下生成 XML 文件。

Cypress Dashboard

Cypress Dashboard 是 Cypress 提供的一款 SaaS 产品，它提供了高级报告、分析、并行化以及与源代码控制的集成。在团队或 CI 环境中，它是充分利用 Cypress 测试报告的最佳方式。

要使用它：

• 在 Cypress Dashboard (dashboard.cypress.io) 中设置一个项目。
• 获取您的项目 ID 和 记录密钥（record key）。
• 使用 --record 标志和您的密钥运行 Cypress：

npx cypress run --record --key YOUR_RECORD_KEY

Dashboard 提供了丰富的测试运行可视化、失败分析、视频录制、截图和历史数据，显著提升了调试和监控体验。

还存在许多其他报告生成器，例如用于 TeamCity 集成的 cypress-teamcity-reporter。选择取决于您的项目需求和 CI/CD 设置。