Mochawesome Responsive Report

A responsive and interactive HTML report viewer for Cypress Mochawesome CSV reports. This report allows users to view, filter, and interact with detailed test case results from their Cypress automation runs.

Features

• Interactive Search: Quickly filter results by entering search queries in the input field.
• Show/Hide Columns: Customize your view by toggling the visibility of specific columns.
• Column Sorting: Easily sort each column in ascending or descending order to organize the test results.
• Pagination: Browse through test results with a built-in paginator that allows users to navigate through large datasets efficiently.
• Responsive Design: The HTML report adapts to different screen sizes and devices, providing a consistent viewing experience.

Usage

To view the Mochawesome Responsive Report, follow these steps:

1. Generate the Report: First, generate the CSV report using the cypress-mochawesome-csv-united-report package. Ensure that your Cypress JSON reports are located in the cypress/reports folder of your project.

2. Install Required Packages: Install the cypress-mochawesome-csv-united-report package by running the following command:

   npm install cypress-mochawesome-csv-united-report

3. Run the Server: After generating the report, start the server to view it in your browser. Run the following command in the terminal:

   node node_modules/mochawesome_responsive_report/src/index.js

   This will start a local server, and the report will be available at:

   http://localhost:3210

4. View the Report: Open the URL in your browser to see the HTML report, which will include the following interactive components:

   • Search Input: A search box to filter results by entering specific queries.
   • Show/Hide Columns: A control panel that allows users to toggle the visibility of each column.
   • Column Sorting: Click on the headers of each column to sort the data in ascending or descending order.
   • Paginator: A navigation control that allows users to browse through multiple pages of test results.

Cypress Mochawesome CSV United Report

To generate the customized CSV file that this report displays, use the cypress-mochawesome-csv-united-report package. This package merges all the JSON reports created by Cypress into a single CSV file that is used to generate the HTML report.

Installation

Install cypress-mochawesome-csv-united-report:

npm install cypress-mochawesome-csv-united-report

Usage of Cypress Mochawesome CSV United Report

• Once installed, you can generate a CSV report by running the following command:

npx cmur

Command Breakdown

• cmur: This will merge all the JSON files located in the cypress/reports directory and create a CSV report.

Usage of Our Package

1. Place your Cypress Mochawesome JSON reports in the cypress/reports folder of your project.
2. Run the cypress-mochawesome-csv-united-report command to merge all the reports into a single CSV file.

The generated CSV file will contain the following columns:

Column Headers

These are the specific column headers used in the CSV report:

• time: Timestamp when the test case was executed.
• suite: Name of the test suite the test case belongs to.
• test_case: The name or description of the test case.
• duration: The total time taken to execute the test case.
• speed: The speed category for the test execution (e.g., fast, slow).
• state: The final state of the test (e.g., passed, failed).
• pass: Indicates whether the test passed.
• fail: Indicates whether the test failed.
• pending: Indicates whether the test is pending.
• context: Additional context related to the test case execution.
• code: The code or command executed in the test case.
• err: Error details if the test failed.
• isHook: Boolean indicating whether the test is a hook.
• skipped: Boolean indicating whether the test was skipped.

HTML Report Components

The generated HTML report includes several key features:

1. Search Input:

• Allows users to filter the displayed results based on keywords. The search dynamically updates the displayed table, showing only the relevant test cases that match the search query.

2. Show/Hide Columns:

• Users can toggle the visibility of specific columns in the report, making it easier to focus on the details that matter most to them. This can be helpful when dealing with large sets of test data.

3. Column Sorting:

• Each column in the report can be sorted either in ascending or descending order. This functionality is useful for organizing test cases by time, duration, status (pass/fail), or any other relevant attribute.

4. Paginator:

• For large test suites, the results are divided into multiple pages. The paginator at the bottom of the report allows users to navigate between pages, ensuring that the report remains readable and easy to browse.