[Tests] Performance tests API

[bonkalol]

TBD

Все что здесь описано является черновиком и не является финальным API

Расчёт метрик

На основе core/perf создать API для сбора и расчёта детальных метрик по компонентам.

Требования

• Пришли к выводу, что можно попробовать считать метрики в демонах, чтобы не захламлять основной код компонентов.
• Нужно уметь отключать расчёт метрик у некоторых компонентов (iInput)
• Поддержка милдвар в core/perf для расчёта различных метрик. Например perf.start('b-button, [render, repaint, provider])
• Постараться повторить расчёт страничных метрик для конкретных компонентов. Например: tti, fcp и т.д. Расчёт всех этих метрик подключается через мидлвары (см. выше)
• Утянуть количество перерисовок, которое сейчас шлётся в консоль в дев сборке, в это же API
• Уметь рассчитывать эти метрики в разные моменты времени. Например: при создании компонента, при изменении его состояния и т.д.
• Сделать отдельный движок, который будет сохранять все эти метрики в локальное хранилище с последующей возможностью расчёта статистик

Это API будет использоваться тестами, чтобы получить данные и сравнить их с предыдущим снэпшотом, чтобы понять, как изменилась быстродействие компонентов

Запуск тестов

Запуск всех performance тестов и сравнение их с эталонным snapshot

npx gulp tests:performance

Запуск какого-то performance теста и сравнение его с эталонным

npx gulp tests:performance --test-entry base/b-virtual-scroll/tests/performance/render

npx gulp tests:performance --test-entry base/b-virtual-scroll/tests/performance/**/*

Снятие и сохранение снэшпота с результатами

Команда должна запускать performance тесты и сохранять результат

Запуск всех performance тестов

npx gulp tests:performance --snapshot

Запуск какого-то performance теста

npx gulp tests:performance --test-entry base/b-virtual-scroll/tests/performance/render --snaphsot

npx gulp tests:performance --test-entry base/b-virtual-scroll/tests/performance/**/* --snaphsot

Описание

• Тесты должны выполняться несколько раз и результатом замера должно быть средним значением за все попытки

Хром имеет trace API, стоит обратить внимание на этот инструмент https://playwright.dev/docs/api/class-chromiumbrowser#chromiumbrowserstarttracingpage-options UPD Видимо, теперь это https://playwright.dev/docs/api/class-tracing

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

Примеры базовых тест кейсов

• Рендер обыкновенного компнента

  • с watch
  • с 10 prop
  • c 10 system
  • с 10 field
  • с 10 hook
  • все вместе

• Рендер функционального компнента

  • с watch
  • с 10 prop
  • c 10 system
  • с 10 hook
  • все вместе

• Рендер композитного компнента

  • с 10 prop
  • c 10 system
  • с 10 hook
  • все вместе

• Рендер 10 обыкновенных компонентов

• Рендер 10 функциональных компонентов

• Рендер 10 композитных компонентов

Примеры продвинутых кейсов

• От вызова метода создания через createElement до отрисовки первого чанка b-virtual-scroll
• От всплытия какого-либо события до всплытия другого
• ...

[bonkalol]

https://playwright.dev/docs/api/class-cdpsession

С браузером можно общаться на более низком уровне через cdp сессию. Методы которые предоставляет браузер могут позволить включить CPU тротлинг, получить трасировку, включить тротлинг сети, посмотреть потребление памяти

С помощью этих методов можно вытаскивать ценную информацию (перерисовки, лонгтаски etc) и эмулировать различные ситуации

https://chromedevtools.github.io/devtools-protocol/tot/Tracing/ https://chromedevtools.github.io/devtools-protocol/tot/Network/#method-emulateNetworkConditions https://chromedevtools.github.io/devtools-protocol/tot/Profiler/ https://chromedevtools.github.io/devtools-protocol/tot/Emulation/#method-setCPUThrottlingRate

[bonkalol]

Из подвижок:

Заресерчил момент запуска тестов в webview в android, получилось оч круто, удалось подружить PW и приложение, то есть например (для тех кто в контексте) получилось запустить поисковое вебвью в приложении и делать с ним любые действия (через API pw, точно такое же как мы и используем в тестах), я попробовал ввести молоко в поисковую строку и начать CDP сессию с целью снять метрики - все это увенчалось успехом.

Вывод:

Для perf тестов нужно будет делать поддержку разных движков (android приложение + вебвью, локально хром). Надо будет зарефакторить модуль тестов чтобы он умел запускать тесты в приложении андроида