cypress-mochawesome-reporter

Zero config Mochawesome reporter for Cypress with screenshots attached to tests.

Example report

Cypress compatibility

migration guide from v1 to v2

Setup

1. install cypress-mochawesome-reporter

npm i --save-dev cypress-mochawesome-reporter

or

yarn add -D cypress-mochawesome-reporter

2. Change cypress reporter

config file (cypress.json by default)

  "reporter": "cypress-mochawesome-reporter"

or command line

--reporter cypress-mochawesome-reporter

3. Add to cypress/support/index.js

import 'cypress-mochawesome-reporter/register';

4. Add to cypress/plugins/index.js

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

or (cypress-mochawesome-reporter >= 2.2.0)

const { beforeRunHook, afterRunHook } = require('cypress-mochawesome-reporter/lib');

module.exports = (on) => {
  on('before:run', async (details) => {
    console.log('override before:run');
    await beforeRunHook(details);
  });

  on('after:run', async () => {
    console.log('override after:run');
    await afterRunHook();
  });
};

5. run cypress

Custom options

If you want to customize your HTML report with mochawesome-report-generator flags just add the flags you want to reporterOptions

{
  "reporter": "cypress-mochawesome-reporter",
  "reporterOptions": {
    "reportDir": "cypress/report",
    "charts": true,
    "reportPageTitle": "custom-title"
  }
}

Additional reporter options:

Examples

1. Simple use of cypress-mochawesome-reporter
2. Using cypress-multi-reporters
3. With mochawesome-report-generator flags
4. Change default screenshots folder in cypress.json

cd examples/<example-project>

npm i
npm test