Viewport конфигурации для мобильных

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

Основные принципы работы с мобильными конфигурациями

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

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

Использование предустановленных мобильных устройств

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

Пример кода для использования предустановленного устройства:

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

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext({
    ...devices['iPhone 11'], // Использование предустановленного профиля
  });
  const page = await context.newPage();
  await page.goto('https://example.com');
  // Выполнение тестов...
  await browser.close();
})();

В данном примере используется профиль iPhone 11, который автоматически настраивает viewport, ориентацию экрана, плотность пикселей и другие параметры, свойственные этому устройству.

Список доступных устройств можно просмотреть, используя объект devices, который Playwright предоставляет в своем API. Это позволяет выбрать любое устройство, поддерживаемое в библиотеке, без необходимости вручную настраивать параметры.

Создание кастомных настроек viewport

Для более точного тестирования или если нужного устройства нет в списке предустановленных профилей, можно создать кастомный viewport. В этом случае необходимо вручную задать такие параметры, как ширина, высота и плотность пикселей (device scale factor).

Пример создания кастомного viewport:

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

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext({
    viewport: { width: 375, height: 667 }, // Размеры для мобильного устройства
    deviceScaleFactor: 2, // Плотность пикселей (например, для iPhone)
    isMobile: true, // Указываем, что это мобильное устройство
    hasTouch: true, // Включаем поддержку сенсорного экрана
  });
  const page = await context.newPage();
  await page.goto('https://example.com');
  // Выполнение тестов...
  await browser.close();
})();

В этом примере вручную заданы параметры для устройства с шириной экрана 375 пикселей и высотой 667 пикселей, что соответствует размеру экрана смартфона. Установка deviceScaleFactor на значение 2 имитирует экран с высокой плотностью пикселей (например, Retina дисплеи).

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

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

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

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

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  
  // Портретная ориентация
  await page.setViewportSize({ width: 375, height: 667 });

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

  await page.goto('https://example.com');
  // Выполнение тестов...
  await browser.close();
})();

В этом примере, сначала задается портретная ориентация (375x667), а затем изменяется на ландшафтную (667x375).

Использование сенсорного ввода

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

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

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

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext({
    isMobile: true,
    hasTouch: true,
  });
  const page = await context.newPage();
  await page.goto('https://example.com');

  // Имитация касания экрана
  await page.touchscreen.tap(100, 100);
  await page.touchscreen.swipe(100, 100, 200, 200); // Свайп с координат 100,100 на 200,200

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

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

Оптимизация тестов для разных устройств

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

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

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

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  
  // Настройка медленного интернета
  await context.setNetworkConditions({
    offline: false,
    downloadThroughput: 500 * 1024, // 500 KB/s
    uploadThroughput: 500 * 1024, // 500 KB/s
    latency: 100, // 100ms
  });
  
  const page = await context.newPage();
  await page.goto('https://example.com');
  // Выполнение тестов...
  await browser.close();
})();

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

Заключение

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

Оглавление