Introducción

Si hablamos de Unit Testing seguramente te resulte familiar, ... Es lo que vamos haciendo para generar piezas robustas de código, ... Eso sí, piezas por separado, ¿Qué pasa cuando las juntamos?... pues que pueden surgir problemas, aquí podemos seguir avanzando y hablar de pruebas de integración, pero... ¿Y si pudiéramos ir un paso más allá? ¿Por qué no automatizar pruebas manuales con la aplicación real funcionando? Bienvenido al lado oscuro de QA 🤗.

Las pruebas de extremo a extremo (E2E) nos permiten probar aplicaciones web en tiempo real de forma automática, simulando la interacción de un usuario con la aplicación. En este tipo de pruebas, se simula un escenario de usuario y se verifica si la aplicación se comporta como se espera, si sabemos que casos clave implementar y que estos sean robustos, es una medida muy efectiva para evitar llevar a producción una aplicación defectuosa, o para no introducir una nueva característica y terminar rompiendo otra, todo esto sin tener que incurrir en el coste de realizar un testing manual (hoy en día, con la complejidad del software y las puestas en producción frecuentes no es planteable hacerlo de otra forma).

Una herramienta muy potente para realizar este tipo de pruebas es PlayWright (Microsoft),En este post vamos a ver como podemos configurar PlayWright en nuestro proyecto de Front para crear y ejecutar pruebas E2E automatizadas.

TL;DR;

PlayWright es una herramienta de automatización de pruebas de extremo a extremo que permite escribir pruebas en JavaScript, TypeScript y Python. Se basa en que tú interactúas mediante código con el navegador como lo haría un usuario real (haciendo clics, escribiendo texto, etc.) y después podemos comprobar los resultados de la interacción leyendo el DOM.
Playwright es una herramienta de pruebas de caja blanca. No conoce los detalles de tu código, esto significa que puedes probar cualquier aplicación web, independientemente de la tecnología que utilices.
Para usar Playwright:

• Necesitas instalarlo en tu proyecto.
• Configurarlo correctamente.
• Definir tus pruebas.
• Lanzarlas y esperar resultados.

¿Con ganas de entrar en detalle? Sigue leyendo...

Paso 1: Entendiendo PlayWright y e2e testing

Playwright es una herramienta de código abierto para la automatización de navegadores. Fue desarrollada por Microsoft y permite realizar pruebas E2E en múltiples navegadores (Chrome, Firefox, Safari) y dispositivos, todo en un solo código. Playwright se destaca por ser rápido, flexible y fácil de integrar en proyectos de frontend, especialmente en entornos de CI/CD.

Las pruebas E2E (End-To-End) simulan el flujo completo de un usuario en la aplicación, verificando que todos los componentes funcionen en conjunto. Este tipo de pruebas permiten identificar problemas de integración entre las distintas partes de la app (como el frontend, el backend y la base de datos) y aseguran que el usuario final tenga una experiencia sin errores.

Al entender la importancia de las pruebas E2E y cómo Playwright facilita su implementación, estamos listos para configurar nuestro proyecto y escribir nuestro primer test.

Paso 2: Instalando la herramienta

Asegúrate de que tienes Node.js y npm (o yarn) instalados en tu proyecto. A continuación, instala Playwright, mediante npm o yarn.

Teclea esto en la terminal de bash o ms-dos.

• npm:

npm init playwright@latest

• yarn:

yarn create playwright

Estas son las tres preguntas para la instalación:

Nombre de la carpeta donde crearás tus test. Utilice E2E, pero puedes poner lo que quieras.
√ Where to put your end-to-end tests? · E2E
Si quieres empezar usando GitHub Actions, es algo que siempre podrás hacer a futuro y posiblemente en este punto no sabes, mejor dejarlo en false.
√ Add a GitHub Actions workflow? (y/N) · false
Instala todos los navegadores, puedes hacerlo más tarde con el comando indicado.
√ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true

paso 3: Configurando PlayWright

• En el archivo playwright.config.ts en la raíz de tu proyecto. Vamos a añadir una constante con nuestra URL local del proyecto; añadiremos a la baseURL. Ahora en commando: por defecto viene start. Dependiendo de vuestro proyecto, ponéis lo que estéis utilizando, en mi caso es dev.
• Ejemplo:

playwright.config.ts

+ const BASE_URL = 'http://localhost:5173/';

  export default defineConfig({
    testDir: './E2E',
    fullyParallel: true,
    forbidOnly: !!process.env.CI,
    retries: process.env.CI ? 2 : 0,
    workers: process.env.CI ? 1 : undefined,
    reporter: 'html',
    use: {
   /* Base URL to use in actions like `await page.goto('/')`. */
+     baseURL: BASE_URL,
      trace: 'on-first-retry',
    },
  webServer: {
+   command: 'npm run dev',
-   url: 'http://127.0.0.1:3000',
+   reuseExistingServer: !process.env.CI,
   },

• En el archivo package.json en la raíz de tu proyecto. Vamos a añadir un script, para lanzar la ui de Playwright y ver los test.
• Ejemplo:

package.json

"scripts": {
+   "e2e": "playwright test --ui"
  },

paso 4: Creo mi primer test e2e

• Vamos a crear un pequeño test E2E, sencillo para ver que todo funciona correctamente. Dentro de la carpeta E2E/ creamos un archivo, en mi casi lo voy a llamar launch-mongodb-designer-link.spec.ts. Los nombres deben ser descriptivos. El test, lo que va a hacer es pulsar el botón de la pantalla de inicio. Nos llevará al editor de nuestro proyecto. Comprobaremos que hizo clic en el botón y nos llevó a la URL correcta.

En esta imagen, el test pulsa en Launch MongoDb Designer.

Nos llevaría a la siguiente página y comprobaría que la URL de dicha página es la correcta en el test.

• Este es el test

launch-mongodb-designer-link.spec.ts

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

test('navigates to and verifies MongoDB Designer URL', async ({ page }) => {
  await page.goto('');

  await page.getByRole('link', { name: 'Launch MongoDB Designer' }).click();
  await expect(page).toHaveURL('http://localhost:5173/editor.html');
});

• En la termina usamos el comando anteriormente creado en script. npm run e2e y se abrirá la ui de Playwright.

• Ahora podemos darle al botón play o la tecla F5 del teclado y lanza todos los test. Como podemos ver tiene el Check de éxito.

Repositorio de ejemplo

Te dejo un enlace al proyecto de github con la configuración completa:

Enlace al repositorio con el proyecto y su configuración completa

Conclusión

Configurar pruebas E2E con Playwright puede parecer un poco complejo al inicio, pero el esfuerzo vale totalmente la pena. Este tipo de pruebas te ayuda a asegurarte de que toda tu aplicación funcione bien de principio a fin, justo como la usaría un usuario real.

Con Playwright, puedes detectar problemas antes de que lleguen a los usuarios, ahorrarte dolores de cabeza y tener la tranquilidad de que todo está en su lugar en cada actualización. En resumen, contar con pruebas automatizadas te permite avanzar rápido y con confianza.

¡Así que no dudes en integrarlas! Tu código, tu equipo y tus usuarios te lo agradecerán.