Получение метрик производительности

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

Интеграция с Performance API

Для получения метрик производительности WebdriverIO использует Performance API браузера, который предоставляет информацию о времени загрузки, рендеринге, и сетевых запросах. WebdriverIO включает команду browser.getMetrics(), которая позволяет собрать различные показатели, относящиеся к производительности.

Команда getMetrics() возвращает данные в виде объекта, включающего различные параметры, такие как:

  • load — время, затраченное на загрузку страницы.
  • firstPaint — время до первого рендеринга страницы.
  • firstContentfulPaint (FCP) — момент, когда на экране появляется первый визуальный элемент.
  • DOMContentLoaded — время, когда DOM полностью загружен и готов к манипуляциям.
  • largestContentfulPaint (LCP) — время, когда на экране появляется самый крупный визуальный элемент.

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

const performanceMetrics = await browser.getMetrics();
console.log(performanceMetrics);

Тестирование загрузки страницы

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

const loadTime = await browser.getLoadTime();
console.log(`Page load time: ${loadTime}ms`);

Помимо этого, WebdriverIO предоставляет методы для замера времени, прошедшего до DOMContentLoaded и load событий:

const domContentLoaded = await browser.execute(() => window.performance.timing.domContentLoadedEventEnd);
const loadEvent = await browser.execute(() => window.performance.timing.loadEventEnd);
console.log(`DOMContentLoaded: ${domContentLoaded}ms, load event: ${loadEvent}ms`);

First Paint и First Contentful Paint (FCP)

Метрики First Paint (FP) и First Contentful Paint (FCP) отражают первый визуальный отклик страницы, что является важным для пользователя, поскольку это показывает, насколько быстро браузер начинает отображать контент.

В WebdriverIO можно получить эти значения через команды, которые обращаются к Performance API:

const firstPaint = await browser.execute(() => window.performance.getEntriesByType("paint")[0].startTime);
const fcp = await browser.execute(() => window.performance.getEntriesByType("paint")[1].startTime);
console.log(`First Paint: ${firstPaint}ms, First Contentful Paint: ${fcp}ms`);

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

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) является одной из самых важных метрик производительности, которая отражает момент, когда самый крупный визуальный элемент на странице был полностью отрисован. Это может быть изображение, видео или блок с текстом.

WebdriverIO предоставляет доступ к LCP через browser.execute() с обращением к Performance API:

const lcp = await browser.execute(() => {
  const entries = window.performance.getEntriesByType('paint');
  const lcpEntry = entries.find(entry => entry.name === 'largest-contentful-paint');
  return lcpEntry ? lcpEntry.startTime : 0;
});
console.log(`Largest Contentful Paint: ${lcp}ms`);

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

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

Для более глубокого анализа производительности можно интегрировать WebdriverIO с внешними сервисами, такими как Lighthouse или WebPageTest. Эти инструменты предоставляют более детализированные данные о производительности, включая метрики времени до первого байта (TTFB), время отклика сервера, потребление ресурсов и другие показатели.

В WebdriverIO можно использовать интеграцию с Lighthouse с помощью пакета wdio-lighthouse-service, который позволяет запускать Lighthouse прямо из тестов:

describe('Performance testing with Lighthouse', () => {
  it('should have good performance scores', async () => {
    const lighthouseResults = await browser.call(async () => {
      return await browser.lighthouse('https://example.com');
    });
    console.log(lighthouseResults);
  });
});

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

Сетевые запросы и ресурсы

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

const networkLogs = await browser.getNetworkLogs();
networkLogs.forEach(log => {
  console.log(`URL: ${log.url}, Status: ${log.status}, Duration: ${log.duration}ms`);
});

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

Анализ работы с ресурсами

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

Для получения времени загрузки изображений или скриптов можно использовать методы performance.getEntriesByType и фильтрацию по типам ресурсов:

const imageLoadTimes = await browser.execute(() => {
  return window.performance.getEntriesByType('resource').filter(entry => entry.initiatorType === 'img').map(entry => entry.duration);
});
console.log(imageLoadTimes);

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

Заключение

Измерение производительности с помощью WebdriverIO предоставляет мощные инструменты для тестирования и оптимизации веб-приложений. Включение таких метрик, как загрузка страницы, время до первого рендеринга, FCP, LCP и другие показатели из Performance API, помогает тестировщикам выявлять проблемы с производительностью и улучшать пользовательский опыт. Интеграция с внешними инструментами, такими как Lighthouse, расширяет возможности анализа и дает дополнительные инсайты для оптимизации приложений.

Оглавление