Cypress – generating mochawesome reports

#react #cypress #javascript #testing

When using Cypress for testing applications, there are some reports you get out of the box. Those are video recording of test and if test fails, screenshot in the moment it fails. Quite often, that is not enough. You want some HTML output for report. That is what I will cover in this post. You will get step by step guide on how to generate report with mochawesome for e2e tests. If you are brand new to Cypress, you can read into on how to set it up in this article.

Installation

Let’s start with required packages you will need to generate mochawesome reports. First package you will need is mochawesome, which you can get by executing:

npm install --save-dev mochawesome

At this moment, there are some issues with mocha that were supposed to be solved in Cypress version 4. Sadly, they haven’t, but it can be solved by installing older version of mocha by executing:

npm install --save-dev mocha@^5.2.0

Setup

Once you install required dependencies, you need to do some configuration to use it. You can generate these reports by using reporter flag when running tests.
Example

cypress run --reporter mochawesome

Usually you do not want to add those flags to CLI commands. Just makes everything less clear. Therefore, we will add configuration to our cypress.json file. When you run cypress first time, this file will be generated in root folder of your project and in initial version it just contains empty object. To define which reporter to use, we will need to add reporter property.

{
  "reporter": "mochawesome"
}

This will generate mochawesome-report folder containing our report looking like one in an image bellow.

More often, we want to configure some options. So first, let’s add some charts for our test suits. We can configure that in reporterOptions property. This property is object containing different reporter configurations. To generate charts, add charts property with value true.

{
  "reporter": "mochawesome",
  "reporterOptions": {
    "charts": true
  }
}

These are not great charts, but they do give sense on passing and failing tests.

You can generate report in few different outputs, HTML and JSON. Maybe you just want to use this default display, then you can just use HTML. But if you want to build something custom, then you could export JSON, and use those data to generate your own reports. This you can control by setting flags of desired output to true.

{
  "reporter": "mochawesome",
  "reporterOptions": {
    "html": true,
    "json": true
  }
}

Output location and name of report is something that also can be configured in this file. We can do that by using reportDir and reportFilename fields.

{
  "reporter": "mochawesome",
  "reporterOptions": {
    "charts": false,
    "html": true,
    "json": true,
    "reportDir": "cypress/reports",
    "reportFilename": "report"
  }
}

Mochawesome generates new report for every spec we have. And since by default it overwrites old reports, this means it will only keep last test spec run. This we can fix by setting overwrite flag to false. Changing this flag to false would just generate new file at each run. So you should delete old ones before running, manually or by using some script.

{
 “reporter”: “mochawesome”,
 “reporterOptions”: {
   “charts”: false,
   “html”: true,
   “json”: true,
   “reportDir”: “cypress/reports”,
   “reportFilename”: “report”,
   “overwrite”: true 
 }
}

If we would run this, we would get separate report for every spec file. This is something that usually we don’t want to do, and we can merge them into single report by using mochawesome-merge npm package. As I prefer keeping articles smaller, I will be covering that in separate article.

Code examples for this setup you can find at my Github repository.