QA Automation Labs

How to create a Mochawesome report in Cypress?

james-harrison-vpOeXr5wmR4-unsplash-564x360

How to create a Mochawesome report in Cypress?

Overview

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.

Solution

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

Features

  • 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

AI-Driven Testing with Applitools Autonomous

The demand for high quality software in the fast paced tech environment has never been greater. Since companies spend more on QA to make sure their pr
Read More

Visual Regression Testing Using Playwright

“Have you ever thought, ‘Why wasn’t that noticed?’ or ‘Is the bug so obvious that it should have been caught right away?
Read More

Cypress vs Selenium: Choosing the Best Tool for Your Automation Needs

Choosing the right testing tool for your project can be a challenging task. Two of the most widely used options are Cypress and Selenium, and understa
Read More