Cypress web自動化25-生成mochawesome-report合並報告

前言

前一篇通過生成的 xml 報告最后用 allure 生成一個html報告內容。
我們也可以生成json格式的報告，最后把json格式報告合並成一個，最終生成一個html報告，這在分布式執行的時候用得到。

安裝依賴包

我們需要安裝幾個依賴：

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

安裝完成后會在 package.json 文件中生成對應的依賴包版本號信息

"devDependencies": {
    "cypress": "^4.5.0",
    "mocha": "^7.2.0",
    "mochawesome": "^6.1.1",
    "mochawesome-merge": "^4.0.3",
    "mochawesome-report-generator": "^5.1.0"
  }

然后在 cypress.json 配置 mochawesome 報告生成器，保存每一個JSON測試報告到cypress/results目錄：

• reporter 選擇報告生成器mochawesome
• reportDir 指定報告存放路徑，不指定默認在項目目錄下mochawesome-report
• overwrite 是否覆蓋原來的報告
• html 是否生成html報告
• json 是否生成json文件

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

使用cypress run運行用例后，就會生成cypress/results/mochawesome.json, cypress/results/mochawesome_001.json, ...等報告文件。

mochawesome-merge 合並報告

每個用例會生成一個json文件，最終我們合並成一個json文件，再把這個json報告文件生成一個html報告

npx mochawesome-merge cypress/results/*.json > merge-report.json

這樣就會在項目目錄生成一個 merge-report.json 文件

mochawesome-merge 4.x的版本和以前版本語法不太一樣，不需要加 --reportDir 參數。
關於 mochawesome-merge 相關用法參考這篇 https://github.com/Antontelesh/mochawesome-merge/tree/master

mochawesome-report-generator

使用 mochawesome-report-generator 生成 html 報告內容

npx mochawesome-report-generator merge-report.json

D:\Cypress>npx mochawesome-report-generator merge-report.json
npx: installed 48 in 8.545s

✓ Reports saved:
D:\Cypress\mochawesome-report\merge-report.html

這樣根據上面的路徑找到 merge-report.html 文件，就是最終的測試報告了

作者：上海-悠悠 交流QQ群:939110556
原文blog: https://www.cnblogs.com/yoyoketang