9 測試報(bào)告

? ? 一份好的測試報(bào)告患整，可以很直觀的看出整個(gè)測試過程的各種數(shù)據(jù)尽爆。而Cypress的測試報(bào)告是基于Mocha谣旁，因此任何支持Mocha的測試報(bào)告都可以應(yīng)用于Cypress秦陋。但實(shí)際上惠呼，Cypress默認(rèn)使用spec輸出測試報(bào)告佩番。如果不想使用自帶的測試報(bào)告，也可以添加第三方的測試報(bào)告模板和自定義的測試報(bào)告模板罢杉。

9.1 自帶的測試報(bào)告

? ? 自帶的測試報(bào)告包括Mocha自帶的測試報(bào)告和直接嵌入在Cypress中的測試報(bào)告趟畏。主要如下所示：

9.1.1 spec格式

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

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

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

0901spec測試報(bào)告.png

9.1.2 json格式

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

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

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

0902json測試報(bào)告.png

9.1.3 junit格式

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

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

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

0903Junit測試報(bào)告.png

測試運(yùn)行完成后技即，會在工程的根目錄中生成test-results.xml

9.2 自定義測試報(bào)告

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

9.2.1 自寫測試報(bào)告模板

? ? 具體配置如下所示：

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

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

• 通過cypress.json配置引用

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

• 通過命令行進(jìn)行配置

cypress run --reporter reporters/custom.js

9.2.2 安裝第三方插件

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

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

npm install mochawesome --save-dev

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

• 在命令行中運(yùn)行測試脱篙，如下所示：

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

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

• console中輸出信息：

0904生成mochawesome控制臺.png

• 生成的HTML報(bào)告：

0905生成mochawesomeHTML報(bào)告.png

9.3 生成混合報(bào)告

? ? 在每次啟動一個(gè)測試時(shí)娇钱，都會生成一份測試報(bào)告，所以在每次運(yùn)行cypress run完成后绊困，都會覆蓋前一次運(yùn)行所生成的測試報(bào)告文搂。為避免這種情況，可以在生成測試報(bào)告文件時(shí)秤朗，使用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"

? ? 但在很多情況下，我們希望一次生成多種類型的報(bào)告，比如在一次運(yùn)行時(shí)疯兼，同時(shí)生成junit和json的報(bào)告。針對這種情況贫途，Cypress提供了一個(gè)插件cypress-multi-reporters吧彪，用于生成混合報(bào)告。該插件的網(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同時(shí)保存junit風(fēng)格的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"
  }
}

以上配置怨酝，表示同時(shí)允許生成spec和junit格式的報(bào)告

• 運(yùn)行并生成混合報(bào)告

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

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

0906同時(shí)生成spec和XML報(bào)告.png

? ? 因?yàn)樵谖募砑恿薍ash碼傀缩，所以每次執(zhí)行測試完成后生成的報(bào)告文件不會相互覆蓋。但還是建議每次啟動測試刪除所有的測試報(bào)告文件农猬∩募瑁可以按以下方法進(jìn)行配置

• 在package.json添加以下配置內(nèi)容，最后運(yùn)行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"
  }

• 運(yùn)行合并命令

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
  }
}

• 命令行中運(yùn)行

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

? ? 在運(yùn)行完成后料身，僅會生成json文件，如下所示：

0907生成json.png

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

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

• 再生成最終的報(bào)告

npx marge merge-test-mochawesome.json

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

• 打開報(bào)告芹血，如下所示：

0908生成mochawesome報(bào)告.png

9.4 生成報(bào)告參數(shù)

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

并不是所有reporter都支持該參數(shù)選項(xiàng)，具體情況慎颗，可查閱相關(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是一款使用非常用于展示測試報(bào)告的工具，我們來看看如何與Cypress進(jìn)行集成俯萎。插件幫助文檔地址：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
    }
}

? ? 命令行運(yùn)行時(shí)的配置如下所示：

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

9.5.3 生成與查看報(bào)告

• 1、生成報(bào)告豺总，命令如下所示：

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

• 2车伞、查看報(bào)告食店，命令如下所示：

allure serve allure\results

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

0910生成Allure測試報(bào)告.png

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