/cypress-mochawesome-reporter

Zero config Mochawesome reporter for Cypress with screenshots

Primary LanguageJavaScriptMIT LicenseMIT

cypress-mochawesome-reporter

npm node npm npm

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

Example report

Mochawesome report with fail test screenshot

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
  1. Change cypress reporter

config file (cypress.json by default)

  "reporter": "cypress-mochawesome-reporter"

or command line

--reporter cypress-mochawesome-reporter
  1. Add to cypress/support/index.js
import 'cypress-mochawesome-reporter/register';
  1. Add to cypress/plugins/index.js
module.exports = (on, config) => {
  require('cypress-mochawesome-reporter/plugin')(on);
}
  1. 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"
  }
}

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