Angular Academy · Lección

Introducción a las pruebas E2E

Comprender el papel de las pruebas end-to-end

Introducción a las pruebas E2E es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 1 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.

Qué significa probar de extremo a extremo

Las pruebas de extremo a extremo (E2E) ejercitan la aplicación como lo haría un usuario real: la inician en un navegador real, navegan por las páginas, hacen clic en botones, escriben en formularios y comprueban lo que es visible. Verifican que toda la pila funciona conjuntamente, no solo una unidad.

La pirámide de pruebas

Un conjunto de pruebas saludable contiene muchas pruebas unitarias rápidas, menos pruebas de integración y un pequeño grupo de pruebas E2E lentas pero de gran valor. Las E2E se sitúan en la parte superior: ofrecen la mayor cobertura por prueba, pero también son las más costosas de ejecutar y mantener.

Unitarias: una función o componente de forma aislada
Integración: varias unidades conjuntamente
E2E: la aplicación en ejecución de principio a fin

Qué detectan las E2E y no las unitarias

Las pruebas E2E detectan problemas que solo son visibles cuando se conectan piezas reales: errores de enrutamiento, una integración con la API defectuosa, un DOM que falta después de una implementación, CSS que oculta un botón o un bucle de redirección de autenticación. Las pruebas unitarias con dependencias simuladas pueden pasar mientras la aplicación real está rota.

Historia de Angular y las E2E

Las versiones antiguas de Angular incluían Protractor para las E2E. Protractor quedó obsoleto y se eliminó de los proyectos nuevos. Actualmente, Angular CLI permite elegir un ejecutor E2E de terceros; Playwright y Cypress son las opciones más populares.

Por qué Playwright

Playwright es un framework E2E moderno y rápido de Microsoft. Controla Chromium, Firefox y WebKit, espera automáticamente a que los elementos estén listos, aísla las pruebas mediante contextos de navegador nuevos y ofrece excelentes herramientas de depuración. Este curso utiliza Playwright.

Añadir Playwright a Angular

Puede configurar Playwright con su propio instalador. Este crea un playwright.config.ts y una carpeta de pruebas de ejemplo.

npm init playwright@latest
# creates playwright.config.ts and tests/ with example specs

Anatomía de una prueba E2E

Una prueba E2E inicia la aplicación, realiza acciones de usuario y comprueba la página. El flujo es: preparar (navegar), actuar (interactuar) y comprobar (verificar el resultado visible).

import { test, expect } from '@playwright/test';

test('home shows title', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading')).toHaveText('Welcome');
});

Las E2E se ejecutan contra un servidor real

Las E2E necesitan que su aplicación Angular esté realmente en ejecución. Normalmente, la configuración inicia ng serve (o sirve una compilación de producción) y dirige las pruebas a esa URL mediante baseURL y una entrada webServer.

// playwright.config.ts
export default {
  use: { baseURL: 'http://localhost:4200' },
  webServer: { command: 'ng serve', url: 'http://localhost:4200', reuseExistingServer: true },
};

Mantenga pequeñas y esenciales las suites E2E

Como las pruebas E2E son lentas y pueden ser inestables, cubra únicamente los recorridos de usuario esenciales: inicio de sesión, pago y el flujo principal satisfactorio. Traslade los casos límite detallados a las pruebas unitarias y de integración, donde se ejecutan de forma más rápida y fiable.

Inestabilidad y determinismo

El mayor desafío de las E2E es la inestabilidad: pruebas que fallan de forma intermitente. Evite los retrasos fijos de sleep; confíe en las aserciones con espera automática de Playwright. Controle los datos de prueba para que cada ejecución comience desde un estado conocido.

E2E frente a pruebas de componentes

Las pruebas de componentes de Angular (TestBed) comprueban un componente en un entorno sintético. Las E2E comprueban la aplicación implementada en un navegador real. Son complementarias: use TestBed para comprobaciones rápidas de lógica y DOM, y las E2E para confirmar que todo el producto funciona.

Comprobación rápida

¿Qué distingue las pruebas E2E de las pruebas unitarias?

Resumen

Las pruebas E2E ejecutan toda la aplicación en un navegador real para detectar errores de integración y enrutamiento que las pruebas unitarias no detectan. Se sitúan en la parte superior de la pirámide de pruebas: son pocas, lentas y de gran valor. Actualmente, los proyectos Angular utilizan ejecutores como Playwright, que inician el servidor y ejecutan recorridos de usuario esenciales.

Preguntas frecuentes

¿La lección «Introducción a las pruebas E2E» es gratis?

Sí — el texto completo de «Introducción a las pruebas E2E» 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 «Introducción a las pruebas E2E»?

Comprender el papel de las pruebas end-to-end 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 1 de 4.

¿Cuánto tiempo toma la lección «Introducción a las pruebas E2E»?

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

← Volver a Angular Academy