Анализ сетевого трафика

Playwright предоставляет мощный API для работы с браузерами, который включает в себя инструменты для анализа сетевого трафика. Эта возможность позволяет тестировщикам отслеживать запросы и ответы, происходящие при взаимодействии с веб-страницей, что полезно для отладки, тестирования производительности или проверки безопасности. В этом разделе рассматриваются ключевые моменты работы с сетевым трафиком в Playwright.

Основы анализа сетевого трафика

Для того чтобы начать работать с сетевым трафиком, Playwright предоставляет несколько ключевых функций, которые позволяют следить за сетевыми запросами и их ответами, фильтровать их по определённым критериям и собирать полезную информацию о производительности приложения.

Playwright предоставляет объект page, который используется для навигации и взаимодействия с веб-страницей. Для мониторинга сетевого трафика используется объект browserContext и метод on('route'), который позволяет перехватывать запросы на уровне маршрута. Также можно использовать метод on('response') для обработки ответов.

Настройка прослушивания сетевых запросов

Для того чтобы начать анализировать сетевой трафик, необходимо настроить прослушивание сетевых запросов. Для этого используется событие route, которое позволяет перехватывать и изменять запросы.

Пример настройки прослушивания сетевого трафика:

const { chromium } = require('playwright');

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

  // Перехват всех запросов
  page.on('route', (route, request) => {
    console.log(`URL запроса: ${request.url()}`);
    console.log(`Метод запроса: ${request.method()}`);
    route.continue();
  });

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

В этом примере настроено прослушивание всех сетевых запросов, которые будут выполняться на странице. Метод route.continue() позволяет продолжить выполнение запроса, но также можно использовать метод route.abort(), чтобы отменить запрос, или метод route.fulfill(), чтобы вручную отправить ответ.

Работа с ответами от сервера

Кроме того, что можно перехватывать и изменять запросы, Playwright позволяет работать с ответами от сервера с помощью события response. Это событие предоставляет доступ к объекту Response, который содержит информацию о статусе ответа, его теле и заголовках.

Пример обработки ответа от сервера:

const { chromium } = require('playwright');

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

  page.on('response', async (response) => {
    console.log(`Статус ответа: ${response.status()}`);
    console.log(`URL: ${response.url()}`);
    const body = await response.body();
    console.log(`Тело ответа: ${body.slice(0, 100)}...`); // выводим первые 100 байтов
  });

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

Здесь мы перехватываем каждый ответ и выводим его статус, URL и часть тела ответа. Это полезно для анализа того, как сервер отвечает на запросы, а также для отладки.

Фильтрация запросов

Playwright позволяет фильтровать запросы по различным критериям, например, по URL, методу запроса или типу контента. Фильтрация полезна, если нужно отслеживать только определённые виды трафика (например, только API-запросы или изображения).

Пример фильтрации по URL:

const { chromium } = require('playwright');

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

  page.on('route', (route, request) => {
    if (request.url().includes('api')) {
      console.log(`API запрос: ${request.url()}`);
    }
    route.continue();
  });

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

В данном примере перехватываются только те запросы, URL которых содержит подстроку api.

Работа с запросами и ответами асинхронно

Сетевые запросы в Playwright выполняются асинхронно, что позволяет тестировщикам собирать статистику или анализировать запросы в реальном времени. Для работы с асинхронными запросами можно использовать Promise или методы с async/await.

Пример асинхронной обработки запросов:

const { chromium } = require('playwright');

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

  page.on('response', async (response) => {
    if (response.status() === 200) {
      const body = await response.body();
      console.log(`Ответ от сервера: ${body.slice(0, 100)}...`);
    }
  });

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

Этот пример ожидает получения успешного ответа (статус 200) и выводит его тело. Асинхронная обработка позволяет работать с большим количеством данных, не блокируя основной поток выполнения теста.

Перехват и модификация запросов

Одним из мощных инструментов является возможность изменять запросы, отправляемые на сервер. Это может быть полезно для тестирования различных сценариев, таких как отправка ошибочных данных или изменение заголовков.

Пример перехвата и модификации запроса:

const { chromium } = require('playwright');

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

  page.on('route', (route, request) => {
    if (request.url().includes('login')) {
      const newPostData = { username: 'testuser', password: 'testpassword' };
      route.continue({
        postData: JSON.stringify(newPostData),
      });
    } else {
      route.continue();
    }
  });

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

В этом примере при перехвате запроса, отправляющего данные на сервер для входа, изменяются параметры тела запроса (username и password). Такой подход позволяет моделировать различные ситуации для тестирования.

Логирование и сохранение сетевых данных

Сетевые данные можно записывать в файл или выводить в консоль для дальнейшего анализа. Это полезно при тестировании производительности, сборе статистики о задержках или при необходимости хранить лог запросов для дальнейшей диагностики.

Пример логирования запросов в файл:

const fs = require('fs');
const { chromium } = require('playwright');

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

  page.on('route', (route, request) => {
    fs.appendFileSync('network_log.txt', `${request.method()} ${request.url()}\n`);
    route.continue();
  });

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

Здесь каждый перехваченный запрос записывается в файл network_log.txt, что позволяет сохранить информацию о сетевом трафике.

Заключение

Анализ сетевого трафика в Playwright открывает множество возможностей для тестирования и отладки веб-приложений. Возможность перехватывать, изменять и анализировать запросы и ответы помогает в поиске ошибок, повышении производительности и тестировании безопасности. Используя функционал Playwright для работы с сетевыми запросами, можно значительно улучшить процесс тестирования, сделав его более гибким и точным.