Сбор metrics

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

Что такое metrics?

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

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

WebdriverIO можно использовать с несколькими инструментами для мониторинга производительности, включая Performance API, встроенные возможности браузеров и сторонние библиотеки. Один из популярных подходов — это использование browser.performance API для сбора метрик, связанных с производительностью страницы.

Пример использования Performance API

Для сбора метрик с использованием Performance API нужно воспользоваться методом browser.execute(), который позволяет выполнить JavaScript код непосредственно в контексте браузера.

describe('Performance Metrics Test', () => {
  it('should collect performance metrics', async () => {
    const metrics = await browser.execute(() => {
      return window.performance.timing;
    });
    
    console.log(metrics);
  });
});

В данном примере выполняется извлечение данных о времени загрузки страницы, что включает:

  • navigationStart — время начала загрузки.
  • responseStart — время начала получения ответа от сервера.
  • domComplete — время завершения рендеринга страницы.

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

Метрики из Chrome DevTools

WebdriverIO предоставляет доступ к Chrome DevTools Protocol (CDP), что открывает возможности для сбора более детализированных метрик, таких как время отрисовки кадров (FPS), использование памяти и CPU, время ответа API и многое другое. Для взаимодействия с этим протоколом используется browser.cdp().

Пример кода для сбора метрик с использованием Chrome DevTools Protocol:

describe('Collect Performance Metrics from CDP', () => {
  it('should collect detailed performance metrics', async () => {
    await browser.cdp('Performance', 'enable'); // Включаем сбор данных

    const performanceMetrics = await browser.cdp('Performance', 'getMetrics');
    console.log(performanceMetrics);
  });
});

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

Важные метрики для мониторинга

  1. TTI (Time to Interactive) — время, которое необходимо, чтобы страница стала полностью интерактивной. Это время может быть критичным для приложений с большим количеством динамически загружаемых данных.

  2. LCP (Largest Contentful Paint) — метрика, измеряющая время до загрузки самого крупного видимого элемента на странице. Она отражает восприятие пользователем загрузки контента.

  3. FID (First Input Delay) — задержка между первым вводом пользователя и откликом страницы. Этот показатель имеет большое значение для оценки быстродействия интерфейса.

  4. FCP (First Contentful Paint) — время, прошедшее до первого рендеринга содержимого на странице. Это помогает понять, когда пользователь видит первый элемент страницы.

  5. API Response Time — время ответа от серверных API. Его важно собирать для определения, насколько быстро сервер может предоставить данные для отображения на странице.

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

Иногда для сбора метрик могут использоваться сторонние библиотеки, такие как Lighthouse или WebPageTest. Эти инструменты обеспечивают более глубокий анализ производительности, чем стандартные API браузера.

Для интеграции с WebdriverIO, можно использовать wdio-lighthouse-service — сервис, который автоматически собирает метрики производительности с помощью Lighthouse.

Пример использования:

  1. Установите нужный пакет:
npm install --save-dev wdio-lighthouse-service
  1. Конфигурируйте сервис в wdio.conf.js:
services: [
  ['lighthouse', {
    output: 'html',
    logLevel: 'info',
    onlyCategories: ['performance'],
    formFactor: 'desktop',
    throttling: 'devtools',
  }]
],
  1. После выполнения теста вы получите отчёт о производительности в формате HTML.

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

Кроме сбора данных на стороне клиента, важно анализировать производительность на сервере. Для этого можно использовать различные логирующие решения, такие как New Relic или Datadog, которые предоставляют метрики о производительности серверной части приложения, включая время обработки запросов, использование CPU и памяти, частоту ошибок и другие параметры.

Анализ результатов и применение в тестировании

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

  • Высокие значения FID могут указывать на проблемы с обработкой событий пользователя.
  • Долгое время загрузки страницы (LCP) может быть связано с тяжелыми медиа-ресурсами или неоптимизированным кодом.

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

Заключение

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

Оглавление