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

Let’s Play with Cypress Feature “Test Replay”

Problem Statement Before Cypress v13, test failures in CI have historically been captured through screenshots, videos, and stack trace outputs, b
Read More

Handling Shadow DOM Using Cypress

The idea of componentization has completely changed how we design and maintain user interfaces in the field of web development. The advent of Shadow D
Read More

Gear up for upcoming Conferences of 2024! ✨✨

Gear up for our upcoming Conferences of 2024! ✨ ✨ #TheTestTribe #SoftwareTesting #Testers #Community #Worqference #Worqference2024 #QonfX 
Read More