# 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:

```bash
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

   ```javascript
   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:

```json
{
  "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.

```bash
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:

```bash
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**:

  ```bash
  npx cypress-reporter mochawesome-html
  ```

- **Merge JSON reports**:

  ```bash
  npx cypress-reporter merge-json
  ```

- **Generate CSV report**:

  ```bash
  npx cypress-reporter csv
  ```

- **Serve responsive report**:

  ```bash
  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:

```bash
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:

     ```bash
     npm cache clean --force
     ```

     Then, reinstall the package:

     ```bash
     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:

```bash
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](https://www.linkedin.com/in/mohamedsci/)  
  - [GitHub Profile](https://github.com/MohamedSci/)  
- **Repository**:  
  [GitHub Repository](https://github.com/MohamedSci/cypress-reportify)

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](https://github.com/MohamedSci/cypress-reportify).