Contenido del curso
Cookies y Localstorage
Emulando dispositivos
Instalando plugins
Flaky tests
Buenas prácticas
Visual testing
Seguridad
Data Driven Test
BDD
Reportes
Docker
Dashboard
CI/CD
Final
Cypress con Docker y exportación de reportes
Resumen
Integrar Cypress con Docker te permite ejecutar pruebas automatizadas en entornos aislados y reproducibles, exportar reportes y conectarlos a un pipeline de integración continua. Aquí aprenderás a configurar tu Dockerfile, evitar errores comunes en Mac M1 y extraer reportes con Docker Compose.
¿Qué necesitas en el Dockerfile para correr Cypress?
El primer paso es crear un Dockerfile que use una imagen oficial de Cypress compatible con tu procesador. Si trabajas en una Mac con chip M1, este detalle te puede ahorrar horas de depuración.
La imagen recomendada es la versión 16 de Cypress, porque es la más reciente con soporte para arquitectura M1. Versiones anteriores fallan en ese procesador y el error no siempre es claro.
¿Por qué falla Cypress en Mac M1 con Docker? Porque muchas imágenes de Cypress no tienen soporte nativo para la arquitectura ARM del chip M1. La solución es usar la imagen 16 o superior, que ya incluye compatibilidad.
Dentro del Dockerfile defines el directorio de trabajo con mkdir app y WORKDIR /app, y luego copias el contenido del proyecto con COPY . /app. Para no arrastrar dependencias innecesarias, creas un archivo .dockerignore que excluya node_modules, ya que se reinstalará dentro del contenedor [01:54].
¿Qué dependencias debes instalar manualmente para Cypress en Docker?
Algunas librerías que funcionan automáticamente en local fallan al correr dentro de un contenedor. Esto pasa especialmente con el preprocesador de Webpack.
Después de ejecutar npm install, conviene instalar de forma explícita estas librerías que la documentación marca como opcionales pero que en Docker resultan obligatorias:
@babel/core.@babel/preset-env.babel-loader.webpack.
También es buena práctica añadir npx cypress install como medida de seguridad. Aunque debería correr sin esa instrucción, hay casos donde el caché se limpia y Cypress no se detecta correctamente [03:35].
¿Para qué sirve npx cypress verify en Docker? Es un comando que confirma que Cypress se instaló correctamente dentro del contenedor antes de ejecutar las pruebas. Funciona como un health check previo.
Finalmente defines el comando que correrá al iniciar el contenedor con CMD ["npm", "run", "allure-report"], donde Allure genera los reportes visuales de tus pruebas.
¿Cómo construir y ejecutar la imagen de Docker?
Con el Dockerfile listo, vas a la terminal y ejecutas docker build . para construir la imagen. La primera vez tarda más porque descarga la imagen base e instala todas las dependencias.
Una vez construida, las pruebas corren dentro del contenedor. Pero queda una pregunta importante: ¿cómo sacas los reportes generados dentro de ese entorno aislado? Aquí entra Docker Compose.
¿Cómo exportar reportes de Cypress con Docker Compose?
Docker Compose te permite orquestar el contenedor y mapear volúmenes para que los archivos generados dentro del contenedor aparezcan en tu máquina local.
Creas un archivo docker-compose.yml con la versión 3.8, que es la más reciente y estable para esta configuración. Dentro defines:
- Un nombre para el servicio, por ejemplo
cypress-compose. - El contexto del build, apuntando al directorio actual.
- La ruta del Dockerfile.
- Un volumen que mapea
./docker-reportsa la ruta de resultados dentro de/app.
El volumen es la pieza clave: indica que la carpeta local docker-reports reflejará lo que se genere en app/allure-results dentro del contenedor [05:48].
¿Qué hace un volumen en Docker Compose? Crea un puente entre una carpeta de tu máquina y una carpeta dentro del contenedor. Lo que se escribe dentro aparece fuera, y viceversa.
Para ejecutar todo corres docker-compose up en la terminal. Verás el output de Cypress en tiempo real, incluyendo los videos y capturas de pantalla que se van guardando dentro del repositorio de la app.
¿Cómo visualizar los reportes generados desde Docker?
Cuando termina la ejecución, aparece la carpeta docker-reports en tu proyecto local con todos los resultados: capturas, videos y archivos de Allure.
Para abrirlos en el navegador ejecutas un comando como allure serve docker-reports, que levanta un servidor local con el reporte interactivo. Ahí ves qué pruebas pasaron, cuáles fallaron y todo el detalle visual del recorrido.
Esta configuración es especialmente útil cuando integras Cypress en un pipeline de CI/CD, porque puedes correr las pruebas en un runner con Docker y guardar los reportes como artefactos descargables.
Déjame en los comentarios cómo mejorarías esta imagen de Docker, qué optimizaciones aplicarías al Dockerfile o si ya has integrado Cypress en tus pipelines de despliegue.