BrowserStack интеграция

Karma — это тестовый раннер для JavaScript, ориентированный на автоматическое выполнение тестов в разных браузерах. BrowserStack предоставляет облачную инфраструктуру для запуска тестов в реальных браузерах и на реальных устройствах, что позволяет проверить кросс-браузерную совместимость без локальной установки множества окружений. Интеграция Karma с BrowserStack позволяет автоматически запускать тесты на удалённых платформах и получать подробные отчёты о результатах.

Установка необходимых пакетов

Для работы с BrowserStack через Karma требуются следующие npm-пакеты:

npm install karma karma-browserstack-launcher --save-dev
  • karma — основной тестовый раннер.
  • karma-browserstack-launcher — плагин для подключения BrowserStack.

Дополнительно рекомендуется иметь установленный любой тестовый фреймворк, например, Jasmine или Mocha:

npm install jasmine-core karma-jasmine --save-dev

Настройка файла karma.conf.js

Файл конфигурации Karma является ключевым элементом интеграции. Для подключения BrowserStack необходимо добавить следующие секции:

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'], // Выбранный тестовый фреймворк
    files: [
      'src/**/*.js',
      'test/**/*.spec.js'
    ],
    reporters: ['progress', 'BrowserStack'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: ['BS_Chrome', 'BS_Firefox'], // Названия браузеров, определяемые ниже
    singleRun: true,
    concurrency: 2, // Количество параллельных сессий BrowserStack
    browserStack: {
      username: process.env.BROWSERSTACK_USERNAME,
      accessKey: process.env.BROWSERSTACK_ACCESS_KEY,
      build: 'karma-browserstack-integration',
      name: 'JS Unit Tests'
    },
    customLaunchers: {
      BS_Chrome: {
        base: 'BrowserStack',
        browser: 'chrome',
        browser_version: 'latest',
        os: 'Windows',
        os_version: '11'
      },
      BS_Firefox: {
        base: 'BrowserStack',
        browser: 'firefox',
        browser_version: 'latest',
        os: 'OS X',
        os_version: 'Monterey'
      }
    }
  });
};

Ключевые моменты конфигурации:

  • browserStack.username и browserStack.accessKey должны храниться в переменных окружения, чтобы не раскрывать ключи в коде.
  • customLaunchers определяет список удалённых браузеров и платформ для запуска тестов.
  • singleRun: true гарантирует, что тесты будут выполнены один раз и завершат процесс Karma.

Выбор браузеров и платформ

BrowserStack поддерживает большое количество браузеров и операционных систем. В customLaunchers можно указать конкретные версии браузеров, например:

BS_Safari: {
  base: 'BrowserStack',
  browser: 'safari',
  browser_version: '15.4',
  os: 'OS X',
  os_version: 'Monterey'
}

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

Параллельное выполнение тестов

Параметр concurrency контролирует количество тестов, выполняемых одновременно на BrowserStack. Высокое значение ускоряет процесс, но требует больше параллельных сессий по тарифу BrowserStack. Например:

concurrency: 5

Обеспечивает одновременный запуск тестов на пяти удалённых браузерах.

Интеграция с CI/CD

Для автоматического запуска тестов на CI/CD-платформах (GitHub Actions, GitLab CI, Jenkins) необходимо:

  1. Настроить переменные окружения BROWSERSTACK_USERNAME и BROWSERSTACK_ACCESS_KEY.
  2. Добавить команду запуска Karma с указанием конфигурационного файла:
karma start karma.conf.js
  1. В CI/CD-конфигурации обеспечить параллельный запуск тестов для ускорения сборки.

Пример GitHub Actions:

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20'
      - name: Install dependencies
        run: npm ci
      - name: Run Karma tests
        env:
          BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
          BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
        run: karma start karma.conf.js

Отчёты и отладка

Karma с BrowserStack поддерживает несколько типов репортов:

  • progress — базовый вывод прогресса тестов.
  • dots — компактный вывод по тестам.
  • BrowserStack — специфический вывод с ссылкой на результаты на платформе BrowserStack.

Для отладки проблем рекомендуется включать логирование уровня config.LOG_DEBUG и проверять консоль BrowserStack, где отображаются ошибки JavaScript и скриншоты тестов.

Советы по стабильности тестов

  • Использовать конкретные версии браузеров вместо latest, чтобы минимизировать разницу в поведении между тестовыми сессиями.
  • Ограничивать количество одновременно запускаемых сессий при нестабильном интернет-соединении.
  • Регулярно очищать кэш и куки на удалённых тестовых сессиях, чтобы тесты были детерминированными.
  • Разделять тесты на логические блоки и запускать наиболее критичные на старших версиях браузеров для быстрого выявления регрессий.

Интеграция Karma с BrowserStack позволяет автоматизировать кросс-браузерное тестирование, упрощает CI/CD-процессы и повышает качество JavaScript-приложений. Такой подход обеспечивает покрытие тестами реальных окружений без необходимости локальной установки множества браузеров и операционных систем.

Оглавление