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