Pull to refresh
367.65
Ozon Tech
Команда разработки ведущего e‑com в России

Автоматическое тестирование аналитики в браузере

Reading time9 min
Views10K
Представьте себе такую ситуацию. Вы запилили мегакрутую фичу на странице сайта и через месяц решили оценить её эффективность. Начинаете считать — и понимаете, что своим релизом вы сломали метрики на странице: случайно удалили код, отправляющий важные события аналитики, или забыли покрыть новую фичу событиями. Знакомо?

События — это действия пользователей на сайте, которые можно отслеживать: клики на кнопки, переходы и просмотры страниц. Когда пользователь совершает целевое действие, в систему аналитики отправляется событие. В итоге мы получаем отчёт о поведении пользователей на конкретной странице сайта.

Если события приходят некорректно, отчёт будет недостоверным.

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


Меня зовут Игорь Любин, я занимаюсь тестированием 14 лет. Сейчас работаю в Ozon департаменте Buyer Experience (BX, «Опыт пользователя»): отвечаю за тестирование десктопной и мобильной версий сайта, а также их бэкенда. Наш сайт представляет собой совокупность разных страниц, каждую из которых делает отдельная команда (мы называем их вертикалями). Я работал в нескольких вертикалях: «Каталог», «Корзина», «Личный кабинет». Сейчас я в команде платформы и помогаю всем вертикалям. 

Обо мне лучше всего говорит скриншот из GitLab:


Раскрашенные квадратики показывают, когда я пишу код, комментирую и создаю merge requests. Ранее я писал тесты и фреймворки на Python, С#, Java, Ruby и PHP, а сейчас в основном использую TypeScript и Go. Все примеры в статье будут на TypeScript, но аналогичные подходы можно применять и в других языках.

Стек технологий


Вот что мы используем в Ozon:


Бэкенд — это все микросервисы, половина из которых написана на Go, остальные — на C#. Всё это завернуто в Docker и крутится в Kubernetes. Код хранится в GitLab, там же реализован CI/CD. 

Фронтенд — большой монорепозиторий сайта на TypeScript. Мы тестируем его с помощью фреймворка WebdriverIO. Это полноценный фреймворк тестирования, который может управлять Selenium или Chrome DevTools Protocol.

Также у нас есть две тестовые площадки, на которых крутится Aerokube Moon, решение для Kubernetes. А работу сайта в разных экзотических браузерах мы тестируем с помощью BrowserStack

Основные сценарии


Для примера я выбрал две странички: каталог и корзину. 

Основные сценарии в каталоге — это просмотр товаров на так называемых плитках, на которые можно кликнуть и перейти на страницу с подробной информацией.


Также можно прямо на плитке нажать кнопку «В корзину» — и товар попадёт в корзину. 

В корзине основной сценарий — нажатие на зелёную кнопку «Перейти к оформлению», которая ведёт на чекаут.


Сайт поделён на блоки — виджеты. Данные подтягиваются из бэкенда, а фронтенд их отображает в виде блоков-виджетов. Те из них, которые показаны пользователю, отправляют в аналитические системы событие view. Ещё есть событие click, которое отправляется, когда пользователь нажимает на кнопки и ссылки на виджетах.
Есть и другие события, но я их опущу. 

Аналитика


Мы используем две системы аналитики: Google Analytics и собственную разработку Ozon Tracker. При этом наш трекер покрывает примерно 90% бизнес-задач. Обе системы нужно проверять. 

  • Аналитика нужна представителям бизнеса, менеджерам и аналитикам, чтобы рассчитывать получаемую компанией прибыль, изучать спрос на конкретные товары и расширять ассортимент, предлагать покупателям более конкурентные цены.
  • Аналитика нужна сервисам. Например, поисковому движку — для улучшения поисковой выдачи или рекомендательным полкам. Также аналитику используют сервисы антифрода, выявляющие ботов.

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

Проблемы с событиями


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

События не приходят



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

Приходят не все события 



На рекомендательной полке мы показываем товары. В этом примере на полке шесть плиток, а в аналитическую систему пришло только четыре события. 

Битые события




В корзине находится товар. Событие отправляется, но оно битое: у него нет ID, пустое имя. Непонятно нашим коллегам из бизнеса, что пользователь положил в корзину. 

Лишние события


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



События приходят волнами



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

События приходят с задержкой



Это график за три дня: оранжевая линия показывает, что событий стало больше, причём часть из них пришла ночью, то есть события где-то задерживаются.

Источники проблем


Если обобщить весь набор проблем, то можно выявить два их источника:

  1. Ошибки в релизах. Мы релизим сайт в среднем десять раз в день, а микросервисы бэкенда — суммарно 50 раз в день. 
  2. Инциденты эксплуатации, когда время от времени что-нибудь тормозит или ломается. 

Все эти сбои в получении метрик нужно уметь выявлять. 

Тестирование аналитики


