Generate Mochawesome HTML / JSON Reports in Cypress

cypress mochawesome HTML / JSON reports

This article is about how we can create the mochawesome report using cypress, it captures the HTML and JSON reports.

Install cypress-mochawesome-reporter:

yarn add -D cypress-mochawesome-reporter

Add the reporter in cypress.json:

"reporter": "cypress-mochawesome-reporter"

Register the reporter with cypress in cypress/support/index.js:

import 'cypress-mochawesome-reporter/register';

Add plugin for the reporter in cypress/plugins/index.js:

module.exports = (on, config) => {
  require('cypress-mochawesome-reporter/plugin')(on);
};

Run Cypress:

cypress run

If you want to customize your reports, add the reporterOptions to Cypress.json as follows:

{
  "reporter": "cypress-mochawesome-reporter",
  "reporterOptions": {
    "reportDir": "cypress/report",
    "reportPageTitle": "Test-Suite",
    "embeddedScreenshots":true,
    "inlineAssets": true,
    "saveJson": true
  }
}

Index.html and Index.json reports will get generated.

Generated reports

Html Report

reportDir- Path to save report
reportPageTitle- Browser title
embeddedScreenshots- Add the screenshot to report
inlineAssets- Inline report assets
saveJson- Should save the report to a JSON file

To customize your report further, please follow the mochawesome-report-generator flags.