Эмуляция мобильных устройств

Protractor, как инструмент для end-to-end тестирования Angular и других веб-приложений, поддерживает возможность эмуляции мобильных устройств через интеграцию с Selenium WebDriver и Chrome DevTools Protocol. Это позволяет выполнять тесты так, как если бы они запускались на реальном мобильном устройстве, включая проверку адаптивного дизайна, поведения касаний и сенсорных событий.

Настройка эмуляции мобильного устройства

Для включения эмуляции мобильного устройства в Protractor необходимо использовать объект capabilities в конфигурационном файле protractor.conf.js. Основным подходом является настройка Chrome через опцию chromeOptions.

Пример настройки эмуляции iPhone X:

exports.config = {
  capabilities: {
    browserName: 'chrome',
    chromeOptions: {
      mobileEmulation: {
        deviceName: 'iPhone X'
      },
      args: ['--disable-infobars']
    }
  },
  framework: 'jasmine',
  specs: ['specs/**/*.spec.js']
};

Ключевые моменты:

  • mobileEmulation.deviceName — задает конкретное устройство для эмуляции. Список поддерживаемых устройств совпадает с настройками DevTools.
  • chromeOptions.args — позволяет добавить дополнительные параметры запуска браузера, например отключение инфо-баров, включение режима без головы (--headless) или отключение GPU.

Настройка пользовательских параметров устройства

Если требуется эмулировать устройство с кастомными параметрами экрана, а не из предустановленного списка, можно использовать объект deviceMetrics:

chromeOptions: {
  mobileEmulation: {
    deviceMetrics: {
      width: 375,
      height: 812,
      pixelRatio: 3.0
    },
    userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Mobile/15E148 Safari/604.1'
  }
}

Пояснение параметров:

  • width и height — ширина и высота экрана в пикселях.
  • pixelRatio — плотность пикселей экрана.
  • userAgent — строка агента пользователя, которая имитирует браузер мобильного устройства. Это важно для корректного отображения адаптивного контента и выбора мобильной версии сайта.

Использование эмуляции в тестах

После настройки конфигурации эмуляция мобильного устройства активна автоматически при запуске тестов. В тестовых скриптах можно использовать все привычные методы Protractor, такие как element(), by.css() и browser.get(). Дополнительно важно учитывать особенности мобильного интерфейса:

  • Элементы могут быть скрыты или появляться только при прокрутке. Для взаимодействия с такими элементами рекомендуется использовать методы browser.executeScript() или browser.actions().
  • Сенсорные события, например tap или swipe, можно эмулировать через browser.actions().mouseMove(...).click().perform() или кастомные JavaScript-сценарии.

Пример взаимодействия с элементом на мобильной странице:

it('должен кликнуть по кнопке на мобильном экране', async () => {
  await browser.get('https://example.com');
  const menuButton = element(by.css('.menu-button'));
  await browser.actions().mouseMove(menuButton).click().perform();
});

Тестирование адаптивного дизайна

Эмуляция мобильного устройства в Protractor позволяет проверять:

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

Для смены ориентации экрана используется метод setOrientation через Chrome DevTools Protocol:

await browser.driver.sendChromiumCommand('Emulation.setDeviceMetricsOverride', {
  width: 812,
  height: 375,
  deviceScaleFactor: 3,
  mobile: true,
  screenOrientation: { type: 'landscapePrimary', angle: 90 }
});

Ограничения и особенности

  • Эмуляция не заменяет полностью тестирование на реальных устройствах. Она подходит для проверки визуальных и функциональных аспектов, но не позволяет воспроизвести физические сенсорные отклики или поведение сети.
  • Некоторые устройства могут требовать специфических настроек userAgent для корректной работы медиа-запросов CSS и JavaScript.
  • При использовании режима headless некоторые графические эффекты могут отображаться иначе, чем на реальном мобильном устройстве.

Рекомендации по использованию

  • Использовать предустановленные устройства для ускорения настройки тестов.
  • Для сложных сценариев адаптивного дизайна применять кастомные метрики экрана и строки userAgent.
  • Проверять как портретную, так и ландшафтную ориентацию.
  • Комбинировать эмуляцию с тестами на реальных устройствах при критических проектах.

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

Оглавление