Cypress 简明教程

Cypress - Reports

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

Cypress is bundled with Mocha. So, any reports that can be generated for Mocha, can also be utilised with Cypress. In addition to that Cypress has other third party reporters like JUnit and teamcity.

Mochawesome Report

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

The Mochawesome report is one of the most important reports in Cypress.

  1. To install mochawesome, run the command given herewith −

npm install mochawesome --save-dev

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

The following screen will appear on your computer −

install mochawesome
  1. To install mocha, run the command mentioned below −

npm install mocha --save-dev

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

The following screen will appear on your computer −

install mocha
  1. To merge mochawesome json reports, run the following command −

npm install mochawesome-merge --save-dev

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

The following screen will appear on your computer −

merge mochawesome json reports

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

All these packages after installation, should get reflected on the package.json file.

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

To merge multiple reports in a single report, run the following command −

npm run combine-reports

Configurations in cypress.json file

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

In the cypress.json file, we can set the following configurations for the mochawesome reports −

  1. overwrite − If its value is set to false, there should not be any overwriting from the prior generated reports.

  2. reportDir − It is the location, where reports are to be saved.

  3. quiet − If its value is set to true, there should not be any Cypress related output. Only the mochawesome output has to be printed.

  4. html − If its value is set to false, there should not be any generation of html reports after execution.

  5. json − If its value is set to true, a json file with execution details will be generated.

Implementation in cypress.json

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

The implementation for mochawesome report in cypress.json is as follows −

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

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

To generate a report for all specs in the integration folder of the Cypress project, run the command given below −

npx cypress run

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

For running a particular test, run the following command −

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

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

After the execution is completed, the mochawesome-report folder gets generated within the Cypress project containing reports in html and json formats.

json formats

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

Right-click on the mochawesome.html report. Then, select the Copy Path option and open the path copied on the browser.

mochawesome html

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

The mochawesome report gets opened with details of the execution results, duration, test case name, test steps, and so on.

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

On clicking on the icon (highlighted in the above image) on the left upper corner of the screen, more options are displayed.

mochawesome report

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

We can get the different views to select the passed, failed, pending, skipped test cases, and the hooks applied to the test.

JUnit Report

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

Cypress provides one more type of report known as the JUnit report.

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

To install the package for JUnit report, run the command stated below −

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

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

The following screen will appear on your computer −

junit report

Implementation in cypress.json

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

Given below is an implementation of JUnit report in cypress.json −

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

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

If we run multiple tests in a run, and wish to have a unique report for the individual spec files, we have to add [hash] in the mochaFile parameter in cypress.json.

Implementation to avoid overriding report

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

Following is an implementation in cypress.json to avoid an overriding report in Cypress −

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

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

To generate report for all specs in the integration folder of the Cypress project, run the following command −

npx cypress run --reporter junit

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

The following screen will appear on your computer −

cypress project

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

After execution is completed, the results folder gets generated within the Cypress project containing reports in xml format.

teamcity Report

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

Cypress provides one more type of report known as the teamcity report.

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

To install the package for teamcity report, run the following command −

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

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

The following screen will appear on your computer −

teamcity report

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

To generate report for all specs in the integration folder of the Cypress project, run the following command −

npx cypress run --reporter teamcity

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

The following screen will appear on your computer −

running