Understanding Cypress HTML Reporter

Cypress is a NodeJS-based Test Automation Tool, Cypress is becoming popular due to its developer-friendly features. Cypress Supports Component, API, and End To End testing. With the newly launched Cypress 10, it has gained even more traction due to its advanced features.

While testing is important for delivering high-quality software, so is the reporting of tests. Any test automation without proper reporting stands ineffective. You might have covered thousands of test cases in test automation, but if not presented in a way that stakeholder comprehends, then it doesn’t bring value to the table. 

Hence it is essential to report the test data very comprehensively to make the best out of it. Cypress supports multiple reporters, the most useful and most readable report is the HTML reporter.

This article explains Cypress HTML reporter. Cypress HTML reporter can be generated using the npm package cypress-mochawesome-reporter. The cypress mocha awesome reporter is built on top of the mocha awesome reporter with some customization.

Since Cypress 10 is the latest version, yet Cypress 9 is still popular among QAs, this article helps you learn to generate HTML Reporter in: 

1. Cypress Version 10 
2. Cypress Version 9 or Below

How to use the Cypress HTML reporter for Version 10 

Cypress version 10 release has major changes, and hence to make the best use of maximum 

Note: Below tutorial works for Cypress version 10 and above

Cypress always recommends having the latest version.

Pre-Requisite:

Basic Cypress Framework with Cypress Version 10 

Step by Step Guide to Generate Cypress HTML reporter in Cypress version 10

Step 1: Install  Cypress reporter, using Terminal install cypress-mochawesome-reporter, with command

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

Step 2: Configure Cypress Reporter

Navigate to your cypress configuration file, typically the name will cypress.config.js

Add the below line of code

//cypress.config.js

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


module.exports = defineConfig({

  reporter: 'cypress-mochawesome-reporter',

  e2e: {

    setupNodeEvents(on, config) {

      require('cypress-mochawesome-reporter/plugin')(on);

    },

  },

});

The reporter is mentioned as the ‘cypress-mochawesome-reporter’, which you installed in step 1.

Cypress 10 and above version has a separate part for e2e tests, inside that you need to add the required statement as shown above.

Step 3: Configure Support e2e.js

Navigate to cypress/support/e2e.js, and add the import statement using the command below.

import 'cypress-mochawesome-reporter/register';

The above Steps complete the basic HTML reporter setup

Step 4: Execute your tests

Execute your tests with the below command

npx cypress run --e2e

Alternatively, you can also execute using npm run test, if you have configured scripts in package.json

Step 5: View HTML reports

Once the execution is complete, Cypress Generates the HTML report. Navigate to the folder with the name “reports”, you will find the HTML report as seen below

Cypress Reports Folder VS Code explorer view

If you navigate to the reports folder, you can see the HTML file, along with that there are many other folders created such as screenshots, and asserts which are required for the HTML. If you need to share this report, then you need to share all the assets and screenshot folder as well, else the HTML reporter content will break. A simple solution for this is to create a report with in-line assets.

How to Create Simple Shareable HTML Reports in Cypress (Version 10 or above)

To create a shareable HTML report, you still need to follow Steps 1 to 3 mentioned in the previous section after that you need to follow the below step.

Navigate to Cypress Config File, Typically named cypress.config.js add the inline options

//cypress.config.js

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


module.exports = defineConfig({

  reporter: 'cypress-mochawesome-reporter',

  video: false,

  reporterOptions: {

    charts: true,

    reportPageTitle: 'Cypress Inline Reporter',

    embeddedScreenshots: true, 

    inlineAssets: true, //Adds the asserts inline

  },


  e2e: {

    setupNodeEvents(on, config) {

      require('cypress-mochawesome-reporter/plugin')(on);

    },

  },

});

In the above code

