Cypress is built on top of Mocha and so it gets the mocha's bdd syntax, hooks and mocha reports. In this post we will be discussing about Mocha Reporters. Mocha provides a whole bunch of reporters to choose from. Some of the mocha built-in reporters are spec, dot matrix, nyan and json. These are good but not as awesome as the one we are going to discuss in this post: Mochawesome Reporter.

Mochawesome reporter is a custom reporter which generates a standalone HTML/CSS report to help visualize your test runs. It has simple, clean, and modern design. The report has filters to display only the tests you want and shows stack trace for failed tests.

Challenge in integrating Mochawesome Reporter with Cypress
Starting Cypress v.3.0.0 Cypress executes each spec in isolation and hence a separate test report is generated for each spec. This is a problem because we need one single report for the complete run (which include multiple specs).
Solution: mochawesome-merge can be used to merge these reports and then generate one HTML report for all your cypress tests.

We will be needing the following npm packages and so let's see what each of them does:

cypress-multi-reporters
Generate multiple mocha reports in a single mocha execution.

mochawesome
Mochawesome is a custom reporter for use with the Javascript testing framework, mocha. It runs on Node.js (>=8) and works in conjunction with mochawesome-report-generator to generate a standalone HTML/CSS report to help visualize your test runs.

mochawesome-merge
Merge several Mochawesome JSON reports.

mochawesome-report-generator (marge)
marge (moch*awesome-report-ge*nerator) is the counterpart to mochawesome, a custom reporter for use with the Javascript testing framework, mocha. Marge takes the JSON output from mochawesome and generates a full fledged HTML/CSS report that helps visualize your test suites.

Setup

Step 1: Installation

1. Install Mocha

   
   
   npm install mocha --save-dev
   

2. Install cypress-multi-reporters

    ```


    npm install cypress-multi-reporters --save-dev

1. Install mochawesome

   
   
   npm install mochawesome --save-dev
   

4. Install mochawesome-merge

    ```


    npm install mochawesome-merge --save-dev

1. Install mochawesome-report-generator

   
   
   npm install mochawesome-report-generator --save-dev
   

###Step 2: Add reporter settings in cypress.json

```json


"reporter": "cypress-multi-reporters",
    "reporterOptions": {
        "reporterEnabled": "mochawesome",
        "mochawesomeReporterOptions": {
            "reportDir": "cypress/reports/mocha",
            "quite": true,
            "overwrite": false,
            "html": false,
            "json": true
        }
    }

Step 3: Add scripts in package.json file

For Windows:

"scripts": {
    "clean:reports": "rmdir /S /Q cypress\\reports && mkdir cypress\\reports 
         && mkdir cypress\\reports\\mochareports",
    "pretest": "npm run clean:reports",
    "scripts": "cypress run",
    "combine-reports": "mochawesome-merge
         cypress/reports/mocha/*.json > cypress/reports/mochareports/report.json",
    "generate-report": "marge cypress/reports/mochareports/
         report.json -f report -o cypress/reports/mochareports",
    "posttest": "npm run combine-reports && npm run generate-report",
    "test" : "npm run scripts || npm run posttest"
  }

For Mac:

"scripts": {
    "clean:reports": "rm -R -f cypress/reports && mkdir cypress/reports 
         && mkdir cypress/reports/mochareports",
    "pretest": "npm run clean:reports",
    "scripts": "cypress run",
    "combine-reports": "mochawesome-merge
         cypress/reports/mocha/*.json > cypress/reports/mochareports/report.json",
    "generate-report": "marge cypress/reports/mochareports/
         report.json -f report -o cypress/reports/mochareports",
    "posttest": "npm run combine-reports && npm run generate-report",
    "test" : "npm run scripts || npm run posttest"
  }

pretest script would create the report folders and clear them if they already exist

test script would do the following:
a. run your test suite
b. create 'mocha' folder under 'cypress/reports'
c. create .json files (one for each spec executed) in the 'mocha' folder

posttest script would combine all the .json files present in 'cypress/reports/mocha' folder and place the combined file 'report.json' in 'cypress/reports/mochareports' and create a beautiful html report.

Execution

It's time to run test suites and view report.

npm run test

Pre and post scripts are automatically executed before and after the main script execution.

You can find a sample project here: https://github.com/bushralam/Cypress