Мониторинг сетевой активности

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

Подписка на сетевые события

Инструментарий включает события request, response и requestfailed. Это даёт возможность фиксировать запросы, контролировать их параметры и сопоставлять с полученными ответами. Каждый объект request предоставляет метод url(), тип ресурса через resourceType(), HTTP-метод и заголовки. Объект response содержит статус, заголовки, тип контента и тело. 

page.on(&
  console.log('Запрос:', request.url(), request.resourceType());
});

page.on('response', async response => {
  console.log('Ответ:', response.url(), response.status());
});

Фиксация данных о неудачных запросах помогает обнаруживать сетевые и серверные проблемы: 

page.on('requestfailed', request => {
  console.log('Ошибка запроса:', request.url(), request.failure());
});

Анализ тел ответов

Доступ к телу ответа полезен при тестировании REST-API и динамической подгрузки данных. Ответ может быть получен в виде текста, JSON или бинарного содержимого: 

page.on('response', async response => {
  if (response.url().includes('/api/data')) {
    const json = await response.json();
    console.log('Данные API:', json);
  }
});

При работе с большими объёмами данных важно учитывать влияние ожиданий на скорость выполнения тестов.

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

Возможность управления запросами даёт гибкость для эмуляции серверных сценариев, подмены данных и изоляции тестов. Функция page.setRequestInterception(true) включает режим перехвата. Запрос может быть пропущен, отклонён или модифицирован. 

await page.setRequestInterception(true);

page.on('request', request => {
  if (request.url().endsWith('.png')) {
    return request.abort();
  }
  request.continue();
});

Подмена полезна при создании детерминированных тестов: 

page.on('request', request => {
  if (request.url().includes('/api/data')) {
    return request.respond({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({ value: 42 })
    });
  }
  request.continue();
});

Сбор сетевой метрики и производительности

Анализ временных характеристик выявляет задержки при загрузке ресурсов и нестабильность API. Пара request.timing() и response.fromCache() помогают отслеживать использование кэша и длительность передачи. 

page.on('response', async response => {
  const timing = response.request().timing();
  console.log('Время DNS:', timing.domainLookupEnd - timing.domainLookupStart);
  console.log('Время загрузки:', timing.responseEnd - timing.requestStart);
});

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

Отладка сетевых сценариев

При сложных интерфейсах запросы могут инициироваться цепочками событий. Подключение page.on(‘console’, …) помогает связать сообщения приложения с сетевой активностью. Дополнительно может использоваться трассировка: 

await page.tracing.start({ path: 'trace.json', categories: ['devtools.timeline'] });
// Выполнение сценария
await page.tracing.stop();

Полученная трасса анализируется инструментами Chrome, что упрощает определение узких мест.

Работа с WebSocket

В ряде приложений сетевые взаимодействия происходят через WebSocket. Puppeteer предоставляет API Chrome DevTools Protocol, позволяя фиксировать сообщения. Подключение выполняется через client = await page.target().createCDPSession(): 

const client = await page.target().createCDPSession();
await client.send('Network.enable');

client.on('Network.webSocketFrameReceived', params => {
  console.log('Получено:', params.response.payloadData);
});

Отправленные кадры перехватываются аналогичным образом. Такая техника важна при тестировании обновлений данных в реальном времени.

Ограничение пропускной способности и сценарии деградации

Эмуляция сетевых условий моделирует работу приложения при низкой скорости или высокой задержке: 

const client = await page.target().createCDPSession();
await client.send('Network.emulateNetworkConditions', {
  offline: false,
  latency: 200,
  downloadThroughput: 200 * 1024,
  uploadThroughput: 100 * 1024
});

Использование таких сценариев позволяет проверять устойчивость интерфейса к нестабильной сети.

Сохранение сетевого протокола

Фиксация сетевого трафика в формате HAR упрощает анализ. Сторонние библиотеки генерируют HAR-файлы поверх событий Puppeteer. Подобные артефакты полезны при разборе сложных ошибок и интеграции с инструментами производительности.

Взаимодействие с кэшем и политиками загрузки

Контроль кэша исключает случайные побочные эффекты. Отключение кэширования через Chrome DevTools Protocol делает поведение тестов предсказуемым: 

const client = await page.target().createCDPSession();
await client.send('Network.setCacheDisabled', { cacheDisabled: true });

Дополнительно анализируются заголовки Cache-Control, ETag и Last-Modified, определяющие стратегию обновления.

Корреляция запросов и пользовательских действий

Синхронизация сетевой активности с кликами, навигациями и изменениями DOM помогает выявлять избыточные запросы и дубликаты. Использование Promise.all([…]) фиксирует набор запросов, ожидаемых после события: 

await Promise.all([
  page.waitForResponse(resp => resp.url().includes('/api/data')),
  page.click('#fetch')
]);

Техника особенно полезна при проверке сложных UI-меню и отображения списков.

Инкапсуляция мониторинга в тестовые утилиты

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

Оглавление