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

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

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

Для начала работы с эмуляцией мобильных устройств необходимо использовать функционал, предоставляемый Playwright для настройки конфигурации браузера и его симуляции. В Playwright доступны эмуляции самых популярных мобильных платформ, включая iOS и Android, что позволяет проверить поведение страницы на устройствах таких как iPhone, Pixel и другие.

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

const { chromium, devices } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext({
    ...devices['iPhone 12']
  });

  const page = await context.newPage();
  await page.goto('https://example.com');
  
  // Дополнительные шаги, например, взаимодействие с элементами на странице

  await browser.close();
})();

В данном примере используется предустановленный профиль устройства iPhone 12. Playwright предоставляет большое количество таких профилей, которые можно использовать для эмуляции различных моделей мобильных устройств.

Доступные устройства для эмуляции

Playwright поддерживает широкий список мобильных устройств с различными характеристиками. Например:

  • iPhone (iPhone 6, 7, 8, X, 12 и другие)
  • iPad (iPad Pro, iPad Mini и т. д.)
  • Pixel (Pixel 2, 3, 4, 5 и другие)
  • Samsung Galaxy (S9, S10, S20 и другие)

Каждое устройство имеет свои параметры экрана, такие как разрешение, плотность пикселей, ориентация экрана (портретная или ландшафтная) и другие характеристики. Для быстрого доступа к этим профилям в Playwright используются встроенные объекты из модуля devices.

Чтобы получить список доступных мобильных устройств для эмуляции, можно использовать следующую команду:

console.log(devices);

Изменение параметров устройства

Помимо использования предустановленных устройств, можно настроить кастомное устройство, определив собственные параметры, такие как размер экрана, плотность пикселей (DPR), ориентация, скорость сети и многое другое.

Пример настройки кастомного устройства:

const { chromium } = require('playwright');

const customDevice = {
  name: 'Custom Device',
  userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
  viewport: {
    width: 375,
    height: 667
  },
  deviceScaleFactor: 2,
  isMobile: true,
  hasTouch: true,
  defaultBrowserType: 'webkit'
};

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext({
    ...customDevice
  });

  const page = await context.newPage();
  await page.goto('https://example.com');
  
  await browser.close();
})();

Здесь настраивается устройство с шириной экрана 375 пикселей и высотой 667 пикселей (типичные размеры для большинства смартфонов). Дополнительно указан параметр deviceScaleFactor, который задает плотность пикселей.

Эмуляция касаний

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

Пример эмуляции касания:

await page.touchscreen.tap(100, 150);

Этот код имитирует касание экрана в точке с координатами (100, 150).

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

await page.touchscreen.swipe(0, 0, 300, 300);  // Пример простого свайпа

Ориентация экрана

Мобильные устройства имеют возможность изменять ориентацию экрана (между портретной и ландшафтной). В Playwright это можно эмулировать с помощью метода setViewportSize, который позволяет менять размеры экрана, имитируя смену ориентации.

Пример изменения ориентации:

await page.setViewportSize({ width: 800, height: 600 }); // Ландшафтная ориентация

Если необходимо вернуть ориентацию в портретный режим, можно указать следующие размеры:

await page.setViewportSize({ width: 375, height: 667 }); // Портретная ориентация

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

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

Пример использования эмуляции сетевых условий:

await context.setOffline(false); // Включаем онлайн-режим
await context.setNetworkConditions({
  offline: false,
  downloadThroughput: 1 * 1024 * 1024, // 1 Mbps
  uploadThroughput: 500 * 1024, // 500 Kbps
  latency: 40 // 40 мс
});

Это позволяет протестировать, как приложение работает при ограниченных сетевых условиях.

Геолокация

Многие мобильные приложения используют геолокацию для отображения данных или персонализированного контента. Playwright поддерживает эмуляцию геолокации, что позволяет тестировать веб-приложения с учетом местоположения пользователя.

Пример изменения геолокации:

await context.setGeolocation({ latitude: 37.7749, longitude: -122.4194 }); // Сан-Франциско

Так можно эмулировать различные географические позиции, тестируя, как страница или приложение изменяют контент в зависимости от местоположения.

Особенности работы с мобильными браузерами

При тестировании на мобильных устройствах важно учитывать, что функциональность браузера и его возможности могут значительно отличаться от десктопных версий. Например, поддержка сервисных работников, кэширования, а также возможности работы с многозадачностью могут отличаться. Playwright позволяет запускать тесты с использованием мобильных версий браузеров (например, Safari на iOS или Chrome на Android), что позволяет точнее имитировать реальные условия.

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

Заключение

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

Оглавление