Ahorra tiempo automatizando los tests e2e con playwright

¿Compruebas manualmente que tu aplicación web funciona correctamente tras cada despliegue? Deja de perder el tiempo y automatiza procesos usando tests end-to-end (e2e).

Cuando realizas cambios en tu aplicación web te tienes que asegurar que, como mínimo, los casos de uso más importantes funcionan. La mayoría de las veces este tipo de pruebas las realizamos de forma manual, lo que, sinceramente, es una pérdida de tiempo.

Si el producto es nuevo y pequeño, puedes iterar rápido y no tener ningún tipo de tests, pero conforme este producto crece, es más complejo y tedioso realizar la validación manual de la funcionalidad.

En mi caso me encuentro que paso de probar en apenas un minuto, a tener que revisar diferentes partes de mi aplicación manualmente y que son pocas pero tediosas. Puede parecer poco tiempo pero, si mides el tiempo de cada prueba y lo multiplicas por las veces que las realizas, te puedes llegar a sorprender. Es por esto que llegado el momento, te puedes benificar de los diferentes tipos de tests (unitarios, integración, end-to-end (e2e), aplicación, smoke-tests...).

¿Qué son los tests end-to-end (e2e)?

El objetivo de los tests end-to-end (e2e) es garantizar que todas las partes de la aplicación funcionen correctamente y en conjunto, desde la interfaz de usuario hasta la base de datos y los servidores. Evalúan la calidad de la aplicación en su conjunto, en lugar de solo verificar cada componente individualmente.

Hay diferentes herramientas en el mercado que te pueden ayudar, como Selenium, Cypress, Playwright... Personalmente he utilizado Cypress, y aunque me gusta tengo bastante hype por Playwright. Me apetece probarlo para ver qué tal las sensaciones y, al ser un pequeño proyecto muy simple, es el momento ideal.

¿Por qué empiezo por tests e2e?

Mi aplicación web es bastante simple y no tiene mucha lógica de negocio. Los tests unitarios no me aportan mucho ahora mismo, y necesito asegurarme que algunas partes de la web están operativas con ciertos datos. Es por ello que los tests e2e en mi caso son los ideales para garantizar que las partes más importantes de la web funcionan bien e interactúan de forma correcta unas con otras.

Así, con apenas unos tests creados en una tarde, garantizo la integridad de la web tras cada cambio sin apenas emplear mi tiempo, ejecutando un comando que se finaliza en segundos.

Configurando playwright en tu proyecto

Playwright es un framework open source (GitHub) desarrollado por Microsoft, para crear tests end-to-end (e2e) y automatizar procesos.

Abre tu proyecto de front, que tiene que tener node y npm, para instalar las dependencias. En este otro post te explico cómo instalar node con nvm.

npm init playwright@latest

Este comando te guiará para configurar la suit de tests:

• Nombre del directorio: por defecto te sugiere tests. Yo prefiero dejar tests para los unitarios y usar e2e para estos tests.
• Configurar GitHub Actions: te permite añadir automáticamente un job para ejecutar estos tests en GitHub. En mi caso los lanzo manualmente y prefiero configurarlo yo, por lo que rechazo (n).
• Instalar un navegador headless: sí. Esto es importante ya que sin esta dependencia, la suit de tests no podrá simular un navegador en el que ejecutar los tests. Puedes instalarlo más adelante con npx playwright install.

Ahora ya tienes todo lo necesario para poder ejecutar los tests. Te recomiendo realizar un par de ajustes que te facilitarán el uso: primero añade "test:e2e": "playwright test", en la sección scripts de tu fichero package.json. De esta forma podrás lanzar los tests e2e cómodamente con npm run tests:e2e.

Después, puedes cambiar los ajustes de playwright en el fichero playwright.config.ts. Hay dos parámetros importantes:

• baseUrl: establece la url de tu proyecto.
• timeout: añade un límite de tiempo para los tests. Muy útil para no tener que esperar en caso de error.

Ahora, añade un test simple como el que te muestro a continuación:

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

test('my first test', async ({ page }) => {
  await page.goto('/');

  await expect(page).toHaveTitle(/Hola, bienvenido a pirobits/);
});

En este test navego a la home y compruebo que exista un título con el contenido de mi blog 😉

Para probarlo ejecuta npm run test:e2e en tu terminal y listo. Ya tienes tu primer test configurado en tu proyecto, totalmente independiente de las herramientas y tecnologías que utilice tu web.

¿Qué te gustaría aprender a continuación? ¿Te gustaría un tutorial más completo?

Envíame un comentario desde el formulario de contacto para contarme tus necesidades, y no olvides suscribirte a la newsletter para estar atento cuando salga la siguiente parte 😉