Pruebas E2E con TypeScript: Guía completa para desarrolladores

¿Tu aplicación funciona? Demuéstralo con pruebas E2E en TypeScript

¿Alguna vez has escuchado la frase: «Todo funciona, lo probamos manualmente»? ¿Y al día siguiente, se cae en producción? ¿Te suena, verdad? Las pruebas manuales son como leer el futuro en posos de café. Nunca sabes si harás clic en ese botón que romperá todo el flujo del usuario.

Las pruebas E2E (End-to-End) con TypeScript son tu ingeniero de QA digital que no duerme, no toma café y verifica cada botón las 24 horas del día, los 7 días de la semana. En este artículo no solo te contaremos qué son las pruebas E2E. Las escribiremos juntos: desde la instalación hasta un pipeline de CI/CD real. ¡Abróchate el cinturón, será intenso y útil!

¿Por qué TypeScript para pruebas E2E?

Podría parecer que las pruebas E2E se pueden escribir en cualquier lenguaje: JavaScript, Python, incluso Java (pero no hablemos de cosas tristes). Sin embargo, TypeScript te da un superpoder: el tipado estático. Ya no tendrás que lidiar con errores como Cannot read property 'click' of undefined en tiempo de ejecución. Tu IDE te marcará el error incluso antes de ejecutar la prueba.

Además, si tu aplicación está escrita en TypeScript (y hoy en día el 90% de los equipos lo hace), es lógico escribir las pruebas en el mismo lenguaje. Usas los mismos tipos, las mismas interfaces, las mismas utilidades. Esto reduce la carga cognitiva y acelera el desarrollo.

Eligiendo la herramienta: Playwright vs Cypress

El mercado de herramientas E2E para TypeScript no es grande, pero hay dos líderes claros: Cypress y Playwright. Nosotros usaremos Playwright. ¿Por qué?

• Soporte multi-navegador desde el inicio: Chromium, Firefox, WebKit (Safari). Cypress aún no funciona bien con Safari.
• Velocidad: Playwright funciona a través del protocolo DevTools, no mediante un servidor proxy, lo que hace las pruebas más rápidas.
• Trabajo con iframes y pestañas: Playwright no impone restricciones para trabajar con múltiples pestañas o iframes de dominios cruzados.
• TypeScript first: Playwright está escrito en TypeScript y lo soporta completamente.

Pero si eres principiante, Cypress puede ser más fácil para empezar. La decisión es tuya. Nosotros vamos a la batalla con Playwright.

Instalación y configuración del proyecto

Creemos un nuevo proyecto e instalemos Playwright. Abre la terminal y ejecuta:

mkdir e2e-typescript-guidecd e2e-typescript-guidenpm init -ynpm install @playwright/testnpx playwright install

El último comando descargará los navegadores (Chromium, Firefox, WebKit). Esto tomará un par de minutos: ve por un café.

Creemos el archivo playwright.config.ts en la raíz del proyecto:

import { defineConfig } from '@playwright/test';

export default defineConfig({  testDir: './tests',  fullyParallel: true,  retries: 1,  use: {    baseURL: 'http://localhost:3000',    trace: 'on-first-retry',  },  projects: [    {      name: 'chromium',      use: { browserName: 'chromium' },    },  ],});

Configuramos la URL base (cámbiala por la dirección de tu aplicación), habilitamos la traza para depuración e indicamos que las pruebas estarán en la carpeta tests.

Escribiendo la primera prueba E2E en TypeScript

Crea la carpeta tests y el archivo login.spec.ts. Supongamos que tenemos un formulario de inicio de sesión simple.

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

test.describe('Autenticación de usuario', () => {  test('Inicio de sesión exitoso con datos correctos', async ({ page }) => {    // Paso 1: Abrimos la página de inicio de sesión    await page.goto('/login');

    // Paso 2: Rellenamos los campos    await page.getByLabel('Email').fill('user@example.com');    await page.getByLabel('Contraseña').fill('securepassword123');

    // Paso 3: Hacemos clic en el botón "Iniciar sesión"    await page.getByRole('button', { name: 'Iniciar sesión' }).click();

    // Paso 4: Esperamos la redirección al panel de control    awai