9 測試報告

? ? 一份好的測試報告，可以很直觀的看出整個測試過程的各種數(shù)據(jù)。而Cypress的測試報告是基于Mocha，因此任何支持Mocha的測試報告都可以應用于Cypress。但實際上，Cypress默認使用spec輸出測試報告。如果不想使用自帶的測試報告，也可以添加第三方的測試報告模板和自定義的測試報告模板。

9.1 自帶的測試報告

? ? 自帶的測試報告包括Mocha自帶的測試報告和直接嵌入在Cypress中的測試報告。主要如下所示：

9.1.1 spec格式

? ? spec是Mocha自帶的測試報告，輸出是一個嵌套樣式的分組視圖，其使用方法也非常簡單，在命令行模式中按以下輸入即可：

cypress run --spec "cypress\integration\4-Surpass-API-Test*.js" --reporter=spec

? ? 運行結(jié)果如下所示：

0901spec測試報告.png

9.1.2 json格式

? ? json格式的測試報告是將測試報告的輸出格式調(diào)整為JSON對象。其使用方法也非常簡單，在命令行模式中按以下輸入即可：

cypress run --spec "cypress\integration\4-Surpass-API-Test*.js" --reporter=json

? ? 運行結(jié)果如下所示：

0902json測試報告.png

9.1.3 junit格式

? ? json格式的測試報告是將測試報告的輸出格式調(diào)整為XML文件。其使用方法也非常簡單，在命令行模式中按以下輸入即可：

cypress run --spec "cypress\integration\4-Surpass-API-Test*.js" --reporter=junit

? ? 運行結(jié)果如下所示：

0903Junit測試報告.png

測試運行完成后，會在工程的根目錄中生成test-results.xml

9.2 自定義測試報告

? ? 如果內(nèi)置的測試報告不能滿足要求，也可以自定義測試報告。若是用戶自定義的Mocha報告，可以通過相對路徑或絕對路徑進行加載，具體可在cypress.json或命令行中配置。

9.2.1 自寫測試報告模板

? ? 具體配置如下所示：

• 假設(shè)工程目錄結(jié)構(gòu)如下所示：

> surpass-project
  > cypress
  > reporters
    - custom.js

• 通過cypress.json配置引用

{
  "reporter": "reporters/custom.js"
}

• 通過命令行進行配置

cypress run --reporter reporters/custom.js

9.2.2 安裝第三方插件

? ? 我們以官方提供的mochawesome為例，其操作步驟如下所示：

• 使用npm安裝mochawesome，操作如下所示：

npm install mochawesome --save-dev

安裝的時候，需要注意系統(tǒng)是否有寫入權(quán)限和工程所在目錄

• 在命令行中運行測試，如下所示：

cypress run --spec "cypress\integration\4-Surpass-API-Test\01-test-api-get.spec.js" --reporter=mochawesome

? ? 運行結(jié)果如下所示：

• console中輸出信息：

0904生成mochawesome控制臺.png

• 生成的HTML報告：

0905生成mochawesomeHTML報告.png

9.3 生成混合報告

? ? 在每次啟動一個測試時，都會生成一份測試報告，所以在每次運行cypress run完成后，都會覆蓋前一次運行所生成的測試報告。為避免這種情況，可以在生成測試報告文件時，使用hash碼。示意配置文件如下所示：

• 配置文件cypress.json

{
  "reporter": "junit",
  "reporterOptions": {
     "mochaFile": "results/my-test-output-[hash].xml"
  }
}

• 命令行

cypress run --reporter junit --reporter-options "mochaFile=results/my-test-output-[hash].xml"

? ? 但在很多情況下，我們希望一次生成多種類型的報告，比如在一次運行時，同時生成junit和json的報告。針對這種情況，Cypress提供了一個插件cypress-multi-reporters，用于生成混合報告。該插件的網(wǎng)址為：https://github.com/you54f/cypress-multi-reporters，其操作步驟如下所示：

• 使用npm安裝組件

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

9.3.1 spec輸出到Console同時保存junit風格的XML文件

• 在cypress.json添加配置，如下所示：

{
  "reporter": "cypress-multi-reporters",
  "reporterOptions": {
    "configFile": "merge-reporter-config.json"
  }
}

• 命令行配置如下：

cypress run --reporter cypress-multi-reporters --reporter-options configFile=merge-reporter-config.json

• 創(chuàng)建merge-reporter-config.json文件，添加以下配置

{
  "reporterEnabled": "spec, mocha-junit-reporter",
  "mochaJunitReporterReporterOptions": {
    "mochaFile": "cypress/results/results-[hash].xml"
  }
}

以上配置，表示同時允許生成spec和junit格式的報告

• 運行并生成混合報告

cypress run --spec "cypress\integration\4-Surpass-API-Test*.js" --reporter cypress-multi-reporters  --reporter-options configFile=merge-reporter-config.json

? ? 運行結(jié)果如下所示：

0906同時生成spec和XML報告.png

? ? 因為在文件名添加了Hash碼，所以每次執(zhí)行測試完成后生成的報告文件不會相互覆蓋。但還是建議每次啟動測試刪除所有的測試報告文件。可以按以下方法進行配置

• 在package.json添加以下配置內(nèi)容，最后運行npm run report即可

