# Configurando Reportes

Cypress está construido sobre **Mocha,** por lo que obtiene toda la sintaxis para generar reportes muy útiles para nuestros proyectos.

La librería **Mocha** ofrece varios reportes que se ejecutan después de que termina una ejecución de Cypress. En este tutorial utilizaremos la dependencia llamada **Mochawesome Reporter** para generar un informe del resultado final de las pruebas en formato HTML / CSS.

### Instalación de Mochawesome Reporter

Nos ubicamos en la carpeta del proyecto donde está instalado Cypress, y ejecutamos los siguientes comandos para instalar varias dependencias importantes para que **Mochawesome Reporter** se ejecute correctamente.

1. Instalar **Mocha** 

```
npm install mocha --save-dev
```

2\. Instalar **cypress-multi-reporters**

```
npm install cypress-multi-reporters --save-dev
```

3\. Instalar **mochawesome**

```
npm install mochawesome --save-dev
```

4\. Instalar **mochawesome-merge**

```
npm install mochawesome-merge --save-dev
```

5\. Instalar **mochawesome-report-generator**

```
npm install mochawesome-report-generator --save-dev
```

Una vez todas las dependencias están instaladas, deben quedar configuradas correctamente en el archivo **package.json**

![Configuración del archivo package.json](/files/-M8NAYx4XIz1pS1vgEVm)

### Configuración de Mochawesome Reporter

Una vez todas las dependencias se encuentran instaladas, el siguiente paso es configurar el archivo **package.json** para ejecutar unos scripts automáticos para que el reporte de las pruebas se guarden correctamente.

En la sección de **scripts** se debe pegar los siguientes comandos:

```
"clean:reports": "rm -R -f cypress\\reports && mkdir cypress\\reports && mkdir cypress\\reports\\mochareports",
"pretest": "npm run clean:reports",
"scripts": "cypress run",
"combine-reports": "mochawesome-merge cypress/reports/mocha/*.json > cypress/reports/mochareports/report.json",
"generate-report": "marge cypress/reports/mochareports/report.json -f report -o cypress/reports/mochareports",
"posttest": "npm run combine-reports && npm run generate-report",
"test": "npm run scripts || npm run posttest",
"cypress:open": "cypress open"
```

Rápidamente vamos a explicar esta configuración para que **Mocha Awesome** se ejecute correctamente:

1. **"clean:reports"** este comando nos permite borrar los reportes de la carpeta **reports** cada vez que se ejecuta una prueba de Cypress, es muy útil para tener siempre la carpeta limpia y evitar que se acumule los reportes.
2. **"pretest"** este comando ejecuta automáticamente el auto clean y crea las carpetas de los reportes.
3. **"combine-reports"** este comando combina los reportes .json que genera mocha.
4. **"generate-report"** este comando genera los reportes en HTML / CSS que genera la librería Mochawesome.
5. **"posttest"** este comando ejecuta el script npm para combinar los reportes .json con los assets de la prueba Cypress.
6. **"test"** este comando genera todos los scripts de las dependencias de Mochawesome Report.

Una vez todos los scripts están configuradas, deben visualizarse correctamente en el archivo **package.json**

![Configuración del archivo package.json](/files/-M8NEAENrdQjlyb724lK)

### Configuración del archivo Cypress.json

Finalmente, el último paso será configurar el archivo **cypress.json**  donde está explicita la configuración de Mochawesome Reporter dentro de Cypress. Para esto vamos a pegar la siguiente información

```
{
    "reporter": "cypress-multi-reporters",
    "reporterOptions": {
        "reporterEnabled": "mochawesome",
        "mochawesomeReporterOptions": {
            "reportDir": "cypress/reports/mocha",
            "quite": true,
            "overwrite": false,
            "html": false,
            "json": true
        }
    }
}
```

La configuración del archivo cypress.json se debe visualizar de la siguiente manera:

![Configuración del archivo cypress.json](/files/-M8NFOttmHqw87-jhVbI)

### Ejecutando Mochawesome Reporter

Una vez toda nuestra configuración está completa, es tan simple como ejecutar el siguiente comando en nuestra linea de comando.

```
npm run test
```

Recuerde que el comando anterior ejecuta Cypress en modo Headless, es decir, sin entorno visual, solamente en la consola.

Para verificar el archivo HTML que genera los reportes de Mochawesome nos dirigimos a la carpeta donde encontraremos el archivo **report.html**

```
cypress\reports\mochareports\report.html
```

Finalmente, ya podemos visualizar los reportes de las pruebas ejecutadas por Cypress.

![Reporte visual de las pruebas ejecutadas por Cypress](/files/-M8NGuKh05_tKDR1Tb0_)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://douglasfugazi.gitbook.io/introduction-to-cypress/cypress/configurando-reportes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.