Sign Up

Sign In

Forgot Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

You must login to ask question.

Please briefly explain why you feel this question should be reported.

Please briefly explain why you feel this answer should be reported.

Using Mochawesome Reporter with Cypress 10+

How to use Mochawesome Reporter with Cypress 10+

#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 are 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
    
  3. Install mochawesome
    npm install mochawesome --save-dev
    
  4. Install mochawesome-merge
    npm install mochawesome-merge --save-dev
    
  5. Install mochawesome-report-generator
    npm install mochawesome-report-generator --save-dev
    

Step 2: Add reporter settings in cypress.config.js or cypress.config.ts

"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.

HTML Report


For more blogs, click here

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

Related Posts

Cypress to perform a file upload

Cannot find name 'Cypress'

Draw a line using Cypress

Parallelizing Cypress with Jenkins

Leave a comment

You must login to add a new comment.