Тестирование мобильных версий сайтов

Protractor — инструмент для end-to-end тестирования Angular и не только Angular приложений, поддерживающий работу с браузерами через WebDriver. Для мобильных версий сайтов ключевым аспектом является имитация поведения мобильного устройства и корректная проверка адаптивного интерфейса.

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

Для эмуляции мобильного устройства в Protractor используется конфигурация браузера через опции chromeOptions. Основные параметры:

capabilities: {
    browserName: 'chrome',
    chromeOptions: {
        args: ['--window-size=375,667'], // размеры экрана iPhone 6/7/8
        mobileEmulation: {
            deviceName: 'iPhone X'
        }
    }
}

Примечания:

  • --window-size задаёт размеры окна браузера, что важно для тестов без использования встроенной эмуляции.
  • mobileEmulation.deviceName позволяет использовать предустановленные настройки устройств, включая размеры экрана, плотность пикселей и user-agent.

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

Для мобильной версии сайта важна проверка расположения элементов, видимости и корректного масштабирования. В Protractor это выполняется через методы:

element(by.css('.menu')).isDisplayed().then(function(visible) {
    expect(visible).toBe(true);
});

element(by.css('.header')).getCssValue('font-size').then(function(size) {
    expect(size).toBe('16px');
});

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

  • Проверка CSS-свойств помогает убедиться, что текст и элементы корректно масштабируются.
  • Методы getLocation() и getSize() позволяют сравнивать позиции и размеры блоков для разных разрешений.

Работа с сенсорными событиями

Мобильные устройства используют жесты: свайпы, долгие нажатия и касания. Protractor поддерживает эмуляцию этих действий через browser.actions():

let menu = element(by.css('.slider'));
browser.actions().dragAndDrop(menu, {x: -200, y: 0}).perform();

browser.actions().mouseDown(element(by.css('.button'))).mouseUp().perform();

Важно:

  • dragAndDrop позволяет имитировать горизонтальный или вертикальный свайп.
  • mouseDown и mouseUp могут использоваться для эмуляции долгого нажатия, хотя точная имитация multi-touch ограничена стандартными возможностями WebDriver.

Тестирование адаптивной верстки с разными разрешениями

Protractor поддерживает динамическое изменение размеров окна, что позволяет тестировать сайт на нескольких разрешениях в одном тесте:

browser.driver.manage().window().setSize(320, 568); // iPhone SE
browser.get('https://example.com');
expect(element(by.css('.menu')).isDisplayed()).toBe(true);

browser.driver.manage().window().setSize(414, 896); // iPhone 11 Pro Max
expect(element(by.css('.menu')).isDisplayed()).toBe(true);

Рекомендации:

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

Работа с медиа-запросами и скрытыми элементами

Мобильные версии часто скрывают или показывают элементы через CSS media queries. Для проверки таких изменений применяется метод isDisplayed() и проверка CSS-свойств:

element(by.css('.mobile-menu')).isDisplayed().then(function(visible) {
    expect(visible).toBe(true); // должен отображаться только на малых экранах
});

Дополнительно можно проверять свойства display и visibility:

element(by.css('.desktop-menu')).getCssValue('display').then(function(value) {
    expect(value).toBe('none'); // скрыт на мобильной версии
});

Синхронизация с асинхронным контентом

Мобильная версия часто подгружает данные динамически. В Protractor можно использовать ожидания (ExpectedConditions) для корректного тестирования:

let EC = protractor.ExpectedConditions;
let menu = element(by.css('.menu'));
browser.wait(EC.visibilityOf(menu), 5000);
expect(menu.isDisplayed()).toBe(true);

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

  • Использование ExpectedConditions помогает избежать нестабильных тестов из-за задержек загрузки контента.
  • Можно комбинировать проверки видимости и свойств CSS для комплексного тестирования адаптивного интерфейса.

Производительность и оптимизация

Для мобильных версий важно учитывать скорость загрузки и рендеринга элементов:

  • Использование browser.executeScript позволяет измерять время рендеринга:
browser.executeScript("return window.performance.timing.loadEventEnd - window.performance.timing.navigationStart;")
    .then(function(loadTime) {
        expect(loadTime).toBeLessThan(3000);
    });
  • Эмуляция медленного соединения через DevTools Protocol помогает тестировать производительность на мобильных сетях:
browser.driver.sendChromiumCommand('Network.emulateNetworkConditions', {
    offline: false,
    latency: 200,
    downloadThroughput: 500 * 1024,
    uploadThroughput: 500 * 1024
});

Локаторы для мобильной версии

Адаптивные версии часто меняют структуру DOM или скрывают части элементов. Рекомендуется использовать локаторы по CSS-классам и атрибутам, а не по фиксированным позициям. Примеры:

element(by.css('[data-test="mobile-login-button"]')).click();
element(by.xpath('//div[contains(@class, "slider-item")]')).getText();

Использование data-test атрибутов обеспечивает стабильность тестов при изменении верстки.

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

Тестирование мобильной версии важно интегрировать в автоматические пайплайны. Protractor совместим с Jenkins, GitLab CI и GitHub Actions. Основные моменты:

  • Настройка headless режима Chrome (--headless, --disable-gpu) для ускорения тестов.
  • Параллельное выполнение тестов через multiCapabilities.
  • Логирование ошибок и скриншоты при падении теста:
afterEach(async function() {
    let png = await browser.takeScreenshot();
    require('fs').writeFileSync('screenshot.png', png, {encoding: 'base64'});
});

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

Оглавление