Configurar reportes múltiples en Cypress te permite combinar la información de varios reporteadores en una sola salida visual y estructurada. Si automatizas pruebas y necesitas resultados claros para tu equipo o pipeline, esta guía te muestra cómo instalar, configurar y unificar reportes con Mocha Awesome y JUnit.

Por qué usar varios reporteadores en Cypress

Un solo reporteador rara vez cubre todo lo que necesitas. A veces te gusta el detalle visual de uno, pero requieres el formato estándar de otro para integrarlo a tu pipeline. Cypress resuelve esto con un plugin que permite ejecutar varios reporteadores al mismo tiempo.

¿Qué es cypress-multi-reporters? Es un plugin que habilita correr múltiples reporteadores en paralelo durante la ejecución de pruebas, para que obtengas distintos formatos de salida en una sola corrida.

Qué librerías necesito instalar

Para trabajar con reportes combinados, instala estos paquetes desde la terminal [01:00]:

• cypress-multi-reporters para habilitar múltiples reporteadores.
• mocha-junit-reporter para generar XML estándar JUnit.
• junit-report-merger para unificar varios XML en uno solo.
• mochawesome y mochawesome-merge para reportes HTML.
• mochawesome-report-generator para renderizar el HTML final.

Puedes instalarlos en una sola línea, aunque separarlos te ayuda a no confundirte cuando son muchos.

Cómo configuro el archivo de reporteadores en Cypress

Después de instalar, ve a tu archivo de configuración de Cypress y, fuera del bloque end to end, define el reporter como cypress-multi-reporters y pásale un reporterOptions que apunte a un archivo de configuración externo [02:30].

Ese archivo no existe todavía, así que créalo a la altura del directorio raíz con el nombre que indicaste en la configuración. Dentro vas a declarar qué reporteadores quieres habilitar y dónde guardar los resultados.

Qué incluye el archivo de configuración

La estructura típica define tres bloques:

• reporterEnabled con los reporteadores activos, por ejemplo mocha-junit-reporter y mochawesome.
• Las opciones del reporter JUnit, indicando la carpeta de salida para los XML.
• Las opciones de Mocha Awesome con reportDir, overwrite: false, html: false y json: true para que genere solo el JSON sin sobrescribir corridas previas.

Con esto, cada ejecución deja archivos independientes que después vas a unificar.

Cómo ejecuto y unifico los reportes generados

La documentación recomienda borrar resultados previos antes de cada corrida. Para eso conviene tener un comando deleteResults que elimine la carpeta de forma recursiva con la bandera -r. Sin ella, no borra el contenido interno [04:30].

Luego crea un script en tu package.json llamado report que ejecute Cypress pasando el reporter cypress-multi-reporters y el configFile con tu archivo de configuración. Al correrlo, verás que se genera una carpeta results con XML de JUnit y JSON de Mocha Awesome por cada feature ejecutado.

¿Por qué se generan tantos archivos JSON? Porque Mocha Awesome crea un archivo por cada spec o feature ejecutado. Para tener un reporte único hay que mezclarlos con mochawesome-merge.

Cómo genero el HTML con Mocha Awesome

Agrega otro script que use npx mochawesome-merge para combinar todos los JSON en uno solo, y luego pásalo por pipe a marge (abreviatura de mochawesome-report-generator) para que lo convierta en un HTML navegable [06:45].

Al ejecutarlo, la terminal te devuelve la ruta del reporte: mochawesome-report/mochawesome.html. Ábrelo y vas a ver:

• Listado de todas las pruebas ejecutadas.
• Filtros por estado passed, failed o pending.
• Detalle de cada paso dentro de cada prueba.
• Métricas resumidas de la corrida completa.

Es una vista limpia, fácil de compartir con stakeholders y mucho más entendible que un XML crudo.

Cuándo conviene usar JUnit en lugar de Mocha Awesome

JUnit no genera HTML, pero es un estándar de la industria para integraciones continuas. Si trabajas con Azure Pipelines, por ejemplo, puedes publicar el XML como artefacto y la plataforma lo reconoce automáticamente para renderizar los resultados dentro de tu pipeline [08:30].

Para unificar los múltiples XML que se generan, usa junit-report-merger en otro script de npm. Te devuelve un Combined Report con todos los resultados en un solo archivo XML, listo para subirlo a tu sistema de CI/CD.

¿Cuándo elijo JUnit y cuándo Mocha Awesome? Usa JUnit si tu pipeline necesita XML estándar para Azure, Jenkins o GitLab. Usa Mocha Awesome si buscas un reporte HTML visual para revisar manualmente o compartir con tu equipo.

Qué aprendiste sobre reportes combinados

Corriste dos reporteadores en paralelo, generaste un HTML con Mocha Awesome y mezclaste los archivos individuales en un reporte unificado tanto en formato visual como en formato estándar JUnit. Esa flexibilidad te deja listo para adaptarte a cualquier flujo, desde revisión local hasta integración en pipelines empresariales.

¿Qué reporteador prefieres tú: el formato visual de Mocha Awesome o la compatibilidad de JUnit con tu pipeline? Cuéntame en los comentarios cómo manejas tus reportes de Cypress.