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

Example report

migration guide from v1 to v2

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. run cypress

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:

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

Run npm i in root directory then:

cd examples/<example-project>

npm i
npm test