Lovely HTML reports for Cypress.io with Mochawesome

Vasile Pop
Feb 5 · 2 min read

This could be “Hey, use mochawesome with Cypress and you’re good to go”. It used to be like that. But Cypress team decided to make some (acceptable) changes and now the tests are running in isolation. This is, by default, making Mochawesome generating only one test report, with the latest test script. So the (probably subject to change) solution is to do a bit of tweaking. Here are the steps, assuming your report folder is the default mochawesome-report location:

  • Install the lovely libraries Mochawesome and mochawesome-merge
  • Add Mochawesome config to cypress.json file (overwritting must be off, so now you will have a json report for each test script):
“reporter”: “mochawesome”,
“reporterOptions”: {
“overwrite”: false,
“html”: false,
“json”: true
}
  • First of all, cleanup the Mochawesome report folder. Delete it, even.

rm -fr mochawesome-report — you’re not using Windows, riiiight?

  • Run the tests in headless mode — you’re doing that already, right?

npx cypress run

  • Run reports merging (it will create a single json file from all tests reports)
npx mochawesome-merge — reportDir mochawesome-report > mochawesome-report/output.json
  • Generate reports
npx marge output.json

Or you could just configure package.json project config with some relevant scripts:

"scripts": {
"test": "npm start & cypress run",
"e2e": "cypress run",
"cy:run": "cypress run",
"cy:run:record": "cypress run --record",
"cy:open": "cypress open",
"cleanup": "rm -fr mochawesome-report",
"merge_reports": "mochawesome-merge --reportDir mochawesome-report > mochawesome-report/output.json",
"generate_mochawesome_report": "marge mochawesome-report/output.json",
"e2e_mochawesome": "npm run cleanup; cypress run; npm run merge_reports; npm run generate_mochawesome_report"
}

and then you use

npm run e2e_mochawesome
Mochawesome test report

Vasile Pop

Written by

Skiing in Italy, playing guitars, fancy food, reading, travelling, these are great things and Software Testing is paying for it.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade