Сбор метрик выполнения

Puppeteer предоставляет API для управления браузером Chromium на уровне кода, позволяя не только автоматизировать действия пользователя, но и собирать подробные метрики производительности страницы. Основной подход заключается в использовании встроенных инструментов Chrome DevTools Protocol (CDP), которые Puppeteer полностью поддерживает. 

const puppeteer = require(&

(async () => {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();

  await page.goto('https://example.com', { waitUntil: 'networkidle0' });

  const metrics = await page.metrics();
  console.log(metrics);

  await browser.close();
})();

Метод page.metrics() возвращает объект с ключевыми показателями работы страницы, такими как JS Heap Size, Nodes, LayoutCount, RecalcStyleCount и FramesPerSecond. Эти значения помогают отслеживать нагрузку на рендеринг, эффективность JavaScript и общий FPS страницы.

Использование Performance API

Для более детализированных данных о производительности полезно использовать performance.getEntries() через page.evaluate(). 

const perfEntries = await page.evaluate(() => JSON.stringify(window.performance.getEntries()));
console.log(JSON.parse(perfEntries));

Особенности:

  • navigation — информация о загрузке страницы (DNS, TCP, TTFB, DOMContentLoaded, LoadEvent).
  • resource — метрики загрузки отдельных ресурсов (скрипты, изображения, шрифты).
  • mark и measure — кастомные точки измерений для скриптов.

Собранные данные можно интегрировать с графиками или сохранять в JSON для последующего анализа.

Сбор метрик через Chrome DevTools Protocol

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

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

const performanceMetrics = await client.send('Performance.getMetrics');
console.log(performanceMetrics);

Ключевые показатели:

  • Timestamp — момент снятия метрики.
  • Documents — количество DOM-документов.
  • Frames — количество кадров, прошедших рендеринг.
  • JSHeapUsedSize и JSHeapTotalSize — использование памяти JavaScript.
  • LayoutCount — число перерасчётов стилей и компоновки.

CDP обеспечивает доступ к этим метрикам в реальном времени, что особенно важно при нагрузочном тестировании и проверке SPA-приложений.

Сбор пользовательских метрик

Для измерения специфичных событий страницы используются performance.mark и performance.measure. 

await page.evaluate(() => {
  performance.mark('startProcessing');
  // выполнение кода
  performance.mark('endProcessing');
  performance.measure('processingTime', 'startProcessing', 'endProcessing');
});

const measures = await page.evaluate(() => performance.getEntriesByType('measure'));
console.log(measures);

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

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

Метод page.on(‘requestfinished’) позволяет отслеживать завершение загрузки ресурсов и собирать метрики по времени. 

page.on('requestfinished', async (request) => {
  const response = request.response();
  const timing = response.timing();
  console.log({
    url: request.url(),
    startTime: timing.startTime,
    duration: timing.receiveHeadersEnd - timing.sendEnd
  });
});

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

Автоматизация сбора метрик

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

  1. Навигация и ожидание полной загрузки страницы (networkidle0 или load).
  2. Сбор стандартных метрик через page.metrics().
  3. Сбор детализированных метрик через CDP (Performance.getMetrics).
  4. Выполнение пользовательских измерений (performance.mark, performance.measure).
  5. Сохранение результатов в JSON или базу данных для анализа.

Такой подход обеспечивает системный и повторяемый сбор показателей, что удобно для интеграции в CI/CD и автоматические тесты производительности.

Советы по оптимизации

  • Использовать режим headless: true для минимизации влияния интерфейса браузера на метрики.
  • Включать Performance.enable только при необходимости, чтобы снизить нагрузку на процесс тестирования.
  • Сохранять и анализировать метрики в историческом контексте для выявления деградации производительности.
  • Для SPA-приложений дополнительно отслеживать переходы между маршрутами и динамическую загрузку контента, используя события framenavigated и domcontentloaded.

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

Оглавление