Cypress and getting a single report for all suites

In my last post, I described how to set up mochawesome reports for Cypress tests. However, I also mentioned at the end of it a problem. It generates a separate file for every test suit. In this post, I describe how to solve that problem and have just one report containing all test results.

Installation

For this, you need new npm dependencies. That is mochawesome-merge package, which you can download by running the next CLI command:

npm install mochawesome-merge --save-dev

This command takes multiple JSON outputs and creates one containing all. I know you might want an HTML report, but first, we need to create JSON to generate HTML from it.

Running tests

Let's first run tests. Because mochawesome generates a separate report for each test suite, we need to disable overwrite in report options for cypress. Also, we need to enable only JSON format because we need to merge those.

// cypress.json
{
 "reporter": "mochawesome",
 "reporterOptions": {
   "charts": true,
   "overwrite": false,
   "html": false,
   "json": true,
   "reportDir": "cypress/report/mochawesome-report"
  }
 }

We can do all that with the configuration above. Also, it saves reports in cypress/report/mochawesome-report folder because of the reportDir property. After running it, we get files like mochawesome.json, mochawesome_001.json, and other similar, one for every test suite.

Merging reports

Now that we have generated reports for all suites, we can merge them into a single one. We can do this by executing in CLI following command.

mochawesome-merge cypress/report/mochawesome-report/*.json > cypress/report/output.json

Command mochawesome-merge is from the npm package, so you have to add it to npm scripts or install it globally. I recommend the first option. As the first parameter of command, we are giving the location of all generated reports, in this case, cypress/report/mochawesome-report/*.json. The second is where to save it. In this case, it is the output.json file in cypress/report folder. Input files and the output file should not be in the same location. Otherwise, the generating step fails.

Generating HTML

Once we have our JSON report containing all results, we can convert it to HTML. This step, we can do by executing another CLI command.

marge cypress/report/output.json --reportDir ./ --inline

Marge is not a typo; it is the actual command coming from mockawesome report generator. The first parameter is the results JSON file. The second one is the location where to output it relative to the results file. The last parameter I added is inline. It means adding all assets, CSS, and JS, inline in the HTML file. The reason for this is because I had a hard time controlling URL values for assets. Just adding them inline was much simpler.

Handling old files and overwrite

For this setup to work, you need to have the overwrite flag set to false. However, the side effect of it means that on the next run, it would just keep old report files and generate new ones next to it. That is not what we want. Before each run, we would want to delete old ones. I tried different options, but the best one I found was creating a custom NodeJS script and running it before the test run. You can use the following code for it.

// deleteReports.js
 const fs = require("fs");
 fs.rmdirSync("./cypress/reports", {recursive: true});

Running as npm scripts

Usually, you want to run all these steps through package.json scripts tasks. You could have one task for each step and then separate tasks running them all in order. Like that, you can name tasks the way you want and not repeat all arguments each time.

Wrap up

There are a few things to be careful about when adding mochawesome reports. Like this one, it is generating a separate report for each suite and overwriting old ones if set. But I do hope that with this guide, you got enough information on how to set process properly for yourself.
You can find code for this setup in my Github Cypress setup repository.

For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.