Cypress集成Mochawesome报告仅显示测试通过状态无执行步骤如何配置？

1. 安装必要依赖 #

首先安装适配包，支持自动捕获Cypress执行日志：

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

2. 配置插件层（全项目生效） #

根据你使用的Cypress版本选择对应配置：

Cypress 10及以上版本（使用cypress.config.js管理配置） #

配置示例如下：

const { defineConfig } = require('cypress')
const { addCypressMochawesomeReporterPlugin } = require('cypress-mochawesome-reporter/plugin')

module.exports = defineConfig({
  reporter: 'cypress-mochawesome-reporter',
  reporterOptions: {
    // 开启展示所有Cypress执行命令
    showCommandLog: true,
    // 展示断言完整信息
    showAssertions: true,
    // 测试失败时自动嵌入截图到报告
    embeddedScreenshots: true,
    // 报告输出目录
    reportDir: 'cypress/reports',
    // 自动覆盖旧报告
    overwrite: true,
    // 生成单文件HTML报告
    html: true,
    json: false
  },
  e2e: {
    setupNodeEvents(on, config) {
      addCypressMochawesomeReporterPlugin(on)
      return config
    },
  },
})

Cypress 9及以下旧版本（使用plugins/index.js管理插件） #

在cypress/plugins/index.js中添加插件注册逻辑：

const mochawesomePlugin = require('cypress-mochawesome-reporter/plugin')
module.exports = (on, config) => {
  mochawesomePlugin(on)
  // 原有其他插件配置保留即可
  return config
}

同时在cypress.json中添加报告配置：

{
  "reporter": "cypress-mochawesome-reporter",
  "reporterOptions": {
    "showCommandLog": true,
    "showAssertions": true,
    "embeddedScreenshots": true,
    "reportDir": "cypress/reports"
  }
}

3. 配置全局支持文件（自动捕获所有执行动作） #

在全局支持文件顶部引入注册代码，即可全项目生效，自动捕获所有click、type、submit、断言等操作的执行状态：

• Cypress 10+版本：修改cypress/support/e2e.js
• 旧版本：修改cypress/support/index.js

import 'cypress-mochawesome-reporter/register'

可选：自定义过滤不需要展示的命令 #

如果需要隐藏部分不相关的命令（比如XHR请求日志），可以在上述导入语句后添加配置：

Cypress.MochawesomeReporter.options.ignoreCommands = ['request', 'intercept']

4. 生成报告 #

正常执行Cypress测试命令即可生成符合预期的报告，比如无头模式运行：
npx cypress run
运行完成后打开报告目录下的HTML文件，就能看到所有执行步骤的明细，操作成功/失败状态、断言信息都会对应展示，和Cypress open界面的执行日志一致。

内容的提问来源于stack exchange，提问作者ArrchanaMohan