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

> This setup tutorial works with Cypress >= v10, looking for older version setup? here

1. install cypress-mochawesome-reporter

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

   or

   yarn add -D cypress-mochawesome-reporter
   

2. Change cypress reporter & setup hooks

   Edit config file (cypress.config.js by default)

   const { defineConfig } = require('cypress');
   
   module.exports = defineConfig({
     reporter: 'cypress-mochawesome-reporter',
     e2e: {
       setupNodeEvents(on, config) {
         require('cypress-mochawesome-reporter/plugin')(on);
       },
     },
   });
   

   If you are override before:run or after:run hooks, use this:

   const { defineConfig } = require('cypress');
   const { beforeRunHook, afterRunHook } = require('cypress-mochawesome-reporter/lib');
   
   module.exports = defineConfig({
     reporter: 'cypress-mochawesome-reporter',
     e2e: {
       setupNodeEvents(on, config) {
         on('before:run', async (details) => {
           console.log('override before:run');
           await beforeRunHook(details);
         });
   
         on('after:run', async () => {
           console.log('override after:run');
           await afterRunHook();
         });
       },
     },
   });
   

3. Add to cypress/support/e2e.js

   import 'cypress-mochawesome-reporter/register';
   

4. (optional, if your are using cypress-cucumber-preprocessor) Add to cypress/support/step_definitions/index.js

   import 'cypress-mochawesome-reporter/cucumberSupport';
   

   > ⚠️ cypress-cucumber-preprocessor uses the same hooks as cypress-mochawesome-reporter, you also need to install cypress-on-fix. Full example of using cypress-mochawesome-reporter with cypress-cucumber-preprocessor can be found here.

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

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  reporter: 'cypress-mochawesome-reporter',
  reporterOptions: {
    charts: true,
    reportPageTitle: 'custom-title',
    embeddedScreenshots: true,
    inlineAssets: true,
    saveAllAttempts: false,
  },
  e2e: {
    setupNodeEvents(on, config) {
      require('cypress-mochawesome-reporter/plugin')(on);
    },
  },
});

Additional reporter options:

Add extra information to report

Add extra information to the report manually by using cy.addTestContext() as seen in the simple-typescript example test 2

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
5. Using cypress-mochawesome-reporter with typescript
6. Using cypress-mochawesome-reporter with cypress-parallel
7. Using cypress-mochawesome-reporter with cypress-cucumber-preprocessor

Run npm i in root directory then:

cd examples/

npm i
npm test