Измерение производительности

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

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

Встроенные средства измерения времени

Cypress предоставляет методы для точного измерения времени выполнения операций:

const start = performance.now();

// Любое действие Cypress
cy.get('#button').click();

const end = performance.now();
cy.log(`Время выполнения: ${end - start} мс`);

Ключевые моменты:

  • performance.now() возвращает высокоточное время в миллисекундах.
  • Можно измерять отдельные операции, например, запросы к API, анимации или рендер элементов.
  • Измерения следует проводить после полной загрузки страницы, чтобы исключить влияние начальной загрузки.

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

Cypress позволяет собрать данные о времени отклика элементов и страниц с помощью цепочек команд. Пример измерения времени загрузки страницы:

cy.visit('/dashboard', {
  onBeforeLoad(win) {
    win.performance.mark('startLoad');
  },
  onLoad(win) {
    win.performance.mark('endLoad');
    win.performance.measure('pageLoad', 'startLoad', 'endLoad');
    const measure = win.performance.getEntriesByName('pageLoad')[0];
    cy.log(`Время загрузки страницы: ${measure.duration} мс`);
  }
});

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

  • performance.mark() позволяет создать метки начала и конца операции.
  • performance.measure() вычисляет интервал между метками.
  • getEntriesByName() извлекает результаты измерения для логирования или анализа.

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

Cypress предоставляет метод cy.intercept(), который позволяет не только перехватывать запросы, но и измерять время их выполнения:

cy.intercept('GET', '/api/data').as('getData');
cy.visit('/dashboard');
cy.wait('@getData').then((interception) => {
  const duration = interception.response?.duration;
  cy.log(`Время отклика API: ${duration} мс`);
});

Важные детали:

  • cy.intercept() можно использовать для всех типов HTTP-запросов.
  • Свойство duration содержит время от отправки запроса до получения ответа.
  • Это позволяет оценивать скорость серверной части и корректировать асинхронные процессы.

Автоматизация тестов производительности

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

describe('Тест производительности', () => {
  it('Измеряет время загрузки главной страницы', () => {
    const start = performance.now();
    cy.visit('/');
    cy.window().then(() => {
      const end = performance.now();
      cy.log(`Загрузка главной страницы: ${end - start} мс`);
    });
  });

  it('Измеряет отклик кнопки отправки формы', () => {
    cy.visit('/form');
    cy.get('#submit').then($btn => {
      const start = performance.now();
      $btn.click();
      cy.window().then(() => {
        const end = performance.now();
        cy.log(`Отклик кнопки: ${end - start} мс`);
      });
    });
  });
});

Рекомендации:

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

Интеграция с метриками браузера

Браузеры предоставляют Performance API, которое позволяет получать данные о рендеринге, загрузке ресурсов и задержках пользовательских действий:

cy.window().then((win) => {
  const timing = win.performance.timing;
  const pageLoadTime = timing.loadEventEnd - timing.navigationStart;
  cy.log(`Время полной загрузки страницы: ${pageLoadTime} мс`);
});

Основные метрики:

  • navigationStart — момент начала навигации.
  • domContentLoadedEventEnd — завершение загрузки DOM.
  • loadEventEnd — момент полной загрузки страницы, включая ресурсы.
  • responseStart и responseEnd — время ответа сервера.

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

Практические советы по измерению производительности в Cypress

  1. Использовать отдельный профиль для тестов — отключить анимации, расширения и плагины браузера, чтобы исключить посторонние задержки.
  2. Фиксировать результаты — логирование в файлы JSON или CSV позволит анализировать тренды и регрессии.
  3. Сравнивать разные версии — при изменении кода приложения важно измерять время выполнения ключевых сценариев, чтобы контролировать деградацию производительности.
  4. Учитывать сеть и кэш — результаты на локальном сервере и на реальной сети могут отличаться, поэтому важно тестировать в условиях, приближенных к боевым.
  5. Комбинировать с внешними инструментами — Lighthouse и WebPageTest могут дать дополнительную информацию о производительности, а Cypress — проверить конкретные пользовательские сценарии.

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

Оглавление