将 Mochawesome Reporter 与 Cypress 结合使用

执行

Cypress 构建于 Mocha 之上，因此它继承了 Mocha 的 BDD 语法、钩子和 Mocha 报告。本文我们将讨论 Mocha 报告器。Mocha 提供了丰富的报告器供您选择。Mocha 内置的报告器包括 spec、dot matrix、nyan 和 json。这些报告器也都不错，但不如我们将在本文讨论的 Mochawesome 报告器出色。

Mochawesome 报告器是一款自定义报告器，可生成独立的 HTML/CSS 报告，帮助您直观地了解测试运行情况。它拥有简洁、干净且现代化的设计。报告具有筛选功能，可仅显示您需要的测试，并显示失败测试的堆栈跟踪。

Mochawesome Reporter 与 Cypress 集成的挑战
：从 Cypress v.3.0.0 开始，Cypress 会独立执行每个规范，因此每个规范都会生成单独的测试报告。这会带来问题，因为我们需要一份完整的测试报告（其中包含多个规范）。
解决方案：可以使用 mochawesome-merge 合并这些报告，然后为所有 Cypress 测试生成一份 HTML 报告。

我们将需要以下 npm 包，让我们看看它们各自起什么作用：

cypress-multi-reporters
在一次 mocha 执行中生成多个 mocha 报告。

mochawesome
Mochawesome 是一个自定义报告器，用于配合 JavaScript 测试框架 mocha 使用。它运行在 Node.js（>=8）上，并与 mochawesome-report-generator 配合使用，生成独立的 HTML/CSS 报告，帮助您直观地了解测试运行情况。

mochawesome-merge
合并多个 Mochawesome JSON 报告。

mochawesome-report-generator (marge)
marge ( m och* a wesome- r eport- ge *nerator) 是 mochawesome 的对应组件，它是一个用于 JavaScript 测试框架 mocha 的自定义报告器。Marge 会从 mochawesome 获取 JSON 输出，并生成完整的 HTML/CSS 报告，帮助您直观地呈现测试套件。

设置

步骤1：安装

安装 Mocha
```
npm install mocha --save-dev
```

2. Install cypress-multi-reporters

    ```


    npm install cypress-multi-reporters --save-dev

安装 mochawesome
```
npm install mochawesome --save-dev
```

4. Install mochawesome-merge

    ```


    npm install mochawesome-merge --save-dev

安装 mochawesome-report-generator



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



###Step 2: Add reporter settings in cypress.json

```json


"reporter": "cypress-multi-reporters",
    "reporterOptions": {
        "reporterEnabled": "mochawesome",
        "mochawesomeReporterOptions": {
            "reportDir": "cypress/reports/mocha",
            "quite": true,
            "overwrite": false,
            "html": false,
            "json": true
        }
    }

步骤3：在package.json文件中添加脚本

对于 Windows：



"scripts": {
    "clean:reports": "rmdir /S /Q cypress\\reports && mkdir cypress\\reports 
         && mkdir cypress\\reports\\mochareports",
    "pretest": "npm run clean:reports",
    "scripts": "cypress run",
    "combine-reports": "mochawesome-merge
         cypress/reports/mocha/*.json > cypress/reports/mochareports/report.json",
    "generate-report": "marge cypress/reports/mochareports/
         report.json -f report -o cypress/reports/mochareports",
    "posttest": "npm run combine-reports && npm run generate-report",
    "test" : "npm run scripts || npm run posttest"
  }

对于Mac：



"scripts": {
    "clean:reports": "rm -R -f cypress/reports && mkdir cypress/reports 
         && mkdir cypress/reports/mochareports",
    "pretest": "npm run clean:reports",
    "scripts": "cypress run",
    "combine-reports": "mochawesome-merge
         cypress/reports/mocha/*.json > cypress/reports/mochareports/report.json",
    "generate-report": "marge cypress/reports/mochareports/
         report.json -f report -o cypress/reports/mochareports",
    "posttest": "npm run combine-reports && npm run generate-report",
    "test" : "npm run scripts || npm run posttest"
  }

预测试脚本将创建报告文件夹并清除它们（如果它们已经存在）

测试脚本将执行以下操作：
a. 运行测试套件
b. 在“cypress/reports”下创建“mocha”文件夹
c. 在“mocha”文件夹中创建 .json 文件（每个执行的规范一个）

posttest脚本将合并“cypress/reports/mocha”文件夹中的所有 .json 文件，并将合并后的文件“report.json”放在“cypress/reports/mochareports”中，并创建一份漂亮的 html 报告。

执行

现在是时候运行测试套件并查看报告了。



npm run test

前置脚本和后置脚本在主脚本执行之前和之后自动执行。

您可以在此处找到示例项目：https://github.com/bushralam/Cypress

鏂囩珷鏉ユ簮锛�https://dev.to/bushraalam/using-mochawesome-reporter-with-cypress-54pf

使用 Mochawesome Reporter 和 Cypress Execution

将 Mochawesome Reporter 与 Cypress 结合使用

执行

设置

步骤1：安装

步骤3：在package.json文件中添加脚本

执行