• charts: true – Genarates Chart in HTML report
• reportPageTitle: ‘Cypress Inline Reporter’- Report title will be set to the mentioned string
• embeddedScreenshots: true – Screenshot will be embedded within the report
• inlineAssets: true – No separate assets folder will be created

Additionally, if you want to change the report directory use the reportDir option  inside reporterOptions as seen below

For Example,

  "reportDir": "cypress/report",

Sample HTML Inline Report 

VS Code Explorer View for Reports folder

Note: The cypress-mochawesome-reporter, uses the Cypress before and after hook, if you override the before and after hook in your Cypress configuration file then the HTML report might not work in an expected way, Ensure that whenever you override the before/after hook you need to call beforeRunHook() or afterRunHook() functions of cypress-mochawesome-reporter as explained below.

//Example of overriding before and after hook with cypress HTML reporter

//cypress.config.js

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

      });

    },

  },

});

How to Generate Cypress HTML reporter for Below Cypress Version 9 and below

Note: Below tutorial works only for Cypress Version 9 or below

Pre-Requisite:

Set up basic Cypress Framework with Cypress Version 9 or below

How to use the Cypress HTML reporter for Cypress Version 9 and below

Step 1: Install  cypress reporter

Using Terminal install cypress-mochawesome-reporter, with command

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

Step 2: Configure Cypress HTML Reporter

Navigate to the cypress.json file

{

  "reporter": "cypress-mochawesome-reporter",

}

Step 3: Import cypress-mocha-awesome reporter

Navigate to cypress/support/index.js file and add the below line of code

import 'cypress-mochawesome-reporter/register';

Step 4: Add an entry to plugin/index.js

Step 5: Execute your tests using the below command

npx cypress run

Alternatively, you can also execute using npm run test, if you have configured scripts in package.json

Step 6: View HTML reports

Once the execution is complete, Cypress Generates the HTML report. Navigate to the folder with the name “reports”, you will find the HTML report

If you navigate to the reports folder, you can see the HTML file, along with that there are many other folders created such as screenshots, and asserts which are required for the HTML. 

If you need to share this report, then you need to share all the assets and screenshot folder as well, else the HTML reporter content will break. A simple solution for this is to create a report with in-line assets.

How to Create Simple Shareable HTML Reports in Cypress (Version 9 or below)

To create a shareable HTML report, you still need to follow Steps 1 to 3 mentioned in the previous section after that you need to follow the below step.

Navigate to Cypress Config File, cypress.json, and add the inline options

{

  "reporter": "cypress-mochawesome-reporter",

  "reporterOptions": {

    "embeddedScreenshots": true,

    "charts": true,

    "reportPageTitle": "Cypress Inline Report",

    "inlineAssets": true

  }

}

In the above code

• charts: true – Generates Chart in HTML report
• reportPageTitle: ‘Cypress Inline Reporter’ – Report title will be set to mentioned string
• embeddedScreenshots: true – Screenshot will be embedded within report
• inlineAssets: true – No separate assets folder will be created

Additionally if you want to change the report directory use the reportDir option  inside reporterOptions

Example:

  “reportDir”: “cypress/report”,

Example of  Inline Report

VSCode Explorer view reports folder

Note: cypress-mochawesome-reporter, uses the Cypress before and after hook, if you override the before and after hook in your Cypress configuration file, then the HTML report might not work in an expected way. Ensure that whenever you override the before/after hook you need to call beforeRunHook() and afterRunHook() functions of cypress-mochawesome-reporter as seen below.

//Overriding before and after hook

//cypress/plugins/index.js

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

  });

};

Cypress HTML reporter is helpful when you want to share with stakeholders, you can even integrate it with your CI/CD pipeline. Since it embeds the screenshots as well it is easy to debug and understand the failure scenarios.

BrowserStack is a cloud-based testing platform, that provides thousands of real devices for testing. BrowserStack records the videos and screenshots during the execution. Integrating Cypress Tests with BrowserStack requires only configuration changes, no need to change your test cases.