Touch события и жесты

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

Симуляция сенсорных событий

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

Основные типы сенсорных событий:

  1. touchstart — событие, которое возникает при касании экрана.
  2. touchmove — событие, которое возникает при движении пальца по экрану.
  3. touchend — событие, которое происходит, когда палец отрывается от экрана.
  4. touchcancel — событие, которое возникает, если сенсорный контакт был прерван.

Пример использования Touch API

Для симуляции сенсорных событий в Playwright используется метод page.touchscreen. Например, чтобы выполнить простое касание экрана в точке с координатами (100, 200), можно использовать следующий код:

const { test, expect } = require('@playwright/test');

test('Симуляция касания экрана', async ({ page }) => {
  await page.goto('https://example.com');
  await page.touchscreen.tap(100, 200);  // Касание в точке (100, 200)
});

Этот пример имитирует одиночное касание на координатах (100, 200). Метод tap позволяет симулировать как обычные касания, так и касания с двойным нажатием, если это необходимо.

Симуляция жестов

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

Пример свайпа

Свайп — это жест, при котором пользователь проводит пальцем по экрану. В Playwright для симуляции свайпа используется метод touchscreen.swipe. Например, чтобы выполнить свайп по экрану, можно задать начальную и конечную точку.

test('Симуляция свайпа', async ({ page }) => {
  await page.goto('https://example.com');
  await page.touchscreen.swipe(100, 200, 400, 200);  // Свайп с (100, 200) на (400, 200)
});

Этот код имитирует движение пальца по экрану от координаты (100, 200) до (400, 200). Свайп будет горизонтальным, что важно при тестировании мобильных веб-приложений с прокручиваемыми элементами.

Пример масштабирования

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

test('Симуляция масштабирования', async ({ page }) => {
  await page.goto('https://example.com');
  await page.touchscreen.pinch(200, 200, { scale: 1.5 });  // Масштабирование на 1.5x от точки (200, 200)
});

Здесь метод pinch увеличивает масштаб на 1.5 раза вокруг точки (200, 200), что имитирует поведение с двумя пальцами на мобильном устройстве.

Работа с мобильными интерфейсами

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

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

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

const { test, devices } = require('@playwright/test');

test('Эмуляция мобильного устройства', async ({ page }) => {
  const iphone = devices['iPhone 12'];
  await page.emulate(iphone);
  await page.goto('https://example.com');
  await page.touchscreen.tap(100, 200);  // Симуляция касания на мобильном устройстве
});

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

Практическое применение

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

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

Пример теста с несколькими жестами

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

test('Симуляция прокрутки и свайпа', async ({ page }) => {
  await page.goto('https://example.com');
  
  // Сначала прокручиваем страницу
  await page.touchscreen.swipe(100, 200, 100, 600);  // Свайп вниз
  
  // После этого выполняем касание
  await page.touchscreen.tap(200, 400);  // Касание на экране
});

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

Заключение

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

Оглавление