Анализ и обработка сетевых откликов в Puppeteer: мониторинг и модификация

Хотите освоить Puppeteer для мониторинга сети и управления ответами? Это руководство расскажет вам всё — от перехвата запросов до изменения API-ответов и тестирования в различных сетевых условиях. Вот краткий обзор того, что вы узнаете:

• Мониторинг и модификация сетевых запросов: настройка заголовков, payload-данных и mock-ответов для тестирования.
• Анализ ответов сервера: извлечение JSON, HTML или бинарных данных для тестирования API и оценки производительности.
• Симуляция сетевых условий: тестирование на 3G, 4G или медленных соединениях для оптимизации работы.
• Практические примеры кода: пошаговая настройка и применение в реальных сценариях.
• Юридические аспекты и советы по эффективности: соблюдение правил и улучшение производительности Puppeteer с помощью кеширования, фильтрации запросов и ограничения скорости.

Начните использовать Puppeteer, чтобы улучшить автоматизацию и упростить процессы тестирования.

Настройка и конфигурация

Первоначальная настройка

Выполните следующие шаги:

1. Создайте новую директорию для вашего проекта на Node.js.
2. Запустите npm init для инициализации проекта.
3. Установите Puppeteer командой:
   npm install puppeteer

Далее создайте основной файл скрипта и добавьте базовый код:

const puppeteer = require('puppeteer');

async function startMonitoring() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // Продолжайте настройку здесь
}

Настройка перехвата сети

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

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

// Обработчик запросов
page.on('request', request => {
  // Всегда вызывайте continue(), чтобы запросы не зависали
  request.continue();
<!-- -->});
<!-- -->
// Обработчик ответов
page.on('response', async response => {
  const url = response.url();
  if (response.headers()['content-type'].includes('application/json')) {
    const responseData = await response.json();
    console.log(`Ответ от ${url}:`, responseData);
  }
<!-- -->});

‍

Как указано в официальной документации Puppeteer:
"После включения перехвата запросов каждый запрос будет приостановлен, пока не будет вызван continue(), respond() или abort()".

Пример из документации Agenty за 2024 год показывает, как эффективно перехватывать и анализировать ответы API интернет-магазинов:

await page.setRequestInterception(true);
page.on("request", (req) => {
  if (req.url().includes('/api/prices')) {
    const modifiedData = {
      // Модифицированные данные запроса
      zipCode: '10001'
    };
    req.continue({ postData: JSON.stringify(modifiedData) });
  } else {
    req.continue();
<!-- -->  }
<!-- -->});

‍

Эта настройка позволяет:

• Мониторить все сетевые запросы и ответы.
• Изменять заголовки и данные запросов.
• Анализировать JSON-ответы от API.
• Фильтровать и отслеживать определённые URL.
• Обрабатывать различные типы ответов.

Совет: Всегда добавляйте обработку ошибок, например, оборачивайте парсинг JSON в try-catch, особенно при работе с API.

Мониторинг сетевых ответов

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

Отслеживание API и XHR-запросов

Настройте обработчики событий для отслеживания ответов:

// Ожидание определённого XHR-ответа
const response = await page.waitForResponse(
  response => response.url().includes('/api/data') &&
  response.request().method() !== 'OPTIONS'
);
<!-- -->
// Мониторинг всех ответов
page.on('response', async response => {
  const url = response.url();
  const method = response.request().method();
  const status = response.status();
  console.log(`${method} ${url}: ${status}`);
});

‍

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

Сортируйте и обрабатывайте ответы по их типу:

page.on('response', async response => {
  const contentType = response.headers()['content-type'];
  try {
    if (contentType.includes('application/json')) {
      const jsonData = await response.json();
      // Обработка JSON
    } else if (contentType.includes('text/html')) {
      const htmlContent = await response.text();
      // Обработка HTML
    }
  } catch (error) {
    console.error('Ошибка обработки ответа:', error);
  }
<!-- -->});

‍

Методы извлечения данных

Используйте следующие методы для извлечения данных:

const searchResponse = await page.waitForResponse(
  response => response.url().includes('sample-search.php')
);
const data = await searchResponse.json();
const results = data.results;

‍

‍

Для плавной работы:

• Фокусируйтесь на определённых URL и методах запросов.
• Обрабатывайте ошибки.
• Используйте try-catch при парсинге.
• Кешируйте данные ответов, если возможно.

Методы модификации ответов

Мониторинг ответов — это только часть работы. Их модификация позволяет тестировать крайние случаи и проверять работу приложения в различных условиях.

Изменение заголовков

Настройка HTTP-заголовков помогает тестировать аутентификацию и поведение сервера:

await page.setRequestInterception(true);
page.on('request', (request) => {
  const headers = request.headers();
  headers['Authorization'] = 'Bearer YOUR_TOKEN';
  headers['Accept-Language'] = 'en-US';
  request.continue({ headers });
<!-- -->});

