Кросс-браузерное тестирование

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

Настройка конфигурации для нескольких браузеров

Protractor использует файл конфигурации protractor.conf.js, где задаются основные параметры тестирования. Для кросс-браузерного тестирования необходимо определить массив браузеров в параметре multiCapabilities:

exports.config = {
  framework: 'jasmine',
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['tests/**/*.spec.js'],
  
  multiCapabilities: [
    { browserName: 'chrome' },
    { browserName: 'firefox' },
    { browserName: 'edge' }
  ]
};

Особенности multiCapabilities:

  • Каждый объект описывает отдельный браузер и его опции.
  • Можно задавать версии браузеров и платформы для тестов на удалённых серверах (например, Sauce Labs или BrowserStack).
  • Тесты запускаются параллельно для каждого браузера, что ускоряет проверку.

Если требуется запуск тестов последовательно, используется параметр capabilities с циклической подстановкой.

Использование Selenium WebDriver для кросс-браузерности

Protractor построен поверх Selenium WebDriver, что обеспечивает доступ к нативным функциям браузеров:

  • Управление окнами и вкладками: позволяет тестировать поведение интерфейса при изменении размеров окна, открытии новых вкладок или окон.
  • Выполнение JavaScript в контексте браузера: критично для проверки скриптов, которые могут вести себя по-разному в Chrome и Firefox.
  • Обработка alert, confirm и prompt: браузеры могут различно реализовывать модальные окна.

Пример настройки специфических опций для Chrome:

multiCapabilities: [
  {
    browserName: 'chrome',
    chromeOptions: {
      args: ['--disable-infobars', '--window-size=1920,1080']
    }
  }
]

Для Firefox используется moz:firefoxOptions, где можно задавать профиль, отключать уведомления и задавать размеры окна.

Тестирование элементов интерфейса

Разные браузеры могут по-разному обрабатывать CSS и HTML, поэтому важно учитывать:

  • Выбор селекторов: использовать уникальные идентификаторы (id) или атрибуты data-test, так как классы и пути XPath могут вести себя непредсказуемо в разных браузерах.
  • Проверка отображения и позиции элементов: методы getLocation(), getSize() и isDisplayed() позволяют убедиться, что элементы видимы и корректно размещены.
  • Взаимодействие с элементами: клик, ввод текста, drag-and-drop — все действия должны быть протестированы во всех целевых браузерах.

Пример:

element(by.css('.submit-button')).click();
expect(element(by.id('result')).getText()).toEqual('Success');

Асинхронность и ожидания

Кросс-браузерные тесты особенно чувствительны к таймингам загрузки страниц и реакций элементов. Для стабильности необходимо использовать explicit waits:

let EC = protractor.ExpectedConditions;
let submitButton = element(by.css('.submit-button'));

browser.wait(EC.elementToBeClickable(submitButton), 5000);
submitButton.click();

Преимущества:

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

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

Для ускорения кросс-браузерного тестирования используется shardTestFiles:

multiCapabilities: [
  {
    browserName: 'chrome',
    shardTestFiles: true,
    maxInstances: 2
  },
  {
    browserName: 'firefox',
    shardTestFiles: true,
    maxInstances: 2
  }
]
  • shardTestFiles: разбивает тесты на отдельные файлы для параллельного запуска.
  • maxInstances: ограничивает число одновременно запускаемых экземпляров браузера, чтобы не перегружать систему.

Интеграция с облачными сервисами

Для тестирования на разных версиях браузеров и операционных системах удобно использовать облачные платформы:

  • BrowserStack: поддержка Windows, macOS, мобильных устройств.
  • Sauce Labs: интеграция с Protractor через Remote WebDriver, возможность задавать версии браузеров.

Пример настройки для BrowserStack:

multiCapabilities: [{
  'browserName': 'Chrome',
  'browser_version': 'latest',
  'os': 'Windows',
  'os_version': '10',
  'resolution': '1920x1080',
  'browserstack.user': 'USERNAME',
  'browserstack.key': 'ACCESS_KEY'
}]

Отладка кросс-браузерных тестов

  • Логи браузера: использование browser.manage().logs().get('browser') помогает выявлять ошибки JS, специфичные для браузера.
  • Скриншоты: browser.takeScreenshot() позволяет фиксировать визуальные отличия.
  • Анализ медленных тестов: профилирование отдельных шагов с помощью console.time() и console.timeEnd().

Практические рекомендации

  • Предпочтение селекторам id и data-test для стабильности.
  • Всегда использовать явные ожидания (ExpectedConditions) для интерактивных элементов.
  • Параллельное выполнение тестов ускоряет проверку, но требует контроля над ресурсами.
  • Регулярное тестирование на основных браузерах предотвращает накопление проблем совместимости.
  • Для критически важных элементов интерфейса рекомендуется создавать отдельные визуальные тесты с проверкой рендеринга.

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

Оглавление