Cypress Reportify

Author: Mohamed Said Ibrahim
License: Apache-2.0

Description

Cypress Reportify is a versatile reporter designed to simplify and enhance Cypress test reporting by combining the power of Mochawesome, CSV reports, and a responsive HTML interface. It provides developers with detailed insights into their Cypress tests in various formats, including HTML, JSON, and CSV, while also merging multiple reports and serving a responsive dashboard for easier analysis.

This reporter is designed to be flexible and extendable, making it easier to integrate into your Cypress projects and improve your reporting capabilities.

Features

• Mochawesome Report Generation: Automatically generates detailed HTML and JSON test reports using Mochawesome.
• CSV Report Generation: Converts Cypress test results into easy-to-read CSV files.
• JSON Report Merging: Merges multiple JSON reports into a single file for more comprehensive analysis.
• Responsive Dashboard: A responsive HTML dashboard to display test results in a more accessible manner.
• Command-Line Integration: Includes a simple CLI to run all reports with a single command.
• Easy Integration: Can be easily integrated into any Cypress project with minimal configuration.
• Error Handling: Robust error handling to ensure smooth operation and proper logging.

Installation

You can install the package using npm:

npm install cypress-reportify --save-dev

Ensure that your Cypress project is properly set up before installing this reporter.

Usage

Once the package is installed, you can easily use the reporter in your Cypress project. Below are the basic steps:

1. Configuration in Cypress

Update your cypress.config.js file to include the proper reporter configuration

module.exports = {
  e2e: {
    reporter: 'mochawesome',
    reporterOptions: {
      reportDir: 'cypress/reports',
      overwrite: false,
      html: false,
      json: true
    },
  },
};

Instead for Old Cypress Version Update your cypress.json file to include the proper reporter configuration

In your cypress.json file, configure Cypress to use Cypress Reportify by setting it as the reporter:

{
  "reporter": "cypress-reportify",
  "reporterOptions": {
    "reportDir": "cypress/reports",
    "overwrite": false,
    "html": true,
    "json": true
  }
}

2. Running Tests with the Reporter

Simply run your Cypress tests as you normally would, and Cypress Reportify will automatically generate the reports.

npx cypress run

3. Generating All Reports

To generate all reports (HTML, JSON, CSV) and serve the responsive report dashboard, use the command-line tool provided by the package:

npx cypress-reporter

This command will:

• Generate the Mochawesome report.
• Merge all JSON reports.
• Generate the HTML report.
• Generate the CSV report.
• Serve the responsive report dashboard.

You can customize your reporting directory by changing the reportDir in the Cypress configuration.

4. Manually Generating Reports

If you want to manually generate specific reports, you can use the respective scripts from the CLI:

• Generate Mochawesome HTML report:

  npx cypress-reporter mochawesome-html

• Merge JSON reports:

  npx cypress-reporter merge-json

• Generate CSV report:

  npx cypress-reporter csv

• Serve responsive report:

  npx cypress-reporter serve

5. Testing the Reporter

The package includes a set of tests to verify its functionality. After installation, you can run the tests using:

npm test

Example Directory Structure

Below is a possible directory structure for your Cypress project after integrating Cypress Reportify:

.
├── cypress/
│   ├── integration/
│   └── reports/
│       ├── mergedReport.json
│       ├── mochawesome-report/
│       ├── csv-report.csv
│       └── responsive-dashboard/
├── node_modules/
├── cypress.json
├── package.json
└── README.md

If You have Errors while Installing or Running:

Such as: The error message indicates that Node.js cannot find the cli.js file for the cypress-reporter command. This could be due to a couple of reasons:

• Incorrect Caching: Sometimes, npm might cache incorrectly. Try clearing the npm cache:

  npm cache clean --force

  Then, reinstall the package:

  npm install cypress-reportify

• Global vs. Local Installation: If you installed cypress-reportify globally (using -g flag), you might need to use the full command path (e.g., node_modules/.bin/cypress-reporter). However, using local installations within your project directory is generally recommended.

2. Running cypress-reportify:

The package.json already defines a script named cypress-reporter that should run the report generation functionality. You can use this instead of the full command:

npx cypress-reporter

This will execute node src/generate-report.js, which is the intended entry point for report generation.

Additional Tips:

• Check File Paths: Double-check the paths in your package.json to ensure they are accurate relative to your project structure.
• Project Setup: Verify that you've run npm install after adding cypress-reportify as a dependency to include it in your project's node_modules folder.

By following these steps and considering the alternative approaches for running the reporter, you should be able to successfully generate reports using cypress-reportify.

Ownership

• Author: Mohamed Said Ibrahim
  • LinkedIn Profile
  • GitHub Profile
• Repository:
  GitHub Repository

This project is maintained by Mohamed Said Ibrahim and licensed under the Apache-2.0 license, meaning you are free to use, modify, and distribute the software with the proper attribution.

For any issues, questions, or contributions, feel free to open an issue on the GitHub repository.