Включение перехвата запросов

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

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

Включение перехвата запросов

Для начала перехвата запросов в Puppeteer необходимо выполнить несколько простых шагов:

  1. Открытие страницы.
  2. Включение перехвата сетевых запросов.
  3. Обработка и модификация запросов/ответов.

Пример включения перехвата запросов: 

const puppeteer = require(&

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

  // Включаем перехват запросов
  await page.setRequestInterception(true);

  page.on('request', (request) => {
    // Логируем запросы
    console.log('Запрос:', request.url());

    // Разрешаем запрос, если он не является изображением
    if (request.resourceType() === 'image') {
      request.abort();  // Блокируем изображения
    } else {
      request.continue();  // Разрешаем остальные запросы
    }
  });

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

Структура события request

Когда запрос перехватывается, Puppeteer предоставляет объект request, который содержит множество полезных данных, таких как:

  • url(): Возвращает URL запроса.
  • method(): Метод HTTP-запроса (например, GET, POST).
  • resourceType(): Тип ресурса, запрашиваемого (например, document, image, script).
  • postData(): Данные, передаваемые в теле запроса (если есть).
  • headers(): Заголовки HTTP-запроса.

Эти данные могут быть использованы для принятия решений о том, как обработать запрос. Например, можно блокировать определённые ресурсы, изменять заголовки запроса или записывать данные для последующего анализа.

Модификация запросов

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

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

page.on('request', (request) => {
  const headers = request.headers();
  headers['Authorization'] = 'Bearer your-token-here';  // Добавляем авторизационный токен
  request.continue({ headers });
});

В данном примере запросу добавляется заголовок Authorization. Это может быть полезно для тестирования авторизованных запросов.

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

Не только запросы можно перехватывать и изменять, но и ответы от сервера. Для этого необходимо использовать событие response. Оно позволяет перехватывать ответы, проверять их содержимое, а также изменять или блокировать их перед тем, как они будут отправлены на страницу.

Пример перехвата ответа: 

page.on('response', async (response) => {
  if (response.url().includes('api/data')) {
    const jsonResponse = await response.json();
    jsonResponse.data = 'new data';  // Модифицируем ответ
    response.body = JSON.stringify(jsonResponse);  // Устанавливаем изменённый ответ
  }
});

В этом примере перехватывается ответ от API, данные которого изменяются на «new data». Это может быть полезно для тестирования приложений, которые сильно зависят от данных, получаемых с сервера.

Подмена ответов с помощью response.respond()

Кроме того, Puppeteer предоставляет метод response.respond(), который позволяет полностью подменить ответ на серверный запрос. Это может быть полезно для тестирования в условиях, когда ответы сервера недоступны или необходимо эмулировать определённые серверные ошибки.

Пример подмены ответа: 

page.on('request', (request) => {
  if (request.url().includes('api/endpoint')) {
    request.respond({
      status: 404,
      body: JSON.stringify({ error: 'Not Found' }),
    });
  } else {
    request.continue();
  }
});

В данном примере для запроса, содержащего URL с подстрокой api/endpoint, подменяется ответ с ошибкой 404. Это может быть полезно для проверки обработки ошибок на стороне клиента.

Блокировка запросов

Одной из часто используемых возможностей перехвата запросов является их блокировка. Например, можно заблокировать все запросы к изображениям, сторонним скриптам или рекламе, чтобы сосредоточиться только на важной функциональности. Для этого используется метод request.abort().

Пример блокировки запросов к изображениям: 

page.on('request', (request) => {
  if (request.resourceType() === 'image') {
    request.abort();  // Блокируем все изображения
  } else {
    request.continue();  // Разрешаем остальные запросы
  }
});

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

Перехват запросов с учётом сети

В некоторых случаях может понадобиться эмуляция различных сетевых условий, таких как высокая задержка, потеря пакетов или ограниченная скорость соединения. Puppeteer поддерживает управление такими параметрами через page.setRequestInterception() и события, связанные с сетевыми запросами.

Пример изменения сетевых условий: 

await page.setViewport({ width: 1280, height: 800 });
await page.emulateNetworkConditions({
  offline: false,
  downloadThroughput: 100 * 1024, // 100 KB/s
  uploadThroughput: 10 * 1024,   // 10 KB/s
  latency: 100,  // 100 ms задержка
});

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

Завершение перехвата запросов

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

Пример отключения перехвата: 

await page.setRequestInterception(false);

Это отключит все перехваты запросов и вернёт страницу в обычное состояние.

Заключение

Перехват запросов в Puppeteer — это мощный инструмент для тестирования веб-приложений. Он предоставляет возможности для управления сетевыми запросами и ответами, их блокировки, подмены и модификации, что может быть использовано для создания тестов, эмуляции ошибок, улучшения производительности и более глубокого тестирования клиентской части приложения.

Оглавление