Mochawesome reporter setup in Cypress

Introduction

Mochawesome reporter helps you see clear and beautiful test reports after running your Cypress tests.

You want to share test results with your team in an easy-to-read format.

You need to keep a record of test runs for future reference.

You want to quickly find which tests passed or failed after running Cypress tests.

You want to generate HTML reports automatically after tests finish.

Syntax

Cypress

1. Install mochawesome, mochawesome-merge, and mochawesome-report-generator:
   npm install --save-dev mochawesome mochawesome-merge mochawesome-report-generator

2. Update cypress.config.js to add mochawesome reporter:
   const { defineConfig } = require('cypress')
   module.exports = defineConfig({
     e2e: {
       reporter: 'mochawesome',
       reporterOptions: {
         reportDir: 'cypress/reports',
         overwrite: false,
         html: false,
         json: true
       }
     }
   })

Make sure to install mochawesome, mochawesome-merge, and mochawesome-report-generator for full reporting features.

Set overwrite: false to keep reports from multiple test runs.

Examples

This config sets Mochawesome as the reporter and saves reports in cypress/reports folder.

Cypress

e2e: {
  reporter: 'mochawesome',
  reporterOptions: {
    reportDir: 'cypress/reports',
    overwrite: false,
    html: false,
    json: true
  }
}

This command merges multiple JSON reports into one file. Then run npx mochawesome-report-generator cypress/reports/report.json to generate HTML.

Cypress

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

Sample Program

This is a full example of setting up Mochawesome reporter in Cypress config. After running tests, you merge JSON reports, generate the HTML report, and open it to see results.

Cypress

// cypress.config.js
const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    reporter: 'mochawesome',
    reporterOptions: {
      reportDir: 'cypress/reports',
      overwrite: false,
      html: false,
      json: true
    },
    setupNodeEvents(on, config) {
      // no special events needed for mochawesome
    }
  }
})

// Run tests with:
// npx cypress run

// After tests, merge and generate reports:
// npx mochawesome-merge cypress/reports/*.json > cypress/reports/report.json
// npx mochawesome-report-generator cypress/reports/report.json

// Open the HTML report: cypress/reports/mochawesome-report/mochawesome.html

Important Notes

Always run npx mochawesome-merge cypress/reports/*.json > cypress/reports/report.json and npx mochawesome-report-generator cypress/reports/report.json after tests to combine JSON files and generate the HTML report.

You can customize report folder and options in reporterOptions.

Use the HTML report to easily share test results with your team.

Summary

Mochawesome reporter creates clear HTML and JSON test reports for Cypress.

Install mochawesome packages and update cypress.config.js to enable it.

Merge JSON reports and generate HTML after tests to get a complete report.