Configuración de Playwright, pruebas End-To-End (E2E) paso a paso en un proyecto de Front End.

Introducción

¿Qué son las pruebas End-To-End y por qué la usaría en mi proyecto?

¿Qué herramienta voy a usar para hacer mis pruebas End-To-end?

TL;DR;

Para configurar Playwright en mi proyecto front.

• Instala las herramientas necesarias: Instalar Playwright, es una magnífica herramienta para hacer test E2E.

• Configura Playwright: Facilita que las pruebas sean robustas y asegura que la aplicación funcione correctamente en diferentes entornos, mejorando la calidad del software.

¿Quieres saber más en detalle? Sigue leyendo...

E2E son pruebas que verifican el funcionamiento de una aplicación de principio a fin. Con el objetivo de asegurarse de que todos los componentes trabajen en conjunto como se espera.

Las pruebas E2E simulan el recorrido completo de un usuario dentro de una aplicación, así ayuda a detectar problemas en la integración entre diferentes sistemas y a garantizar una experiencia consistente.

Paso 1: Instalación de dependencias

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 2: Configurar playwright.config.ts package.json

• 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 2: Prueba la configuración

• 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');
});

paso 3: Lanzar la ui de Playwright y ver pasar el test

• 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.