El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este módulo, aprenderás cómo Playwright te permite interceptar y simular solicitudes de red. Esta funcionalidad es crucial para probar cómo tu aplicación maneja diferentes escenarios de red, como respuestas lentas, errores del servidor o datos específicos que deseas simular.

Conceptos Clave

Intercepción de Solicitudes de Red: Permite capturar y modificar solicitudes y respuestas de red durante la ejecución de tus pruebas.
Simulación de Respuestas: Puedes simular diferentes tipos de respuestas de servidor para probar cómo tu aplicación maneja estas situaciones.
Manipulación de Datos de Red: Cambiar datos en las solicitudes o respuestas para probar diferentes escenarios.

Interceptando Solicitudes de Red

Playwright proporciona una API para interceptar solicitudes de red. Puedes usarla para modificar las solicitudes antes de que se envíen o las respuestas antes de que lleguen a tu aplicación.

Ejemplo de Intercepción de Solicitudes

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  // Interceptar solicitudes
  await page.route('**/*', (route) => {
    const request = route.request();
    console.log(`Intercepted request: ${request.url()}`);
    route.continue();
  });

  await page.goto('https://example.com');
  await browser.close();
})();

Explicación del Código:

page.route('**/*', callback): Intercepta todas las solicitudes de red. El patrón '**/*' indica que se interceptarán todas las solicitudes.
route.request(): Obtiene la solicitud que está siendo interceptada.
route.continue(): Permite que la solicitud continúe sin modificaciones.

Simulación de Respuestas

Puedes simular respuestas de red para probar cómo tu aplicación maneja diferentes escenarios.

Ejemplo de Simulación de Respuestas

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  // Simular una respuesta
  await page.route('https://example.com/api/data', (route) => {
    route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({ data: 'Simulated data' }),
    });
  });

  await page.goto('https://example.com');
  // Aquí podrías verificar cómo tu aplicación maneja la respuesta simulada
  await browser.close();
})();

Explicación del Código:

route.fulfill(): Responde a la solicitud con datos simulados.
status: Código de estado HTTP de la respuesta simulada.
contentType: Tipo de contenido de la respuesta.
body: Cuerpo de la respuesta simulada.

Ejercicios Prácticos

Ejercicio 1: Interceptar y Modificar una Solicitud

Objetivo: Interceptar una solicitud a una API y modificar su encabezado antes de que se envíe.

Instrucciones:

Intercepta una solicitud a https://example.com/api/data.
Modifica el encabezado Authorization para incluir un token ficticio.
Permite que la solicitud continúe.

Solución:

await page.route('https://example.com/api/data', (route) => {
  const headers = {
    ...route.request().headers(),
    'Authorization': 'Bearer fake-token',
  };
  route.continue({ headers });
});

Ejercicio 2: Simular un Error del Servidor

Objetivo: Simular un error 500 del servidor para una solicitud específica.

Instrucciones:

Intercepta una solicitud a https://example.com/api/data.
Responde con un error 500 y un mensaje de error.

Solución:

await page.route('https://example.com/api/data', (route) => {
  route.fulfill({
    status: 500,
    contentType: 'application/json',
    body: JSON.stringify({ error: 'Internal Server Error' }),
  });
});

Errores Comunes y Consejos

Error al Interceptar: Asegúrate de que el patrón de la URL en page.route() coincida con la solicitud que deseas interceptar.
Simulación Incorrecta: Verifica que el contentType y el body de la respuesta simulada sean correctos para evitar errores en la aplicación.

Conclusión

La intercepción de red y la simulación son herramientas poderosas en Playwright que te permiten probar cómo tu aplicación maneja diferentes escenarios de red. Practicar con estas técnicas te ayudará a crear pruebas más robustas y confiables. En el próximo módulo, exploraremos cómo trabajar con múltiples páginas y marcos en Playwright.

Intercepción de Red y Simulación

Conceptos Clave

Interceptando Solicitudes de Red

Ejemplo de Intercepción de Solicitudes

Simulación de Respuestas

Ejemplo de Simulación de Respuestas

Ejercicios Prácticos

Ejercicio 1: Interceptar y Modificar una Solicitud

Ejercicio 2: Simular un Error del Servidor

Errores Comunes y Consejos

Conclusión

Playwright con TypeScript: De Principiante a Avanzado

Módulo 1: Introducción a Playwright y TypeScript

Módulo 2: Comenzando con Playwright

Módulo 3: Fundamentos de Playwright y TypeScript

Módulo 4: Funciones Avanzadas de Playwright

Módulo 5: Estrategias de Automatización de Pruebas

Módulo 6: Técnicas Avanzadas de TypeScript

Módulo 7: Aplicaciones Reales de Playwright

Módulo 8: Conclusión del Curso y Próximos Pasos