QA Automation Labs

How to create a Mochawesome report in Cypress?


How to create a Mochawesome report in Cypress?


Purpose of this document is to describe the implementation of the Mochawesome custom reporter in the project.

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

It provides a custom HTML report so you can easily see the test results and filter which of your tests pass or fail.

Problem Statement

Integrating reporting tool that provides cypress test case’s execution report. Currently, we are relying on cypress’ own report for test case execution status.


Analyzed some of the custom reports that can easily integrate as per our project structure, and finally, found the Mocawesome reporting tool as the best fit for test case reporting

Required DEV Dependencies IN (Package.json)

Moca, Mochawesome, Mochawesome-merge

Step 1:

Update package.json under the scripts section with the followings lines

Step 2:

Update package.json with the following dependency

Step 3:

Update cypress.json with the following lines

Step 4:

Now run yarn run cy:test-mocha-report on command prompt by locating the project

Folder > Mochareports> Report.html Generated

When we run command yarn run test-mocha-report, under mochareports “report.html” is generated

Mochawesome Report

When we click on report.html below report is generated

Failed Test case Screenshot

Test Case Execution Report Details

In the above report on the right side, there is a detail of the Test case

  • Total time is taken by all of the test cases
  • No. of the test suite
  • Total test cases under the test suite
  • Passed test cases
  • Failed test cases


  • Simple, clean, and modern design
  • Beautiful charts (via ChartJS)
  • Support for test and suite nesting
  • Displays before and after hooks
  • Review test code inline
  • Stack trace for failed tests etc

Leave a Comment

Your email address will not be published. Required fields are marked *

Recent Posts


Mocking API Response In Cypress

What is Mocking ? Mocking, in a broader software development and testing context, is a technique used to simulate the behavior of certain components o
Read More

Cypress 13 Integration With BDD/Cucumber & POM

Problem Statement After Cypress version 10, there are some changes needed to integrate Cucumber/BDD with Cypress effectively. In this blog post, we wi
Read More

Running End-to-End Cypress Test cases in a Google Cloud Pipeline

Cypress is an end-to-end testing framework that is used to test web applications. It is an open-source JavaScript-based framework that enables de
Read More