‍

Для нескольких заголовков используйте setExtraHTTPHeaders:

await page.setExtraHTTPHeaders({
  'user-agent': 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36',
  'accept': 'text/html,application/xhtml+xml,application/xml',
  'accept-language': 'en-US,en;q=0.9'
});

‍

Тестирование сетевых условий

Проверьте, как приложение работает при разных скоростях соединения:

‍

Пример симуляции 3G:

await page.emulateNetworkConditions({
  download: 768000,
  upload: 256000,
  latency: 100
});

‍

Тестирование API-ответов

Можно перехватывать API-запросы и возвращать mock-ответы:

await page.route('https://api.example.com/data', route => {
  route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify({
      success: true,
      data: { id: 123, status: 'completed' }
    })
<!-- -->  });
<!-- -->});

‍

Для надёжности оберните логику в try-catch:

try {
  page.on('request', async request => {
    if (request.url().includes('/api/')) {
      const mockResponse = {
        status: 200,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ test: true })
      };
      await request.respond(mockResponse);
    } else {
      await request.continue();
    }
<!-- -->  });
} catch (error) {
  console.error('Ошибка перехвата:', error);
}

‍

Инструменты для углублённого анализа

Использование Chrome DevTools Protocol

Протокол Chrome DevTools (CDP) позволяет проводить расширенный мониторинг и отладку:

const client = await page.target().createCDPSession();
await client.send('Network.enable');
await client.send('Network.setRequestInterception', {
  patterns: [{ urlPattern: '*' }]
});
<!-- -->
client.on('Network.requestIntercepted', async ({ interceptionId, request }) => {
  const response = await client.send('Network.getResponseBodyForInterception', {
    interceptionId
<!-- -->  });
  console.log(`Размер ответа: ${response.body.length} байт`);
  await client.send('Network.continueInterceptedRequest', { interceptionId });
});

‍

Метрики производительности:

const metrics = await page.metrics();
console.log('Использование памяти JS:', metrics.JSHeapUsedSize);

await page.tracing.start();
await page.goto('https://example.com');
await page.tracing.stop();

‍

Анализ HAR-файлов

HAR-файлы (HTTP Archive) содержат полную запись сетевой активности:

const har = {
  log: {
    version: '1.2',
    entries: []
  }
<!-- -->};
<!-- -->
page.on('response', async response => {
  const entry = {
    startedDateTime: new Date().toISOString(),
    request: {
      method: response.request().method(),
      url: response.url(),
      headers: response.request().headers()
    },
    response: {
      status: response.status(),
      headers: response.headers()
    }
<!-- -->  };
<!-- -->  har.log.entries.push(entry);
<!-- -->});

‍

Интеграция с Нодулем

Нодуль расширяет возможности Puppeteer, добавляя автоматические проверки и визуальную диагностику:

const monitor = async (page) => {
  await page.setViewport({ width: 1920, height: 1080 });
  const status = await page.evaluate(() => {
    return document.querySelector('.status-indicator').textContent;
  });
  if (status !== 'All checks passing') {
    await page.screenshot({
      path: `error-${Date.now()}.png`,
      fullPage: true
    });
<!-- -->  }
<!-- -->};

‍

С Нодулем вы можете:

• Настраивать автоматические проверки.
• Делать скриншоты ошибок.
• Получать уведомления в реальном времени.

Решение проблем и рекомендации

Типичные проблемы

Пропуск ответов? Убедитесь, что перехват запросов настроен правильно:

await page.setRequestInterception(true);
page.on('request', request => {
  request.continue();
<!-- -->});
page.on('response', async response => {
  console.log(`Получен ответ: ${response.url()}`);
});

‍

Отключите кеширование для полного захвата ответов:

await page.setCacheEnabled(false);
await page.setDefaultNavigationTimeout(30000);

‍

Советы по скорости и эффективности

Пример блокировки ненужных ресурсов:

const blockedResources = ['image', 'stylesheet', 'font'];
await page.setRequestInterception(true);
page.on('request', request => {
  if (blockedResources.includes(request.resourceType())) {
    request.abort();
  } else {
    request.continue();
<!-- -->  }
<!-- -->});

‍

Юридические аспекты

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

Пример ограничения скорости:

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
async function responsibleMonitoring(page, url) {
  await delay(2000);
  await page.goto(url, { waitUntil: 'networkidle0' });
}

‍

Заключение

Puppeteer предоставляет мощные инструменты для мониторинга и управления сетевыми запросами. С его помощью можно тестировать приложения в различных условиях, оптимизировать производительность и автоматизировать workflows.

Начало работы с Нодулем

Нодуль упрощает мониторинг сети, добавляя автоматические проверки и визуализацию:

• Настройте кастомный узел для анализа ответов.
• Включите проверку статусов и скриншоты ошибок.
• Используйте шаблоны текста для мониторинга.

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