Сбор метрик браузера

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

Подключение и настройка контекста браузера

Для сбора метрик необходимо использовать BrowserContext или Page, так как они предоставляют доступ к событиям и API браузера. Инициализация выглядит следующим образом:

const { chromium } = require('playwright');

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

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

    // Метрики будут собираться далее
})();

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

Метрики производительности через page.evaluate

Playwright позволяет выполнять код непосредственно в контексте страницы, что дает доступ к Performance API браузера. Основные показатели:

  • navigationStart — момент начала навигации.
  • responseEnd — окончание загрузки всех ресурсов страницы.
  • domContentLoadedEventEnd — завершение события DOMContentLoaded.
  • loadEventEnd — завершение события load.

Пример сбора метрик:

const metrics = await page.evaluate(() => {
    const perf = performance.getEntriesByType('navigation')[0];
    return {
        totalLoadTime: perf.loadEventEnd - perf.startTime,
        domContentLoaded: perf.domContentLoadedEventEnd - perf.startTime,
        responseTime: perf.responseEnd - perf.startTime
    };
});

console.log(metrics);

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

Использование API браузера для системных метрик

Playwright также предоставляет встроенный API для сбора памяти, CPU и других системных показателей. Для этого применяется метод page.metrics():

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

Возвращаемый объект содержит следующие ключи:

  • Timestamp — время снятия метрик.
  • Documents — количество DOM-документов.
  • Frames — количество фреймов на странице.
  • JSEventListeners — количество слушателей событий.
  • Nodes — количество элементов DOM.
  • LayoutCount и RecalcStyleCount — статистика перерисовок и пересчетов стилей.
  • JSHeapUsedSize и JSHeapTotalSize — использование памяти JavaScript.

Эти показатели позволяют отслеживать нагрузку на рендеринг и эффективность работы скриптов.

Сбор кастомных метрик с помощью tracing

Playwright поддерживает tracing, который позволяет записывать действия пользователя и события браузера, а затем анализировать производительность:

await context.tracing.start({ screenshots: true, snapshots: true });

await page.goto('https://example.com');
await page.click('button#submit');

await context.tracing.stop({ path: 'trace.zip' });

Файл trace.zip содержит подробный отчет о:

  • загрузке страниц,
  • выполнении JavaScript,
  • сетевых запросах,
  • перерисовке элементов.

Для анализа можно использовать Playwright Trace Viewer, что позволяет визуально оценивать узкие места производительности.

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

Метрики часто включают время ответа сервера и задержку сети. Playwright предоставляет возможность перехвата запросов через page.on('requestfinished') и page.on('response'):

page.on('requestfinished', request => {
    console.log(`Request: ${request.url()} finished in ${request.timing().duration}ms`);
});

page.on('response', response => {
    console.log(`Response: ${response.url()} status ${response.status()}`);
});

Метод request.timing() возвращает объект с подробной информацией о каждом этапе запроса, включая dnsLookup, connect, ssl, send, wait, receive.

Постоянное измерение метрик в процессе тестирования

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

const metricsHistory = [];

for (let i = 0; i < 5; i++) {
    await page.reload();
    const metrics = await page.metrics();
    metricsHistory.push(metrics);
}

console.log(metricsHistory);

Анализ такой истории позволяет выявить утечки памяти, рост количества DOM-узлов или падение производительности скриптов на разных этапах теста.

Интеграция метрик с отчетами

Собранные данные удобно отправлять в CI/CD системы или инструменты аналитики, например, в Prometheus или Grafana. Для этого используется экспорт метрик в JSON:

const fs = require('fs');
fs.writeFileSync('metrics.json', JSON.stringify(metricsHistory, null, 2));

Дальнейший анализ позволяет создавать графики производительности, выявлять узкие места и оптимизировать код.

Особенности работы с многопоточными страницами

Если тестируемое приложение использует несколько вкладок или всплывающих окон, рекомендуется собирать метрики отдельно для каждого Page или Frame, чтобы избежать смешивания данных:

const pages = context.pages();
for (const page of pages) {
    const metrics = await page.metrics();
    console.log(metrics);
}

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

Итоги по подходам к сбору метрик

Основные подходы включают:

  • Performance API через page.evaluate — для времени загрузки и рендеринга.
  • page.metrics() — для системных показателей и состояния DOM.
  • Tracing — для визуального анализа и детального аудита.
  • Сетевые события — для оценки задержек и откликов серверов.
  • Циклический сбор и экспорт — для долгосрочного мониторинга и интеграции с аналитикой.

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

Оглавление