Mocha Reports Generation with Cypress

Table of contents

Reading Time: 3 minutes

In our previous blogs, we have already talked about the introduction of cypress, how to install cypress, writing our first test with cypress, and so on. This blog is all about Mocha Reports Generation with cypress.
In every project as a QA, we may encounter many situations where we need to create QA metrics or the test case execution report and share it with our client to show some visibility of the project progress at the end of the sprint.

So Mocha Reports Generation will be our agenda for this blog, we will discuss how we can generate Mocha reports with cypress.

As we already know that Cypress is built on mocha, this means we can use mocha reporters for generating reports with Cypress.

Required Plugins for Mocha Reports:

For generating Mocha reports firstly we need to install these basic plugins into our current working directory.

$ npm install --dev mocha
$ npm install --dev mochawesome
$ npm install --dev mochawesome-merge

Mocha Reports Generation with Cypress:

Only installing these plugins is not sufficient, we also need to add these reporters in our configuration file(cypress.json) and we need to add these as dependencies and devDependencies(package.json)

"devDependencies": {
    "cypress": "^4.7.0",
    "mocha": "7.2.0",
    "mochawesome": "6.1.1",
    "mochawesome-merge": "4.1.0",
    "mochawesome-report-generator": "5.1.0"
  },
  "dependencies": {
    "mocha": "7.2.0"
  }
}

 "reporter":"mochawesome",
  "reporterOptions":{
    "reportdir":"cypress/report/mochawesome-report",
    "overwrite":false,
    "html":true,
    "json": false,
    "timestamp":"mmddyyyy_HHMMss" 
  }

let’s discuss what these values stand for :

“reporter“: reporter we are including.
“reportdir“: the location where our reports will be stored after execution.
“overwrite“: whether we want to overwrite the generated reports.
“html“: whether we want to generate the Html report or not.
“json“:whether we want to generate the JSON report or not.
“timestamp“: it appends the current date-time with the report name.

After setting up the config file and package.json file we are all set to generate the Mocha reports.

We can run the cypress run command for executing the cypress tests and generating Mocha report.

npx cypress run  // for running all the spec.js files togather.
npx cypress run --spec "cypress/integration/e-commerce-flow.spec.js" // for running a single spec.js file.