leonardosimoura / cypress-mochawesome-reporter

Zero config Mochawesome reporter for Cypress with screenshots

cypress-mochawesome-reporter

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

Example report

Cypress compatibility

reporter version	cypress version	reporter branch
v2	>= 6.7.0 >= 6.2.0 with experimentalRunEvents: true	master
v1	>= 4.0.0	v1

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);
}

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",
    "embeddedScreenshots": true // embedded external screenshots into HTML using base64, use with inlineAssets option to produces a single HTML file
  }
}

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