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