5. E2E

En esta ocasión nos centramos en E2E (End-to-End), el testing de más alto nivel en el desarrollo web. Ya no tocamos el código, sino sus resultados en el navegador.

El objetivo es emular la experiencia del visitante, generando un ratón y un teclado virtuales que navegan por cada rincón. Comprobamos si son visibles ciertas etiquetas HTML, si al pulsar un botón pasa lo que debe, si aparecen los mensajes correctos, si el formulario se envía. Todo se automatiza para tener una capa final donde, sin mirar el interior, comprobamos que todas las piezas trabajan en armonía. Si algún paso no es el esperado, se genera un informe con lo ocurrido.

Muchos frameworks E2E nacieron en el mundo JavaScript, pero desde Python tenemos una opción de primera: Playwright. Controla Chromium, Firefox y WebKit, se integra con pytest y es rápido de poner en marcha.

{: .advice } Otra herramienta popular es Selenium. No la usamos aquí porque su instalación es más engorrosa (requiere un driver nativo y pasos extra) y no fue pensada de origen para una capa de testing tan cómoda.

Instalar

Instalamos Playwright y su integración con pytest, y descargamos los navegadores:

pip install pytest-playwright
playwright install

Nuestro primer test

Marquémonos unos objetivos sencillos:

1. Ir a la página oficial de Emacs.
2. Comprobar que existe un título con el texto "GNU Emacs".
3. Pulsar en el enlace de Features (características).
4. Contar que existan 6 características.

Creamos un archivo test_emacs.py:

from playwright.sync_api import Page, expect


def test_emacs_features(page: Page):
    page.goto("https://www.gnu.org/software/emacs/")
    expect(page.locator("h1")).to_contain_text("GNU Emacs")
    page.click("a[href$='#features']")
    expect(page.locator(".features li")).to_have_count(6)

Lo ejecutamos:

pytest test_emacs.py

Playwright abrirá un navegador (por defecto sin ventana, en modo headless), hará todas las instrucciones a velocidad del rayo y, si todo cuadra, tendrás un bonito verde. Si algo falla, te avisará con el detalle de lo que esperaba y lo que encontró, e incluso puede guardar una captura y un vídeo del momento.

Otras comprobaciones interesantes

Buscar un texto dentro de una etiqueta

Si tuviéramos:

<h1 class="title">Bienvenido</h1>

Podríamos localizarla como si fuera un selector CSS:

expect(page.locator("h1.title")).to_contain_text("Bienvenido")

Contar elementos

expect(page.locator("li")).to_have_count(12)

Rellenar un formulario y enviarlo

page.fill("#input-name", "Julio el Probador")
page.fill("#input-email", "testing@prueba.com")
page.fill("#input-message", "Un mensaje de prueba largo y detallado.")
page.check(".disclaimer input[type='checkbox']")
page.click("input[type='submit']")

Esperar a que aparezca una clase tras pulsar

page.click("button[type='button']")
expect(page.locator(".alert")).to_have_class("alert alert--success")

Playwright espera automáticamente a que el elemento esté listo, así que rara vez tendrás que meter esperas fijas a mano.