Браузерные тесты мы делим на три группы в порядке приоритета:

  1. Критичные тесты. Это функциональные тесты, которые обеспечивают работоспособность сайта, в основном позитивные сценарии пользовательского поведения.
  2. Тесты аналитики, которая важна для других систем, в первую очередь для сервисов поиска, рекомендательных систем и сервисов антифрода.
  3. Тесты отдельных вертикалей.

Тестирование аналитики для нас очень важно. Проверять её можно тремя способами: 

  1. Тестирование с использованием DataLayer. 
  2. Перехват запросов.
  3. Проверка в конечной системе. 

Рассмотрим их. 

DataLayer


C Google Analytics связано понятие специального контейнера для событий. Браузер, в котором мы совершаем действия, накапливает события и складывает их в этот контейнер DataLayer, откуда информация потом отправляется в Google Analytics. 


В тесте мы выполняем действия в браузере, а проверки делаем в DataLayer.

Содержимое контейнера можно посмотреть в консоли браузера.

window.dataLayer


Есть плагин для Chrome Datalayer Checker, в котором тоже можно увидеть все события. Так можно вручную осуществлять проверку.


Для автоматической проверки пишем такой тест:

it('AddToCart', (): void => {
  CatalogPage.openDirectlyCategory (Category.smartfony);
  CatalogPage.waitTiles();
  CatalogPage.ClickAddToCartOnTile(0);
  AnalyticsHelper.waitEvent();
  const events = Network.getDataLayer();
  AnalyticsHelper.expectEventsEquals(etalon, events);
});

Порядок действий здесь следующий:

  1. Открываем категорию «Смартфоны».
  2. Ждём загрузки плиток с товарами.
  3. Нажимаем кнопку «Добавить в корзину» на плитке с индексом 0. 
  4. Ждём событий. 
  5. Достаём DataLayer.
  6. Сравниваем события с эталоном. 

Функцию getDataLayer() легко реализовать в WebDriver, она вызывает JavaScript: 

@step()
getDataLayer() {
  return browser.execute(() => window.dataLayer);
}

В ней мы вызываем то же самое, что вручную вводили в консоли — window.dataLayer, — и получаем события, которые хотим проверить. 

Подход с использованием DataLayer очень простой и быстрый: достаточно вызвать всего одну JS-команду. Но он применим только для тех аналитических систем, где есть некий контейнер для событий. Второй важный недостаток — не все события можно проверить с помощью DataLayer. Например, когда мы кликаем на плитку с товаром, то переходим на другую страницу с другим DataLayer и такой переход невозможно проверить. Поэтому в подобных случаях мы применяем механизм с перехватом запросов. 

Перехват запросов


В тесте мы совершаем действия в браузере, он отправляет события в Google Analytics, а мы проверяем их, перехватывая запросы. 


Как это делать в консоли? Во вкладке Network можно просматривать события collect. Там много непонятных на первый взгляд параметров, из которых мы выбираем нужные. 


То же самое нужно сделать в коде: перехватить событие collect и отфильтровать запросы. Вот пример теста на клик, который мы не смогли бы реализовать в DataLayer:

it('Click', (): void => {
  CatalogPage.openDirectlyCategory(Category.smartfony);
  CatalogPage.waitTiles();
  const events = Network.enableGaEventsInterception();
  CatalogPage.clickTileWithIndex(0);
  AnalyticsHelper.waitEvent();
  AnalyticsHelper.expectEventsEquals(etalon, events);
});

После нажатия на плитку выполняется переход на другую страницу. Перехватчик будет сохранять события в переменную events. 

В тестах мы можем выполнять как команды обычного Webdriver, то есть делать клики, так и команды CDP для перехвата запросов:

global.cdp.send('Network.enable');
global.cdp.send('Network.setRequestInterception', {
  patterns: [
    {
      urlPattern: '*collect*',
    },
  ],
});
global.cdp.on('Network.requestIntercepted', ({ request }) => {
  …
});

Переменная request будет содержать перехваченный запрос. С ней можно дальше работать: фильтровать данные и делать проверки. 

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

Проверка в конечной системе


Мы проверяем, попадают ли в базу отправляемые браузером события. 


Так это выглядит в коде:

it('Add to cart', (): void => {
  CatalogPage.openDirectlyCategory(Category.smartfony);
  CatalogPage.waitTiles();
  const sessionId = Browser.getSessionId();
  CatalogPage.clickAddToCartOnTile(0);
  AnalyticsHelper.waitEvent();
  const events = QaApi.getEvents({ sessionId: sessionId });
  AnalyticsHelper.expectEventsEquals(etalon, events);
});

Порядок действий:

  1. Открываем категорию «Смартфоны». 
  2. Запоминаем сессию в браузере, с которой пользователь зашёл на сайт. 
  3. Ждём появления плиток.
  4. Нажимаем кнопку «Добавить в корзину» на плитке с индексом 0. 
  5. Опять ждём событий.
  6. Достаём событие по сессии.
  7. Сравниваем перехваченные события с эталоном. 

Здесь мы достаём события с помощью вспомогательного сервиса QaAPI. Под капотом у него выполняется запрос к базе, так что обращение к сервису можно заменить обращением к базе. 

