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

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

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

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