Очень редко при создании веб-приложений вы можете точно гарантировать, с какой именно операционной системой, браузером и версией этого браузера будут работать ваши пользователи. Даже в этом случае есть вероятность, что это не тот браузер, который инженеры используют для его создания, поэтому кроссбраузерное тестирование должно быть требованием в подавляющем большинстве проектов.
К сожалению, часто это не так, и это приводит к непоследовательности и часто значительно ухудшает работу веб-приложений в некоторых браузерах. В прошлом кроссбраузерное тестирование было утомительным, отнимающим много времени и, смею сказать, скучным! Надеюсь, эта статья покажет вам наш путь к совершенствованию этого процесса в нашем проекте и то, как такие инструменты, как BrowserStack Automate, могут действительно помочь.
Наша ситуация
В настоящее время мы работаем над веб-приложением, чтобы помочь нашей команде онлайн-планирования - это люди, которые проводят первоначальное планирование, чтобы убедиться, что есть достаточные мощности для удовлетворения ожидаемого спроса по всей стране, выполняющего онлайн-заказы.
Как и во многих крупных организациях, в Sainsbury’s много пользователей Windows. Эти машины ограничены политикой, управляемой компанией. Это означает, что многие коллеги, для которых мы создаем веб-приложения, привязаны к определенной версии браузера. Все инженеры-программисты в команде, с которой я работаю, работают на Mac, поэтому мы знали, что потенциально могут возникнуть несоответствия даже между одним и тем же браузером в разных операционных системах. Несмотря на то, что мы точно знали, из какого браузера и операционной системы пользователи нашего веб-приложения будут получать к нему доступ, что случается редко, мы знали, что у нас все еще могут возникнуть проблемы с кроссбраузерностью.
Работа в гибкой команде означала, что мы постоянно взаимодействовали с нашими пользователями и предоставляли им новые функции, чтобы получить обратную связь, но иногда мы могли видеть сообщения от наших пользователей типа «Кажется, я не могу…». Когда мы открывали веб-приложение в той же среде и проверяли, часто проблема не может быть воспроизведена нами. Мы используем общие образы докеров от разработчика до производства, и перед выпуском кода он проходит через наш конвейер. Этот конвейер состоит из модульных тестов, функциональных тестов и сквозных тестов. Эти тесты должны быть пройдены, поэтому мы уверены, что любые функции, которые мы выпускаем, хорошо протестированы, и наша установка тиражируется во всех средах.
Чтобы сделать ситуацию более интересной, команда, для которой мы создаем приложение, находится в Лондоне, мы находимся в Манчестере, поэтому, хотя у нас есть инструменты для демонстрации экрана и возможность просмотра проблемы, диагностика причины может быть немного сложнее! На машинах с Windows, которые у нас были, не было адекватных инструментов разработки, а консоль была заблокирована политикой, управляемой организацией, так что это не сильно помогло нам при диагностике проблемы.
Введите BrowserStack
Мы воспользовались пробной версией Browerstack (https://www.browserstack.com /), чтобы использовать его функцию BrowserStack Live для диагностики наших проблем с Chrome, специфичных для Windows.
Нам удалось запустить экземпляр той же версии Chrome, которую использовала команда, и диагностировать проблему. Несмотря на то, что наши веб-приложения заблокированы и доступны только в сетях Sainsbury, мы можем использовать функцию локального туннеля BrowserStack (https://www.browserstack.com/local-testing) для обеспечения доступа.
А как насчет текущего…
Теперь нам нужен был способ проверить нашу систему в других браузерах без необходимости вручную тестировать ее с каждым выпуском. Мы уже написали несколько сквозных тестов для нашего веб-приложения с использованием инструмента WebDriverIO на основе Selenium (http://webdriver.io /). Оказалось, что уже существует пакет для запуска наших тестов WebDriver в BrowserStack, поэтому их объединение оказалось довольно простым процессом. В течение нескольких часов мы смогли получить наши сквозные (E2E) тесты, работающие в BrowserStack, с возможностью тестирования браузеров, работающих в разных операционных системах и разных версиях браузеров. Очень помогает то, что команда может быстро запустить тесты E2E для конкретной версии Chrome в Windows, которую будут использовать наши пользователи.
Так что, если тесты не пройдут?
BrowserStack имеет отличную функцию, которая записывает каждое выполнение тестов в виде видео, поэтому, если вы получаете сбой в тестах, вы можете просто войти в систему и просмотреть запись сбоя. Как только вы обнаружите, где он не работает, вы можете использовать BrowserStack Live, чтобы перейти в то же место в той же операционной системе и браузере, где тесты не прошли, и исследовать проблему с помощью инструментов разработчика.
Так есть ли уловки?
Да, немного. Мы лично обнаружили, что туннельный доступ из BrowserStack в нашу среду был медленным, и между запуском одного теста и следующего могли быть задержки. Если приложение было общедоступным и нам не требовалось туннелирование, производительность значительно увеличивалась, но для нас такой вариант был неприемлемым.
Мы также обнаружили, что селекторы и команды WebDriverIO не работают во всех браузерах одинаково, некоторые селекторы зависят от браузера, и нам пришлось реализовать некоторые обходные пути, чтобы тесты запускались как в Chrome, так и в Internet Explorer.
В целом мы обнаружили, что BrowserStack - отличный инструмент для простого тестирования нашего веб-приложения в браузерах с использованием существующих тестов E2E. Сочетание доступных операционных систем и браузеров действительно велико - и мы даже не рассматривали мобильные варианты, которые также предлагаются.
