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，或掃描下面的二維碼添加關注：

作者： Surpassme

來源： http://www.jianshu.com/u/28161b7c9995/

http://www.cnblogs.com/surpassme/

宣告：本文著作權歸作者所有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文鏈接，否則保留追究法律責任的權利，如有問題，可發送郵件聯系，讓我們尊重原創者著作權，共同營造良好的IT朋友圈，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/509352.html

標籤：其他

上一篇：基于阿里云 Serverless 快速部署 function 的極致體驗

下一篇：「浙江理工大學ACM入隊200題系列」問題 A: 零基礎學C/C++34—— 3個數比較大小(冒泡排序與選擇排序演算法)

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

9 測驗報告

9.1 自帶的測驗報告

9.1.1 spec格式

9.1.2 json格式

9.1.3 junit格式

9.2 自定義測驗報告

9.2.1 自寫測驗報告模板

9.2.2 安裝第三方插件

9.3 生成混合報告

9.3.1 spec輸出到Console同時保存junit風格的XML檔案

9.3.2 spec輸出到Console并使用Mochawesome合并JSON檔案

9.4 生成報告引數

9.5 與Allure集成

9.5.1 Alluer安裝與配置

9.5.2 Alluer引數與使用

9.5.3 生成與查看報告