Почему мы проверяем не через базу? Потому что тесты пишут много людей, а подключение к базе — это всегда какая-то одна учётная запись, которую очень удобно спрятать за сервисом, чтобы вызывать программно через клиент или проверять вручную с помощью Swagger. 

Для ручной проверки у каждого нашего сервиса есть Swagger; сюда можно передать sessionId — и командой getEvents достать все события из ClickHouse.


Преимущество подхода в том, что проверки получаются более полными, более интеграционными, мы проверяем всю цепочку действий. Но для этого требуется больше времени — тесты становятся достаточно долгими. 

Например, для Tracker у нас SLA равно пяти минутам, то есть событие гарантированно долетает до ClickHouse за пять минут. А вот для Google Analytics временной лаг составляет от четырёх часов до суток, поэтому такая проверка не годится. 

Кроме того, не у всех инженеров есть доступ к конечной системе. Действовать надо осторожно, так что к Tracker мы обращаемся точечными выверенными запросами — иначе можно положить базу, ведь в аналитических системах очень много событий.

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


Эта проверка есть в каждом тесте в рассмотренных выше примерах:

AnalyticsHelper.expectEventsEquals(etalon, events);

Что скрыто за конструкцией сравнения с эталоном? 

  1. Проверяем, есть ли интересующее нас событие в передаваемом массиве. 
  2. Проверяем значимые поля: в основном ID товаров и пользователей, названия виджетов и категорий. 
  3. Проверяем события на дубли.


Использование подходов


Тесты трекера мы делим на две группы:

  • быстрые — с перехватом запросов — используем для проверки релизов, когда хотим проверить быстро и не задерживать разработчика, который катит релиз;
  • медленные — с проверкой в конечной системе — используем для проверок по расписанию и с их помощью мониторим, что события в течение дня гарантированно долетают до базы данных.

Тесты Google Analytics тоже делим на две группы:

  • DataLayer — для проверки действий на странице;
  • перехваты запросов — для проверки переходов между страницами.



Решение проблем


Выше я упоминал, что у нас два основных источника проблем с получением метрик: многочисленные релизы и инциденты эксплуатации. 

Проблемы в релизах мы решаем встраиванием браузерных тестов в пайплайн. 


Пайплайн production-сборки одного из сервисов бэкенда. Пайплайн сайта выглядит примерно так же, только тестов в разы больше.

В production мы используем технологию B/G deploy: после сборки сервисы выкладываются в так называемую синюю зону — пользователи их не видят. Пока сервисы в этой зоне, их можно тестировать. Мы делаем это с помощью браузерных тестов с наивысшим приоритетом. После их успешного прохождения можно пускать на сервисы трафик. 

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


Сверху — график по Tracker, снизу — по Google Analytics. Слева — результаты тестирования аналитики, справа — данные из аналитических систем. Такие панели помогают наблюдать, как отправляются и поступают события. Благодаря этим графикам мы можем в течение дня оповещать вертикальные команды и реагировать на инциденты.

Оценка тестового покрытия по событиям аналитики


События из аналитических систем могут быть полезны тестировщикам для оценки тестового покрытия. Вот пример покрытия тестами кликов по виджетам:


Голубая колонка — это виджеты на разных страницах сайта, зелёная — количество кликов по ним пользователей. В правой колонке показано количество тестов на каждый клик в каждом виджете. 

Для разделения событий от пользователей и от тестов у нас встроена механика. Для каждой категории мы ставим свой namespace. Когда по сайту ходят пользователи, аналитические события отправляются с меткой namespace user, а когда тесты — с namespace test. По этим категориям мы строим таблицу со статистикой. 

Приведу несколько курьёзных примеров, которые мы выловили с помощью этой таблицы.


Пользователи кликнули на популярный виджет 5 млн раз — и при этом он не покрыт тестами! Если виджет сломается из-за релиза, это заметит большое количество людей — для нас будут потери.

А вот пример с непопулярным виджетом. На него не идёт трафик, но зато мы его тестируем.



Резюме


В статье рассмотрены три подхода, которые мы в Ozon применяем для тестирования аналитики: 

  1. С использованием DataLayer. 
  2. Перехваты запросов. 
  3. Проверки в конечной системе. 

У каждого подхода есть свои преимущества и недостатки. Поэтому правильное решение — использовать комбинацию подходов.

Мы запускаем автотесты по двум сценариям:

  • во время релизов сайта и бекендов — это позволяет находить ошибки до выхода новой функциональности и предотвращать возможные потери; 
  • регулярно по расписанию — что позволяет отлавливать ошибки в течение дня.

Все это помогает нам поддерживать в рабочем состоянии нашу систему аналитики и предоставлять внутренним заказчикам точные и свежие данные.
Tags:
Hubs:
Total votes 58: ↑58 and ↓0+58
Comments4

Articles

Information

Website
ozon.tech
Registered
Founded
Employees
5,001–10,000 employees
Location
Россия