Хорошо известно, что производительность является критическим фактором для любого веб-сайта, который может иметь далеко идущие последствия для всего: от удовлетворенности клиентов, SEO и, в конечном итоге, до вашей прибыли. Вы не можете определить успех производительной работы без возможности измерить результаты и сравнить их с бюджетами производительности — для этого требуется тестовая инфраструктура, чтобы убедиться, что у вас есть необходимая видимость метрик… введение cypress-web-vitals.

cypress-web-vitals позволяет вам тестировать сигналы Google Web Vital в ваших рабочих процессах Cypress с помощью новой пользовательской команды cy.vitals().

Web Vitals — это инициатива Google, направленная на предоставление унифицированных рекомендаций по сигналам качества, которые необходимы для обеспечения удобного взаимодействия с пользователями в Интернете.

Ссылка: https://web.dev/vitals/

Начиная

В вашем проекте установите зависимости:

npm install --save-dev cypress-web-vitals cypress-real-events

Примечание. cypress-web-vitals в настоящее время использует cypress-real-events, чтобы щелкнуть страницу и рассчитать первую задержку ввода. Следовательно, это необходимо как одноранговая зависимость.

В вашем файле команд поддержки (обычно cypress/support/commands.js) добавьте этот один вкладыш, чтобы получить настройку:

import "cypress-web-vitals";

И теперь вы готовы приступить к тестированию бюджета производительности Web Vital в рабочем процессе Cypress! 🎉

Добавьте свой первый тест следующим образом:

describe("Web Vitals", () => {
  it("should pass the meet Google's 'Good' thresholds", () => {
    cy.vitals({ url: "https://www.google.com/" });
  });
});

Теперь вы настроены на тестирование всех Web Vitals с использованием пороговых значений Google «Хорошо»:

Настройте свои тесты

Вы можете дополнительно настроить свои тесты с помощью дополнительной дополнительной конфигурации, которая передается в вызов cy.vitals(webVitalsConfig):

  • Необязательный url: string — URL-адрес для аудита. Если он не указан, вам нужно будет вызвать cy.visit(url) перед командой.
  • Необязательный firstInputSelector: string — элемент, по которому нужно щелкнуть для захвата FID. Используется первый соответствующий элемент. По умолчанию: "body".
  • Необязательный thresholds: object — пороговые значения для аудита Web Vitals. Если они не указаны, будут использоваться пороговые значения «Хорошо» Google. Если они предоставлены, любые отсутствующие сигналы Web Vitals не будут проверяться.
  • Необязательный vitalsReportedTimeout: number — время в мс для ожидания отчета Web Vitals перед сбоем. По умолчанию: 10000.

Например:

// Use the `main` element for clicking to capture the FID.
cy.vitals({ firstInputSelector: "main" });

// Test the page against against a CLS threshold of 0.2.
cy.vitals({ thresholds: { cls: 0.2 } });

Подробнее об использовании см. в Документации по API.

Как это работает?

  1. URL-адрес посещается с ответом HTML, перехваченным и измененным Cypress, чтобы включить сценарий web-vitals и некоторый код для записи значений Web Vitals.
  2. Несколько элементов (если они существуют), начиная с предоставленного элемента (на основе firstInputSelector), затем быстро щелкаются, чтобы имитировать нажатие пользователем страницы. Примечание: при выборе пользовательского элемента не выбирайте то, что уйдет со страницы, иначе плагин не сможет зафиксировать показатели Web Vitals.
  3. Затем аудит ожидает события загрузки страницы, чтобы позволить значениям LCP и CLS установиться; которые могут изменяться по мере загрузки разных частей страницы.
  4. Затем аудит моделирует изменение состояния видимости страницы, которое требуется для отчета CLS Web Vital.
  5. Затем аудит пытается дождаться отчета о любых невыполненных веб-показателях, для которых были предоставлены пороговые значения.
  6. Наконец, значения Web Vitals сравниваются с пороговыми значениями, регистрируя успешные результаты и выдавая ошибку для любых неудачных сигналов. Примечание: если в ходе аудита не удалось записать Web Vital, он заносится в журнал, но тест не завершается ошибкой.

Тестовые площадки в дикой природе

Вот несколько примеров тестовых запусков домашних страниц FAANG, чтобы увидеть cypress-web-vitals в действии:

Фейсбук

cy.vitals({ url: "https://www.facebook.com/" });

Амазонка

cy.vitals({ url: "https://www.amazon.com/" });

Нетфликс

cy.vitals({
  url: "https://www.netflix.com/gb/",
  firstInputSelector: ".our-story-card-title",
});

Для Netflix нам пришлось ввести настраиваемый выбор элемента для имитации первого клика. Несмотря на то, что задержка первого ввода может быть измерена в тех случаях, когда для элемента не зарегистрирован прослушиватель событий, есть сценарии, в которых нажатие на body не отключает ее. Вот несколько хороших примеров элементов, которые надежно запускают метрику FID:

  • Текстовые поля, флажки и переключатели (<input>, <textarea>)
  • Выберите раскрывающиеся списки (<select>)
  • Ссылки (<a>)

Чтобы убедиться, что Web Vitals можно протестировать, лучше попытаться найти элемент, который надежно запускает FID, но не уходит со страницы (возможно, избегайте <a>!).

Google

cy.vitals({ url: "https://www.google.com/" });

Заворачивать

Используете какие-нибудь потрясающие инструменты для тестирования производительности в последнее время? Опробовали cypress-web-vitals на своем сайте и хотите поделиться результатами? Есть какие-либо мысли, вопросы или вопросы? Оставить комментарий!

Это все люди! 🚀

Первоначально опубликовано на https://dev.to 3 апреля 2022 г.