Cypress – merging multiple mochawesome reports

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 separate file for every test suit. In this post I will describe how to solve that problem and have just one report containing all test results.

Installation

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

npm install mochawesome-merge --save-dev

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

Running tests

Let’s first run tests. Because mochawesome generates separate report for each test suite, we will need to disable overwrite in report options for cypress. Also, we need to enable only JSON format, because we will be running merge on 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 configuration above. Also, it will save reports in cypress/report/mochawesome-report folder because of reportDir property. After running it, we will get files like mochawesome.json, mochawesome_001.json and so on, one for every test suite we have.

Merging reports

Now that we have generated reports for all suites, we can merge them into 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 npm package, so you will have to add it to npm scripts or install it globally. I recommend first option. As first parameter of command we are giving location of all generated reports, in this case cypress/report/mochawesome-report/*.json. Second is where to save it. In this case it is output.json file in cypress/report folder. Input files and output file should not be in same location, otherwise, generating step will fail.

Generating HTML

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

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

Marge is not a typo; it is actual command coming from mockawesome report generator. First parameter is results JSON file. Second one is location where to output it relative to results file. Last parameter I added is inline. It means to add all assets, CSS and JS, inline in HTML file. Reason for this is because I personally had 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 overwrite flag set to false. However, side effect of it means that on next run it would just keep old report files and generate new ones next to it. This is not what we want. Before each run, we would want to delete old ones. I tried different options, but best one I found was creating custom NodeJS script and running it before test run. Following code can be used 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 task 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 few things to be careful about when adding mochawesome reports. Like that it is generating 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.

Code for this can be found in my Github Cypress setup repository.

Comments

[Robert Dale Morris]

updated with cy-report-setup-helper : dev.to/cssoldiervoif/cypress-mocha... :) this package does the work for you!