Cypress 简明教程

Cypress - Reports

Cypress 与 Mocha 捆绑在一起。因此,任何可为 Mocha 生成的报告也可用于 Cypress。此外,Cypress 还有其他第三方报告工具,如 JUnit 和 teamcity。

Mochawesome Report

Mochawesome 报告是 Cypress 中最重要的报告之一。

  1. install mochawesome ,运行以下命令:

npm install mochawesome --save-dev

以下屏幕将出现在您的计算机上:

install mochawesome
  1. 要安装 mocha,运行以下命令:

npm install mocha --save-dev

以下屏幕将出现在您的计算机上:

install mocha
  1. merge mochawesome json reports ,运行以下命令:

npm install mochawesome-merge --save-dev

以下屏幕将出现在您的计算机上:

merge mochawesome json reports

安装后,所有这些包都应该反映在 package.json 文件中。

要将多个报告合并为一个报告,运行以下命令:

npm run combine-reports

Configurations in cypress.json file

在 cypress.json 文件中,我们可以为 mochawesome 报告设置以下配置:

  1. overwrite - 如果其值设为 false,则不应该覆盖之前生成的报告。

  2. reportDir - 这是保存报告的位置。

  3. quiet - 如果其值设为 true,则不应该有任何与 Cypress 相关的输出。必须只打印 mochawesome 输出。

  4. html - 如果其值设为 false,则不应该在执行后生成任何 html 报告。

  5. json - 如果其值设为 true,则会生成包含执行详细信息的 json 文件。

Implementation in cypress.json

在 cypress.json 中对 mochawesome 报告的实现如下:

{
   "reporter": "mochawesome",
   "reporterOptions": {
      "reportDir": "cypress/results",
      "overwrite": false,
      "html": false,
      "json": true
   }
}

要为 Cypress 项目的 integration 文件夹中的所有规范生成报告,请运行下面给出的命令:

npx cypress run

要运行特定测试,请运行以下命令:

npx cypress run --spec "<path of spec file>"

执行完成后,会在 Cypress 项目中生成 mochawesome-report 文件夹,其中包含 html 和 json 格式的报告。

json formats

右键单击 mochawesome.html 报告。然后,选择复制路径选项,并在浏览器上打开复制的路径。

mochawesome html

mochawsome 报告将以执行结果、持续时间、测试用例名称、测试步骤等的详细信息的形式打开。

单击屏幕左上角的图标(在上图中突出显示),将显示更多选项。

mochawesome report

我们可以获得不同的视图来选择通过、失败、挂起、跳过的测试用例以及应用于测试的钩子。

JUnit Report

Cypress 提供了另一种称为 JUnit 报告的报告类型。

要为 JUnit 报告安装程序包,请运行下面说明的命令:

npm install cypress-junit-reporter --save-dev

以下屏幕将出现在您的计算机上:

junit report

Implementation in cypress.json

下面是对 cypress.json 中 JUnit 报告的实现:

{
   "reporter": "junit",
   "reporterOptions": {
      "mochaFile": "cypress/results/results.xml",
      "toConsole": true
   }
}

如果我们在某个运行中运行多个测试,并且希望单独的规范文件有唯一的报告,我们必须在cypress.json中mochaFile参数中添加[hash]。

Implementation to avoid overriding report

以下是cypress.json中的一个实现,以避免Cypress中有优先报告

{
   "reporter": "junit",
   "reporterOptions": {
      "mochaFile": "cypress/results/results-[hash].xml",
      "toConsole": true
   }
}

要生成Cypress项目中integration文件夹中所有规格的报告,请运行以下命令:

npx cypress run --reporter junit

以下屏幕将出现在您的计算机上:

cypress project

执行完成后,Cypress项目中会生成一个results文件夹,其中包含xml格式的报告。

teamcity Report

Cypress提供了一种被称为TeamCity的报告的另一种报告类型。

要安装teamcity报告的软件包,请运行以下命令:

npm install cypress-teamcity-reporter --save-dev

以下屏幕将出现在您的计算机上:

teamcity report

要生成Cypress项目中integration文件夹中所有规格的报告,请运行以下命令:

npx cypress run --reporter teamcity

以下屏幕将出现在您的计算机上:

running