DEV Community

Bushra Alam
Bushra Alam

Posted on • Edited on

Using Mochawesome Reporter with Cypress

#testing #cypress #javascript #tutorial

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
Enter fullscreen mode Exit fullscreen mode

  1. Install mochawesome

    

npm install mochawesome --save-dev

4. Install mochawesome-merge

    ```


    npm install mochawesome-merge --save-dev
Enter fullscreen mode Exit fullscreen mode

  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
        }
    }
Enter fullscreen mode Exit fullscreen mode

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"
  }
Enter fullscreen mode Exit fullscreen mode

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"
  }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

HTML Report

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

Latest comments (47)

Collapse
 
vmohir profile image
Vahid Mohammadi •

Helpful! thanks for this. but "for mac" and "for windows" is not an ideal way to configure npm scripts

Collapse
 
testuui profile image
Test •

Hi , when we create the mocha file should we keep it empty ! Or we past the script !

Collapse
 
purushothamjupudi_uhg profile image
Purushotham, J • • Edited

hello Bushra,, I have been facing this issue since few days, 'cypress-multi-reporters' modules do not get created under node folder, due to which i see an error Cannot find module '//node_modules/cypress-multi-reporters'

My cypress.json file
"reporter": "cypress-multi-reporters",
"reporterOptions": {
"reporterEnabled": "mochawesome",
"mochawesomeReporterOptions": {
"reportDir": "cypress/reports/mocha",
"quite": true,
"overwrite": false,
"html": true,
"json": true,
"reportTitle": "Test Results",
"reportFilename": "test-results",
"reportPageTitle": "My Test Suite",
"embeddedScreenshots": true
},

Can some one suggest whats the actual miss over here

Collapse
 
787681277 profile image
Lucy Lu •

When just one or more of tests fails,report seems to be generated twice (only on fail). Why?

Collapse
 
krisluminar profile image
Kris Luminar •

Given that npm run will automatically invoke posttest after you run npm run test, won't this code invoke posttest twice?

"posttest": "npm run combine-reports && npm run generate-report",
"test": "npm run scripts || npm run posttest"
Enter fullscreen mode Exit fullscreen mode
Collapse
 
cherif94 profile image
Cherif-94 •

Hi Bushra Alam
i Really appriciate your work <3 , Thanks for sharing
Enter fullscreen mode Exit fullscreen mode
Collapse
 
ktxxt profile image
Darko Riđić •

Great article and on point!

Everyone interested can take a look at this boilerplate for cypress -> github.com/optimumqa/cypress-boile...

It comes with top useful plugins already configured and with a mochawesome reporter.

Installation -> npx @optimumqa/cypress-boilerplate my-cypress-app

Collapse
 
qaengineer profile image
qaengineer •

Hello Bushra,

How do I add a charts and screenshots in the report?

Thanks

Collapse
 
benjaminpinto profile image
Benjamin Pinto •

Hi Bushra, thanks for the post! I have a doubt that's making me crazy: How 'pretest' is running, considering that 'test' command call only run scripts and posttest?

Collapse
 
dragod profile image
Fabio • • Edited

I had same problem on windows with "rm" command and "mkdir", there was no way to make it work, so instead I made a small script to handle this.

Add this js script to your "cypress" folder (create a new js file, call it whatever you want):

// Small script to make sure we always clean the report directory before running "npm run test"

const fs = require("fs");

const reports = './cypress/reports';
const mocha = 'mocha'
const mochareports = "mochareports"

let createReportDir = (dir1,dir2)  => {

    fs.mkdirSync(`${dir1}/${dir2}`, { recursive: true })

    console.log(`Created directory: ${dir1}/${dir2}.`);
}

// check if directory exists

if (fs.existsSync(reports))
{
    fs.rm(reports, { recursive: true }, (err) => {

        if (err)
        {
            throw err;
        }

        console.log(`Cleaning ${reports} directory.`);

        createReportDir(reports,mocha)
        createReportDir(reports,mochareports)

    });
}
else
{
    createReportDir(reports,mocha)
    createReportDir(reports,mochareports)
}
Enter fullscreen mode Exit fullscreen mode


`

Then call it in your package.json

`

"scripts": {
    "clean:reports": "node ./cypress/cypress-report-clean.js"
}
Enter fullscreen mode Exit fullscreen mode


``

View full discussion (47 comments)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.