Use Mocha report in Cypress

doanhoavn
Jun 15, 2021
1 min read

Step 1: Installation mocha, mochawesome, mochawesome-merge

Install mochawesome

npm install --save-dev mochawesome

2. Install mochasome-merge to merge report.json together

npm install mochawesome-merge --save-dev

3. Install mochawesome-report-generator to generate html report

npm install -g mochawesome-report-generator

now, package.json will have

"devDependencies": { 
  "mochawesome": "^6.2.2",
  "mochawesome-merge": "^4.2.0",
  "mochawesome-report-generator": "^5.2.0"
}

Step 2: Add reporter settings in cypress.json

"reporter": "mochawesome",
"reporterOptions": {
  "reportDir": "cypress/reports/mocha",
  "overwrite": false,
  "html": false,
  "json": true,
  "charts": true,
  "timestamp": "mmddyyyy_HHMMss"
},
"screenshotsFolder": "cypress/reports/mochareports/assets"

Step 3: Add scripts in package.json file

"scripts": {
  "script": "cypress run --spec ./cypress/integration/test/*.spec.js --browser chrome",
  "clean_reports": "(if exist cypress\\reports rmdir /s/q cypress\\reports) && (mkdir cypress\\reports\\mochareports)",
  "merge_reports": "mochawesome-merge cypress/reports/mocha/*.json > cypress/reports/mochareports/report.json",
  "generate_report": "marge cypress/reports/mochareports/report.json -f report -o cypress/reports/mochareports",
  "report": "merge_reports && generate_report",
  "test": "clean_reports && cypress run"
},