Integración con CI
Ejecutar pruebas E2E en integración continua
Integración con CI es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
Por qué ejecutar pruebas E2E en CI
Las pruebas E2E son más valiosas cuando se ejecutan automáticamente en cada push o pull request. La Integración continua (CI) detecta regresiones antes de fusionar los cambios, de modo que un flujo de inicio de sesión defectuoso nunca llegue a producción sin que nadie lo advierta.
Qué necesita CI para ejecutar pruebas E2E
El trabajo de CI debe: instalar las dependencias, instalar los navegadores de Playwright, compilar o servir la aplicación de Angular y después ejecutar las pruebas en modo headless. Las máquinas de CI no tienen pantalla, por lo que las pruebas se ejecutan en modo headless de forma predeterminada.
Instalar navegadores en CI
Los navegadores no se incluyen en el repositorio. Instálelos en el pipeline con el instalador de Playwright, incluidas las dependencias del sistema operativo.
npm ci
npx playwright install --with-depsPermitir que Playwright inicie la aplicación
La configuración webServer indica a Playwright que inicie la aplicación antes de las pruebas y la cierre después. En CI, establezca reuseExistingServer: false para que siempre inicie un servidor nuevo.
// playwright.config.ts
export default {
webServer: {
command: 'ng serve --configuration production',
url: 'http://localhost:4200',
reuseExistingServer: !process.env.CI,
},
};Un workflow de GitHub Actions
Un workflow habitual obtiene el código, configura Node, instala las dependencias y los navegadores y, después, ejecuta la suite.
# .github/workflows/e2e.yml
name: e2e
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: 20 }
- run: npm ci
- run: npx playwright install --with-deps
- run: npx playwright testFlags de modo headless y CI
Playwright detecta automáticamente CI mediante la variable de entorno CI y ajusta su comportamiento: reintenta las pruebas fallidas, prohíbe test.only y usa más workers de forma controlada. También puede establecer los reintentos explícitamente.
export default {
retries: process.env.CI ? 2 : 0,
forbidOnly: !!process.env.CI,
};Publicar el informe HTML
Playwright genera un informe HTML. Súbalo como artefacto de CI para poder inspeccionar los fallos después de la ejecución, incluidos los traces y las capturas de pantalla.
- uses: actions/upload-artifact@v4
if: always()
with:
name: playwright-report
path: playwright-report/Capturar traces en caso de fallo
Configure los traces para que se registren solo en el primer reintento. Así las ejecuciones siguen siendo rápidas y obtiene una reproducción completa de cualquier fallo para depurarlo.
export default {
use: { trace: 'on-first-retry', screenshot: 'only-on-failure' },
};Fragmentar para aumentar la velocidad
Las suites grandes pueden dividirse entre varias máquinas en paralelo mediante --shard. Cada trabajo de CI ejecuta una parte, lo que reduce el tiempo total de ejecución.
npx playwright test --shard=1/3
npx playwright test --shard=2/3
npx playwright test --shard=3/3Usar caché para acelerar CI
Guarde en caché node_modules y los binarios de los navegadores de Playwright entre ejecuciones para que las instalaciones no dominen el tiempo de compilación. La mayoría de los proveedores de CI ofrecen una acción de caché cuya clave se basa en el lockfile.
Hacer que la compilación falle correctamente
Playwright termina con un código distinto de cero cuando falla alguna prueba, lo que hace que CI marque el trabajo en rojo y bloquee la fusión. No oculte ese código de salida con || true, o las pruebas defectuosas se aprobarán silenciosamente.
Comprobación rápida
¿Qué instala los navegadores en CI?
Resumen
Ejecute pruebas E2E en cada push instalando las dependencias y los navegadores (playwright install --with-deps), permitiendo que webServer inicie la aplicación y ejecutando las pruebas en modo headless con reintentos adaptados a CI. Suba el informe HTML y los traces como artefactos, fragmente la suite para aumentar la velocidad y permita que el código de salida distinto de cero bloquee las fusiones defectuosas.
Preguntas frecuentes
¿La lección «Integración con CI» es gratis?
Sí — el texto completo de «Integración con CI» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Integración con CI»?
Ejecutar pruebas E2E en integración continua Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Integración con CI»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Introducción a las pruebas E2E
- Escribir pruebas con Playwright
- Selectores y aserciones
- Integración con CI