"scripts": {
    "deletereports": "del /q \"cypress\\results\\*\" ", // 這里取決于配置的操作系統(tǒng)，Windows中使用del刪除文件，在Linux中使用rm刪除文件
    "prereport": "npm run deletereports",
    "report": "cypress run --spec \"cypress\\integration\\4-Surpass-API-Test\\*.js\" --reporter cypress-multi-reporters  --reporter-options configFile=merge-reporter-config.json"
  }

• 使用npm安裝junit-report-merger

npm install junit-report-merger --save-dev

• 修改配置內(nèi)容，如下所示：

"scripts": {
    "deletereports": "del /q \"cypress\\results\\*\"",
        "combinereports": "jrm cypress\\results\\combined-report.xml \"cypress\\results\\*.xml\"",
        "prereport": "npm run deletereports",
        "report": "cypress run --spec \"cypress\\integration\\4-Surpass-API-Test\\*.js\" --reporter cypress-multi-reporters  --reporter-options configFile=merge-reporter-config.json",
        "postreport": "npm run combinereports"
  }

• 運行合并命令

npm run postreport

9.3.2 spec輸出到Console并使用Mochawesome合并JSON文件

? ? 該操作步驟如下所示：

• 安裝插件

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

• 添加配置文件，內(nèi)容如下所示：

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

• 命令行中運行

cypress run --spec "cypress\integration\4-Surpass-API-Test*.js" --reporter mochawesome  --reporter-options configFile=merge-mochawesome.json,reportDir="cypress/results",overwrite=false,html=false,json=true

? ? 在運行完成后，僅會生成json文件，如下所示：

0907生成json.png

• 合并json文件，如下所示：

npx mochawesome-merge "cypress/results/*.json" > merge-test-mochawesome.json

• 再生成最終的報告

npx marge merge-test-mochawesome.json

? Reports saved:
C:\Users\admin\Documents\CypressProjects\mochawesome-report\merge-test-mochawesome.html

• 打開報告，如下所示：

0908生成mochawesome報告.png

9.4 生成報告參數(shù)

? ? 在生成測試報告時，部分reporter支持設(shè)定一些參數(shù)選項，從而改變其行為。可以通過配置文件(cypress.json)或命令行中指定。以junit為例，如下所示：

并不是所有reporter都支持該參數(shù)選項，具體情況，可查閱相關(guān)文檔。

• 通過配置文件

{
  "reporter": "junit",
  "reporterOptions": {
    "mochaFile": "results/surpass-test.xml",
    "toConsole": true
  }
}

• 通過命令行

cypress run --reporter junit --reporter-options "mochaFile=results/surpass-test.xml,toConsole=true"

9.5 與Allure集成

9.5.1 Alluer安裝與配置

? ? Allure是一款使用非常用于展示測試報告的工具，我們來看看如何與Cypress進行集成。插件幫助文檔地址：https://github.com/Shelex/cypress-allure-plugin,具體操作步驟如下所示：

• 1、安裝Allure

? ? 安裝的過程在此略過，如需查看詳情，可以轉(zhuǎn)至https://www.cnblogs.com/surpassme/p/15491632.html

• 2、安裝Cypress Allure插件

npm install @shelex/cypress-allure-plugin --save-dev

• 3、Cypress添加引用插件

? ? 在cypress/plugins/index.js中添加以下內(nèi)容，用以引用插件：

// 僅做為插件引用
// 引用allure
const allureWriter = require('@shelex/cypress-allure-plugin/writer');

// 加載模塊
module.exports = (on, config) => {
  allureWriter(on, config);
  return config;
};

? ? 在cypress/support/index.js中添加以下內(nèi)容，用以注冊

// 使用import
import '@shelex/cypress-allure-plugin';
// 使用require
require('@shelex/cypress-allure-plugin');

• 4、Cypress添加代碼智能提示

? ? 在cypress/plugins/index.js中添加以下內(nèi)容，用以添加代碼智能提示：

// 添加代碼智能化提示
/// <reference types="@shelex/cypress-allure-plugin" />

? ? 也可以在tsconfig.json中添加以下內(nèi)容，用以添加代碼智能提示：

"include": [
   "../node_modules/@shelex/cypress-allure-plugin/reporter",
   "../node_modules/cypress"
 ]

9.5.2 Alluer參數(shù)與使用

? ? 在Cypress中，Allure與Cypress環(huán)境變量一樣，也是支持自定義的，如下所示：

? ? cypress.json的配置如下所示：

{
    "env": {
        "allureResultsPath": "allure/results",
        "allureAttachRequests":true
    }
}

? ? 命令行運行時的配置如下所示：

cypress run --env allure=true,allureResultsPath=allure/results

9.5.3 生成與查看報告

• 1、生成報告，命令如下所示：

cypress run --spec cypress\integration\4-Surpass-API-Test\*.js --env allure=true,allureResultPath=allure/results

• 2、查看報告，命令如下所示：

allure serve allure\results

? ? 最終運行的結(jié)果如下所示：

0910生成Allure測試報告.png

Cypress官方有很多插件，包括官方和三方，且有詳細使用說明文檔，非常優(yōu)秀，地址為：https://docs.cypress.io/plugins/directory