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

Эмуляция мобильных устройств позволяет тестировать веб-приложения в условиях, близких к реальной работе на смартфонах и планшетах, без необходимости использования физических устройств. В WebdriverIO это достигается с помощью возможностей Selenium WebDriver и Chrome DevTools Protocol (CDP), которые предоставляют гибкие средства для настройки размеров экрана, плотности пикселей и поведения сенсорных событий.

Настройка эмуляции через capabilities

Эмуляция устройства начинается с конфигурации capabilities в файле wdio.conf.js. Основные параметры:

deviceName – имя устройства, которое нужно эмулировать. Для Chrome доступна встроенная библиотека устройств.
platformName – платформа (Android или iOS).
browserName – браузер для тестирования (chrome или safari).
screenResolution – разрешение экрана.
pixelRatio – плотность пикселей для корректного отображения графики.

Пример конфигурации для эмуляции iPhone X в Chrome:

capabilities: [{
    browserName: 'chrome',
    'goog:chromeOptions': {
        mobileEmulation: { deviceName: 'iPhone X' },
        args: ['--disable-infobars']
    }
}]

Здесь ключевым является mobileEmulation.deviceName, который позволяет использовать встроенные пресеты устройств Chrome. Помимо этого, можно указать кастомные размеры и плотность пикселей:

'goog:chromeOptions': {
    mobileEmulation: {
        deviceMetrics: { width: 375, height: 812, pixelRatio: 3 },
        userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X)...'
    }
}

Использование Chrome DevTools Protocol

WebdriverIO предоставляет интеграцию с CDP через сервис devtools. Это открывает доступ к низкоуровневым функциям браузера, включая эмуляцию сенсорных событий, ориентации устройства и сетевых условий.

Пример включения сервиса в wdio.conf.js:

services: ['devtools'],
capabilities: [{
    browserName: 'chrome'
}]

После этого можно использовать команды CDP в тестах:

await browser.cdp('Emulation', 'setDeviceMetricsOverride', {
    width: 414,
    height: 896,
    deviceScaleFactor: 3,
    mobile: true
});

await browser.cdp('Emulation', 'setTouchEmulationEnabled', { enabled: true });

Команды setDeviceMetricsOverride и setTouchEmulationEnabled позволяют полностью контролировать размеры экрана и поведение тач-событий, включая свайпы и жесты.

Эмуляция ориентации устройства

Для тестирования адаптивного дизайна важно проверять как портретную, так и ландшафтную ориентацию. В WebdriverIO через CDP это делается так:

// Портретная ориентация
await browser.cdp('Emulation', 'setDeviceOrientationOverride', {
    alpha: 0,
    beta: 0,
    gamma: 0
});

// Ландшафтная ориентация
await browser.cdp('Emulation', 'setDeviceOrientationOverride', {
    alpha: 0,
    beta: 0,
    gamma: 90
});

Здесь alpha, beta и gamma задают углы поворота устройства по осям. Это позволяет проверить корректное расположение элементов интерфейса при смене ориентации.

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

Мобильные веб-приложения часто требуют взаимодействия с тач-экраном: свайпы, тап, масштабирование. Эмуляция через WebdriverIO с CDP поддерживает эти действия:

// Свайп вверх
await browser.touchPerform([
    { action: 'press', options: { x: 200, y: 600 } },
    { action: 'moveTo', options: { x: 200, y: 100 } },
    { action: 'release' }
]);

// Двойной тап
await browser.touchAction([
    { action: 'tap', options: { x: 150, y: 400 } },
    { action: 'tap', options: { x: 150, y: 400 } }
]);

Использование touchPerform и touchAction позволяет точно воспроизвести взаимодействие пользователя с мобильным интерфейсом.

Эмуляция сетевых условий

Тестирование под различными сетевыми условиями — ключевой аспект мобильного QA. Сервис devtools позволяет эмулировать задержку сети и скорость передачи данных:

await browser.cdp('Network', 'enable');
await browser.cdp('Network', 'emulateNetworkConditions', {
    offline: false,
    latency: 200,
    downloadThroughput: 500 * 1024,
    uploadThroughput: 500 * 1024
});

Здесь задаются:

latency — задержка сети в миллисекундах
downloadThroughput и uploadThroughput — скорость загрузки и выгрузки данных в байтах/сек
offline — режим оффлайн

Это позволяет проверять поведение приложения при слабом соединении или симулировать режим оффлайн.