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

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

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

Для начала необходимо создать экземпляр браузера с помощью Puppeteer и открыть нужную страницу. Логирование сетевых запросов включается через события, связанные с объектом страницы. Один из таких событий — page.on(‘request’), который позволяет прослушивать все исходящие запросы от страницы. 

const puppeteer = require(&

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

  page.on('request', (request) => {
    console.log('Request made: ' + request.url());
  });

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

В данном примере, для каждого сетевого запроса, инициированного страницей, в консоль выводится URL запроса. Однако, это только базовый пример, и можно использовать более сложную логику для фильтрации, обработки или анализа данных запросов.

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

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

page.on('request', (request) => {
  if (request.resourceType() === 'xhr') {
    console.log('XHR Request: ' + request.url());
  }
});

В приведенном примере, логируются только запросы типа xhr (XMLHttpRequest), то есть асинхронные запросы, отправляемые на сервер с помощью JavaScript.

Существует несколько типов ресурсов, которые можно фильтровать:

  • document — HTML-документы.
  • script — JavaScript-файлы.
  • xhr — XMLHttpRequest.
  • fetch — Fetch API.
  • image — изображения (JPEG, PNG и другие).
  • stylesheet — стили CSS.
  • font — шрифты.
  • other — все остальные типы.

Логирование ответов на запросы

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

page.on('response', (response) => {
  console.log('Response: ' + response.url());
  console.log('Status code: ' + response.status());
});

В этом примере выводится URL ответа и его статусный код (например, 200, 404, 500). Статусный код помогает понять, был ли запрос успешным или возникла ошибка при его обработке.

Можно использовать другие методы объекта response, чтобы получить дополнительные данные:

  • response.body() — позволяет получить тело ответа в виде буфера или строки.
  • response.headers() — возвращает заголовки ответа.

Для примера, если нужно получить только ответы с кодом 200, можно добавить проверку: 

page.on('response', (response) => {
  if (response.status() === 200) {
    console.log('Successful response: ' + response.url());
  }
});

Логирование ошибок при запросах

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

page.on('requestfailed', (request) => {
  console.log('Request failed: ' + request.url());
  console.log('Failure reason: ' + request.failure().errorText);
});

page.on('requestfinished', (request) => {
  console.log('Request finished: ' + request.url());
});

Событие requestfailed позволяет зафиксировать ошибки, произошедшие при выполнении запроса, а метод failure() возвращает подробную информацию о причине сбоя, например, таймаут или отсутствие интернета.

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

Для более сложных случаев, когда требуется захватить и проанализировать данные, отправляемые в запросах или получаемые в ответах, можно использовать методы request.postData() и response.text(). 

page.on('request', (request) => {
  if (request.method() === 'POST') {
    console.log('POST Data: ' + request.postData());
  }
});

page.on('response', async (response) => {
  if (response.url().includes('api/data')) {
    const responseBody = await response.text();
    console.log('Response Body: ' + responseBody);
  }
});

Здесь для POST-запросов выводятся данные, отправленные на сервер, а для ответов от API api/data — содержимое ответа.

Логирование сетевых запросов для тестирования

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

const { expect } = require('chai');

page.on('request', (request) => {
  if (request.url().includes('/api/login')) {
    const postData = JSON.parse(request.postData());
    expect(postData.username).to.equal('testuser');
    expect(postData.password).to.equal('password123');
  }
});

В этом примере проверяется, что запрос на вход в систему отправляется с правильными данными (пользовательским именем и паролем). Это позволяет гарантировать, что интерфейс корректно взаимодействует с сервером.

Управление сетевыми запросами

Puppeteer также предоставляет возможность перехватывать и изменять сетевые запросы с помощью метода setRequestInterception(true). Это позволяет, например, изменять параметры запроса или блокировать загрузку определенных ресурсов. 

await page.setRequestInterception(true);

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

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

Заключение

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

Оглавление