Interceptar peticiones de red con page.route()

La mayoría de las aplicaciones web son tan confiables como el backend con el que hablan. Cuando tus pruebas dependen de una API real, se vuelven lentas e inestables: el servidor puede estar caído, los datos pueden cambiar y los escenarios de error o de casos extremos son difíciles de reproducir a voluntad.

Playwright te permite tomar el control de ese tráfico de red. Con page.route() registras un manejador para las peticiones que coinciden con un patrón de URL, y dentro de ese manejador decides qué hacer: dejar pasar la petición (route.continue()), responder con tus propios datos (route.fulfill()) o hacerla fallar (route.abort()).

En esta primera lección empezamos suave: observamos la petición GET /customers que hace EngageSphere y la dejamos continuar hasta el servidor real, para poder ver exactamente qué pide la aplicación a medida que el usuario pagina y filtra.

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

test('loads the customers table', async ({ page }) => {
  await page.route('**/customers*', async (route) => {
    console.log('Request URL:', route.request().url())
    await route.continue()
  })

  await page.goto('/')

  await expect(page.getByRole('table')).toBeVisible()
})

Resumen de comandos 📖

test.describe

Agrupa casos de prueba relacionados bajo un título compartido, lo que mantiene la suite organizada y hace más fácil leer el reporte.

Sintaxis:

test.describe(title, () => { /* tests */ })

Ejemplo:

test.describe('EngageSphere', () => {
  // aquí van los hooks y las pruebas
})

test.beforeEach

Registra un hook que se ejecuta antes de cada prueba de su ámbito. Es ideal para los pasos de preparación que todas las pruebas comparten, como registrar una ruta y navegar a la página bajo prueba.

Sintaxis:

test.beforeEach(async ({ page }) => { /* ... */ })

Ejemplo:

test.beforeEach(async ({ page }) => {
  await page.goto('/')
})

test

Declara un único caso de prueba. Recibe un título y un callback asíncrono, y Playwright inyecta sus fixtures (como page) como argumento del callback.

Sintaxis:

test(title, async ({ page }) => { /* ... */ })

Ejemplo:

test('loads the customers table', async ({ page }) => {
  // aquí van arrange, act y assert
})

page.route()

Registra un manejador para cada petición cuya URL coincide con el patrón dado (una cadena glob, una expresión regular o una función predicado). El manejador recibe la route y puede inspeccionar route.request().

Sintaxis:

await page.route(urlPattern, handler)

Ejemplo:

await page.route('**/customers*', async (route) => {
  await route.continue()
})

👨‍🏫 Registra la ruta antes de navegar o de disparar la petición; de lo contrario, la petición podría salir antes de que exista el manejador.

route.continue()

Envía la petición interceptada al servidor real sin cambios. Úsalo cuando solo quieras observar (o ajustar levemente) una petición en lugar de simularla.

Sintaxis:

await route.continue()

Ejemplo:

await page.route('**/customers*', async (route) => {
  expect(route.request().method()).toBe('GET')
  await route.continue()
})

👨‍🏫 route.request() expone la url(), el method(), los headers() y el postData() de la petición interceptada, lo que resulta práctico para hacer aserciones.

route.request()

Devuelve el objeto Request de la petición interceptada, para que puedas hacer aserciones sobre sus detalles, como el método HTTP.

Sintaxis:

route.request()

Ejemplo:

await page.route('**/customers*', async (route) => {
  expect(route.request().method()).toBe('GET')
  await route.continue()
})

Contenido sugerido 📚

• Network - documentación oficial
• Mock APIs - documentación oficial
• page.route() - referencia de la API
• Route - referencia de la API

Ejercicio 🎯

Escribe una prueba que visite EngageSphere, intercepte la petición GET /customers con page.route() y la deje continuar hasta el servidor real. Verifica que la tabla de customers se vuelve visible. Dentro del manejador de la ruta, verifica que el método de la petición sea GET y registra su URL en el log para que puedas ver cómo cambia la cadena de consulta.

🙊 Usa el patrón glob '**/customers*' para que la ruta coincida sin importar el host exacto ni el segmento de ruta que use la aplicación desplegada.

👨‍🏫 Envuelve tus pruebas en un bloque test.describe (por ejemplo, titulado EngageSphere) y usa un hook test.beforeEach para registrar la ruta y navegar a la aplicación antes de cada prueba, así todas parten de la misma preparación.

Ejecuta la prueba en modo headed con npx playwright test --headed y observa cómo carga la tabla; después revisa tu terminal para ver la URL de la petición registrada.

Muéstrale al mundo lo que aprendiste 🌎

Para mostrarle a tu red profesional lo que aprendiste en esta lección, publica lo siguiente en LinkedIn.

Estoy haciendo el curso "Testing Web Avanzado con Playwright" con @Walmyr Lima e Silva Filho en la @Talking About Testing School, donde aprendí a interceptar y observar peticiones de red con el page.route() de Playwright. #TalkingAboutTesting #TATSchool #AdvancedPlaywrightWebTesting #Playwright

👨‍🏫 No olvides mencionarme en tu publicación. Aquí está mi perfil de LinkedIn.