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

Проблемы местного земледелия

Здесь, в Tanker, мы разрабатываем SDK для обеспечения конфиденциальности с открытым исходным кодом. Мы гордимся своей инфраструктурой непрерывной интеграции, но не лишены недостатков. Мы начали проводить тесты в браузере и на узлах, используя Karma и тестовую среду Chai. Тесты в браузере проводились в Edge и IE (в Windows), Safari (в macOS), а также в Firefox и Chrome (в Linux). Вы уже можете видеть, что некоторые очень распространенные конфигурации, такие как Chrome в Windows, не тестировались автоматически. Мы также использовали только последние версии ОС, что не то, что делают обычные пользователи.

Мы также столкнулись с некоторыми другими проблемами, которые заставили нас рассмотреть другое решение:
У нас были проблемы с Edge и IE, вынуждая нас запускать скрипт для удаления файлов кеша перед каждой сборкой.

  • Другая проблема в Windows заключается в том, что вы не можете запускать графические приложения из службы, поэтому мы используем сервер Python, запускаемый вручную, в качестве временного решения.
  • macOS имеет тенденцию снижать приоритетность Safari, что делает его очень медленным, когда в браузере нет явной активности (например, щелчка мыши), поэтому у нас есть сценарий, который периодически выводит Safari на передний план.
  • Карма немного нестабильна при параллельной работе с несколькими браузерами. Чтобы запустить несколько браузеров за приемлемое для разработчиков время, нужна большая ферма.

Со всей этой информацией мы хотели попробовать хорошо известный BrowserStack.

Пробуем BrowserStack

Первый шаг - создать учетную запись BrowserStack, которая позволит вам выполнять автоматизацию. Это бесплатно для проектов с открытым исходным кодом, таких как наш. Теперь у вас должно быть имя пользователя и токен доступа. После этого вы можете добавить karma-browserstrack-launcher в свой проект в качестве зависимости разработчика. Делаем это с помощью пряжи:

$ yarn add --dev karma-browserstrack-launcher

Теперь пора настроить карму для использования этого лаунчера. Обычно это делается в файле karma.conf.js:

config.set({
  …
  customLaunchers: {
    ChromeWindows: {
      base: ‘BrowserStack’,
      browser: ‘Chrome’,
      browser_version: ‘71.0’,
      os: ‘Windows’,
      os_version: ‘10’,
    },
  },
})

Это добавляет одну настраиваемую программу запуска для запуска ваших тестов на серверах BrowserStack! Но для этого вам нужно пройти аутентификацию. Вероятно, вы не захотите оставлять свои учетные данные в исходном коде, но вы можете настроить свой любимый инструмент CI / CD с именем пользователя / ключом доступа в качестве переменной среды. Локально вы можете:

$ export BROWSER_STACK_USERNAME=<YOUR_USER_NAME>
$ export BROWSER_STACK_ACCESS_KEY=<YOUR_ACCESS_KEY>

Теперь вы запускаете свой набор тестов с помощью:

$ yarn karma --browsers ChromeWindows

И вы видите, что происходит в браузере с видеозаписью.

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

Тонкая настройка

Чтобы отсортировать сборки в веб-интерфейсе BrowserStack, если у вас несколько проектов, вы можете добавить имя проекта в конфигурацию Karma. Еще один полезный вариант: запуск большого набора тестов на мобильном устройстве в центре обработки данных вдали от вашего офиса может легко занять более 5 минут, поэтому вы можете увеличить время ожидания:

config.set({
  …
  browserStack: {
    project: ‘<YOUR_PROJECT_NAME>’,
    timeout: 600,
  },
})

Вы можете добавить BrowserStack на свою страницу проекта GitLab / GitHub. Для его настройки потребуется пара команд:

$ curl -u “<YOUR_USER_NAME>:<YOUR_ACCESS_KEY>” https://api.browserstack.com/automate/projects.json

Найдите идентификатор своего проекта и:

$ curl -u “<YOUR_USER_NAME>:<YOUR_ACCESS_KEY>” https://api.browserstack.com/automate/projects/<YOUR_PROJECT_ID>/badge_key

Вы получите ключ от значка. Теперь в вашем файле README:

[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=<YOUR_BADGE_KEY>)

Затем, чтобы получить результаты тестов в веб-интерфейсе BrowserStack, вы можете добавить репортер результатов тестов BrowserStack. Например, если вы уже используете репортер Mocha:

config.set({
  …
  reporters: [‘mocha’, ‘BrowserStack’],
})

В конечном итоге мы столкнулись с проблемой с некоторыми браузерами, которые не могли подключиться к localhost (например, Firefox 65 в Windows). Эту проблему можно решить с помощью:

config.set({
  …
  hostname: ‘bs-local.com’,
})

Это действительно нужно для Safari при тестировании iOS.

Теперь вы можете добавить эти браузеры в свой любимый инструмент CI / CD. Мы добавили его в travis, он будет запускать параллельные сборки в отдельных контейнерах для каждого браузера.

BrowserStack легко настроить и использовать…

Как видите, мы не писали никакого кода для этого руководства. Мы только добавили несколько строк конфигурации. BrowserStack действительно прост в настройке и использовании.

… Но не решает всех наших проблем

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

В BrowserStack Edge действительно стабилен. Нам не нужно выполнять какую-либо очистку, как на нашей локальной ферме, потому что у нас всегда есть чистые экземпляры Windows. Однако здесь возникает проблема: мы используем локальное хранилище, и его слишком много для Internet Explorer. В нашей локальной ферме мы настроили машину на прием большего объема хранилища, чем указано по умолчанию для нашего набора тестов (в реальной жизни это не проблема для наших пользователей). По словам поддержки, это сделать невозможно. Итак, мы не можем использовать автоматизацию в IE.

Заключение

BrowserStack - хороший инструмент, который позволяет нам быстро настраивать автоматические тесты для более широкого диапазона конфигураций (мобильные телефоны, старые версии браузеров / операционных систем…). Но, к сожалению, для нас это не меняет правила игры. Изначально мы планировали избавиться от нашей местной фермы, но мы не сможем этого сделать, пока не будут устранены некоторые проблемы:

  • Мы не можем запускать автоматические тесты в IE
  • Тесты проходят медленнее, потому что ... ну, это не наша локальная сеть.

Тем не менее, BrowserStack - отличное дополнение к тестированию нашей локальной фермы, которое обеспечивает нам большую гибкость. В качестве бонуса он показывает внешнему миру, что мы тестируем все виды конфигураций и заботимся обо всех пользователях, а не только о тех, у кого есть новейшие устройства. Пока мы тестируем 11 различных комбинаций.