Автотесты

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

Смирнов Вячеслав, Miro

Images by Vlad Gerasimov on https://vlad.studio/

Увидеть метрики производительности Web-а несложно

Ручное тестирование

с секундомером

А еще у нас есть инструменты автоматизации

  • Web Developer Tools (Google Chrome, Mozilla Firefox, ...)

  • PageSpeed Insights, 🔗 pagespeed.web.dev

  • Pagespeed Compare, 🔗 pagespeed.compare

  • WebPageTest, 🔗 webpagetest.org

  • LightHouse, 🔗 github.com/GoogleChrome/lighthouse

  • SiteSpeed, 🔗 sitespeed.io

  • Treo, 🔗 treo.sh

А какие значения метрик хорошие? Как оценить значения метрик?

Автоматически

Как написать автотесты на оценку метрик, выдаваемых инструментами?

Ускоряю Miro

Развиваю @qa_load

Автоматизирую нагрузку

Автоматизированный тест

с инструментом, выдающим отчеты

которые надо просматривать

Как сделать полностью автоматические тесты и встроить их в CI?

Выбрать инструмент, в котором метрики доступны и в виде отчета (для отладки)

и через API (для автотестов)

Web Developer Tools + браузер не совсем подходят

результат тут JSON/Bin-файлы, которые меняют формат

Может быть есть инструмент, который сохраняет метрики в базу данных?

WebPageTest сохраняет данные в MySQL, MariaDB, ...

Реляционные базы данных

SiteSpeed сохраняет данные в InfluxDB, VictoriaMetrics, Graphite, ...

TimeSeries базы данных

SiteSpeed сохраняет данные в InfluxDB, VictoriaMetrics, Graphite, ...

TimeSeries базы данных

Что проще настроить, у какого инструмента лучше поддержка?

WebPageTest доступен как сервис с API и UI

из 2+ Docker-контейнеров

SiteSpeed доступен как консольная утилита

из 1 Docker-контейнера

SiteSpeed доступен как консольная утилита

из 1 Docker-контейнера

WebPageTest обновляется несколько раз в год

1 релиз в 2022 и 0 в 2023

SiteSpeed обновляется несколько раз в неделю

31 релиз в 2023

SiteSpeed обновляется несколько раз в неделю

31 релиз в 2023

SiteSpeed мне понравился больше, чем WebPageTest

Что есть в отчете SiteSpeed?

В отчете 5 общих разделов, сравнение страниц, сравнение итераций по странице, 10 детальных разделов по каждой итерации

Отчет очень детальный

Что есть в метриках SiteSpeed? Сколько их?

В выгружаемых метриках есть

Размеры и количество ответов

  • по каждому типу и коду ответа: image, css, js, audio, video, 200, 400, 500

CPU+JS, длительность, user timing API метрики

  • domainLookup, serverConnection, ttfb, serverResponse, 120 параметров

Баллы и рейтинги

  • SpeedIndex, Performance Score, Lighthouse

Метрики создаются модулями

  • browsertime: анализ HAR, Perf Events, Google Web Vitals

  • pagexray: анализ HAR, Perf Events, Google Web Vitals

  • lighthouse: рекомендации и Google Web Vitals

  • thirdparty: статистика по внешним доменам

  • coach: рекомендации

SiteSpeed экспортирует 2400 метрик производительности (по умолчанию)

Метрики по странице, типам и кодам ответов

В SiteSpeed доступно 62 000 метрики производительности (можно настроить)

По каждому запросу и домену свой набор из 100-200 метрик

Не было бизнес-метрик miro

Не было известно из метрик, какой модуль miro тормозит?

Были добавлены JavaScript User Timing API метрики

  • APP_ENTRY_CORE_LOADING (27)

  • APP_ENTRY (10010)

  • CORE_DEPENDENCIES_EVAL (17)

  • CORE_INITIALIZATIONS (26)

  • APP_ACTIVATOR_MODULE (1)

  • ...

