Monitoreo de red de Playwright y pruebas de API

Este capítulo explica cómo monitorear el tráfico de red del navegador y cómo usar Playwright para realizar pruebas de API independientes.

Escuchar solicitudes y respuestas de red

page.on('request'): escuchar solicitudes

Ejemplo

test('Monitorear solicitudes de red', async ({ page }) => {
  const requests = [];

  // Escuchar todas las solicitudes
  page.on('request', request => {
    requests.push({
      url: request.url(),
      method: request.method(),
      postData: request.postData(),
    });
  });

  await page.goto('https://www.example.com/');

  // Imprimir todas las solicitudes
  console.log('La página realizó un total de ', requests.length, ' solicitudes');
  requests.forEach(r => console.log(r.method, r.url));
});

page.on('response'): escuchar respuestas

Ejemplo

test('Monitorear respuestas de red', async ({ page }) => {
  page.on('response', async response => {
    // Solo prestar atención a las respuestas de API
    if (response.url().includes('/api/')) {
      console.log('Código de estado de API:', response.status());
      console.log('API URL:', response.url());
    }
  });

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

page.waitForResponse(): esperar una respuesta específica

Ejemplo

test('Esperando a que se complete la respuesta de API', async ({ page }) => {
  // Antes de hacer clic en el botón, preparar la escucha de la respuesta de API
  const responsePromise = page.waitForResponse(
    response => response.url().includes('/api/search') && response.status() === 200
  );

  // Activar la búsqueda
  await page.getByPlaceholder('Buscar tutorial de EJEMPLO').fill('Playwright');
  await page.keyboard.press('Enter');

  // Esperar la respuesta de API
  const response = await responsePromise;
  const data = await response.json();

  // Verificar los datos devueltos por la API
  expect(data.results.length).toBeGreaterThan(0);
});

Escucha de mensajes de consola

Ejemplo

test('Escuchar errores de consola', async ({ page }) => {
  const consoleErrors = [];

  // Escuchar mensajes de consola
  page.on('console', msg => {
    if (msg.type() === 'error') {
      consoleErrors.push(msg.text());
    }
  });

  await page.goto('https://www.example.com/');

  // Verificar que la página no tenga errores de JavaScript
  expect(consoleErrors).toHaveLength(0);
});

Tipo ConsoleMessage

TipoMétodo correspondiente
'log'console.log()
'error'console.error()
'warning'console.warn()
'info'console.info()
'debug'console.debug()

Pruebas de API (request fixture)

El fixture de Playwrightrequestte permitesin pasar por el navegadorenviar solicitudes HTTP directamente.

Esto es muy adecuado para preparar o limpiar el estado del servidor antes y después de las pruebas.

Enviar una solicitud GET

Ejemplo

test('Solicitud GET de API', async ({ request }) => {
  const response = await request.get('https://jsonplaceholder.typicode.com/posts/1');

  // Verificar el estado de la respuesta
  expect(response.status()).toBe(200);

  // Obtener datos JSON
  const data = await response.json();
  expect(data.id).toBe(1);
  expect(data).toHaveProperty('title');
});

Enviar una solicitud POST

Ejemplo

test('Solicitud POST de API', async ({ request }) => {
  const response = await request.post('https://jsonplaceholder.typicode.com/posts', {
    data: {
      title: 'Tutorial de EJEMPLO',
      body: 'Ejemplo de prueba de API con Playwright',
      userId: 1,
    },
  });

  expect(response.status()).toBe(201);

  const data = await response.json();
  expect(data.title).toBe('Tutorial de EJEMPLO');
});

Configurar baseURL y encabezados de autenticación

Ejemplo

// Ruta del archivo: playwright.config.ts
export default defineConfig({
  use: {
    // URL base para las solicitudes de API
    baseURL: 'https://api.example.com',

    // Encabezados de solicitud predeterminados
    extraHTTPHeaders: {
      'Authorization': 'Bearer YOUR_API_TOKEN',
      'Accept': 'application/json',
    },
  },
});

Pruebas combinadas de API + navegador

En proyectos reales, a menudo se usa API para la gestión de estado antes y después de interactuar con el navegador.

Ejemplo

test('Preparación de datos con API + verificación en el navegador', async ({ request, page }) => {
  // Paso 1: Crear un dato de prueba mediante la API
  const response = await request.post('/api/todos', {
    data: { title: 'Tarea de prueba de EJEMPLO', completed: false },
  });
  const todo = await response.json();

  // Paso 2: Verificar en el navegador que los datos se muestran
  await page.goto('/todos');
  await expect(page.getByText('Tarea de prueba de EJEMPLO')).toBeVisible();

  // Paso 3: Limpiar los datos mediante la API
  await request.delete(`/api/todos/${todo.id}`);
});

Las pruebas de API son mucho más rápidas que las operaciones del navegador y son adecuadas para la preparación y limpieza de datos. Combinar API con operaciones del navegador puede mejorar en gran medida la eficiencia y fiabilidad de las pruebas.

Otras extensiones