WEB自動化-09-Cypress 測試報告

9 測試報告

    一份好的測試報告，可以很直觀的看出整個測試過程的各種數據。而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

    運行結果如下所示：

9.1.2 json格式

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

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

    運行結果如下所示：

9.1.3 junit格式

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

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

    運行結果如下所示：

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

9.2 自定義測試報告

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

9.2.1 自寫測試報告模板

    具體配置如下所示：

• 假設工程目錄結構如下所示：

> 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

安裝的時候，需要注意系統是否有寫入權限和工程所在目錄

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

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

    運行結果如下所示：

• console中輸出信息：

• 生成的HTML報告：

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，用於生成混合報告。該插件的網址爲：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

• 創建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

    運行結果如下所示：

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

• 在package.json添加以下配置內容，最後運行npm run report即可

"scripts": {
    "deletereports": "del /q \"cypress\\results\\*\" ", // 這裏取決於配置的操作系統，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

• 修改配置內容，如下所示：

"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

• 添加配置文件，內容如下所示：

{
  "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文件，如下所示：

• 合併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

• 打開報告，如下所示：

9.4 生成報告參數

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

並不是所有reporter都支持該參數選項，具體情況，可查閱相關文檔。

• 通過配置文件

{
  "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

    安裝的過程在此略過，如需查看詳情，可以轉至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中添加以下內容，用以引用插件：

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

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

    在cypress/support/index.js中添加以下內容，用以註冊

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

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

    在cypress/plugins/index.js中添加以下內容，用以添加代碼智能提示：

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

    也可以在tsconfig.json中添加以下內容，用以添加代碼智能提示：

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

9.5.2 Alluer參數與使用

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

環境變量名	默認值	功能描述
allure	false	是否啓用Allure插件
allureResultsPath	allure-results	自定義Allure報告路徑和文件名
issuePrefix	``	鏈接到缺陷管理系統的前綴
allureLogCypress	true	是否將Cypress的命令等信息顯示在報告中
allureAttachRequests	false	是否自動將cy.request中的headers, body, response headers, respose body 等信息添加到Allure報告中
allureOmitPreviousAttemptScreenshots	false	在重試前，是否添加前一次的嘗試結果截圖
allureSkipAutomaticScreenshots	false	不自動添加截圖
allureClearSkippedTests	false	從測試報告中移除跳過的測試用例
allureAddVideoOnPass	false	爲通過的測試用例添加視頻

    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

    最終運行的結果如下所示：

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

原文地址：https://www.jianshu.com/p/3b7efbbbdc63

本文同步在微信訂閱號上發佈，如各位小夥伴們喜歡我的文章，也可以關注我的微信訂閱號：woaitest，或掃描下面的二維碼添加關注：