32 бизнес-метрики на каждый этап загрузки страницы

Бизнес-метрики были добавлены разработчиками на сайт miro

А SiteSpeed поддерживает Timing API

Что возвращает инструмент, и как это можно автоматически протестировать?

Типы возвращаемых данных и способы их обработки

Метрики и бизнес-метрики: InfluxDB, VictoriaMetrics

  • ошибка: больше 0, меньше 1, меньше 1000

Логи и console-log: количество ERROR, WARN

  • ошибка: есть ERROR

Код возврата

  • ошибка: не 0

А еще HAR-файл, Jaeger-трейс, NetLog, ...

Как можно спроектировать автоматизацию тестов с SiteSpeed?

Сначала отладка конфигов и автоматизация запуска

  1. Выбрать тестовую страницу

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

  3. Скорректировать параметры:

    • Timeout (для Selenium), критерий загрузки

    • Настройки браузера (кеш, разрешение экрана)

    • Путь сохранения отчета

    • InfluxDB

v1. Как проверить, что тест нормальный?

Если pipeline не упал, то успех

Если pipeline не упал, то успех

Проверка кода возврата

v2. Как задать свои лимиты для метрик? Как задать performance budget?

Лимиты SiteSpeed можно переопределить, используя performance budget

v3. Как загрузить результаты соответствия лимитам в Allure?

SiteSpeed выгружает результаты проверок в формат JUnit-XML

SiteSpeed 29.5.0 выгружает только статусы проверок в формат JUnit-XML

Allure поддерживает формат JUnit-XML

v4. Как выявить деградацию текущего запуска тестов по сравнению с предыдущими визуально?

SiteSpeed поддерживает отправку метрик в InfluxDB, VictoriaMetrics, Grafana.net HTTP Metrics, Graphite

В Grafana Annotation можно сохранять ссылки на HTML-отчеты, информацию о сборке

Grafana поддерживает отображение метрик из TimeSeries хранилищ

Удобно вычислять дельту между самым новым значением и минимальным значением за 3, 7, 10 дней

для LCP, Speed Index, Perf Score

Отслеживать деградации можно вручную по метрикам Grafana, и смотреть детали в HTML-отчетах

v5. Как выявить деградацию текущего запуска тестов по сравнению с предыдущими автоматически?

Пишем pipeline: Github Action, Jenkins, Gitlab CI, Bamboo

Запускаем тесты: Gradle + JUnit 5, TestNG, PyTest

В тесте есть стадии: @Setup + @Test, @BeforeSuite + @Test

В предусловии теста: запускаем Docker программно

В контейнере: запуск SiteSpeed с параметрами

SiteSpeed пишет метрики: в VictoriaMetrics, InfluxDB

А теперь тест: получаем текущие и предыдущие метрики

А теперь тест: сравниваем текущие и предыдущие метрики

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

Тест на метрики завершен: метрики (не) деградировали

Формируется отчет: в Allure

Формируется уведомление: в Slack, Telegram

Основные тесты тестируют метрики из хранилища метрик

v6. Как реагировать на сообщения о деградации?

Изучить детальные отчеты

Для aвтоматизации работы с камими ещё инструментами можно использовать такой подход?

Метрики о своей работе пишет много инструментов тестирования

C InfluxDB, VictoriaMetrics работают инструменты:

  • Apache.JMeter

  • Gatling

  • k6

  • SiteSpeed

  • и другие

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

Пишите тесты на метрики, сравнивайте их во времени!

Пишите тесты на метрики, сравнивайте их во времени!

Пишите в

  • @qa_load
  • @smirnovqa

Примеры

  • sitespeed.io
  • github.com/polarnik/sitespeed.automation
  • github.com/wikimedia/performance-synthetic-monitoring-tests
  • github.com/wikimedia/performance-mobile-synthetic-monitoring-tests

Фоны и слайды

  • vlad.studio
  • polarnik.github.io/sitespeed.automation