Touch events

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

Эмуляция сенсорного ввода

В Puppeteer сенсорное взаимодействие реализуется через Touchscreen объект, который доступен через экземпляр страницы: 

const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
await page.goto(&

const touchscreen = page.touchscreen;

Методы touchscreen позволяют имитировать действия пальцем:

  • tap(x, y) – имитация быстрого нажатия на координаты (x, y).
  • touchStart(touches), touchMove(touches), touchEnd() – низкоуровневые события для создания сложных жестов.

Простейший пример нажатия: 

await touchscreen.tap(100, 200);

Здесь создается событие touchstart и touchend в указанных координатах, что эквивалентно одиночному тапу.

Использование нескольких точек касания

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

await touchscreen.touchStart([
  { x: 100, y: 200, radiusX: 10, radiusY: 10, rotationAngle: 0, force: 1 },
  { x: 200, y: 300, radiusX: 10, radiusY: 10, rotationAngle: 0, force: 1 }
]);
await touchscreen.touchMove([
  { x: 120, y: 220 },
  { x: 220, y: 320 }
]);
await touchscreen.touchEnd();
  • radiusX и radiusY задают площадь касания, полезно при тестировании чувствительных интерфейсов.
  • rotationAngle отражает угол касания (используется реже, в основном для тестирования сложных мультитач-жестов).
  • force задает силу давления (0–1).

Свайпы и жесты

Для реализации свайпов и прокрутки используется комбинация touchStart, touchMove и touchEnd. Пример горизонтального свайпа: 

const startX = 50;
const startY = 300;
const endX = 300;
const steps = 10;

await touchscreen.touchStart([{ x: startX, y: startY }]);

for (let i = 1; i <= steps; i++) {
  const x = startX + ((endX - startX) * i) / steps;
  await touchscreen.touchMove([{ x, y: startY }]);
}

await touchscreen.touchEnd();

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

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

Puppeteer позволяет полностью эмулировать устройство с тачскрином через метод emulate: 

const iPhone = puppeteer.devices['iPhone 12'];
await page.emulate(iPhone);

Эмуляция включает:

  • Размер экрана и разрешение
  • Пользовательский агент
  • Возможность обработки сенсорного ввода
  • Масштабирование и DPR (Device Pixel Ratio)

После эмуляции все методы touchscreen будут работать так, как если бы тест выполнялся на реальном устройстве.

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

  1. События должны быть последовательными: touchStart → touchMove → touchEnd. Нарушение порядка может привести к некорректной обработке жестов.
  2. Плавные свайпы создаются через множество шагов движения. Для коротких свайпов допустимо использовать один-два шага.
  3. Мультитач тесты полезны для проверки зума, вращения и сложных жестов на каруселях или канвасах.
  4. Тестирование адаптивного дизайна рекомендуется сочетать эмуляцию устройства (page.emulate) и использование touchscreen.
  5. Отладка: включение headless: false позволяет визуально наблюдать результаты сенсорных действий.

Интеграция с другими событиями

Touch-события часто используются совместно с:

  • Mouse events – например, комбинация drag-and-drop на мобильных интерфейсах.
  • Keyboard events – при заполнении форм на сенсорных устройствах.
  • Network interception – проверка реакции UI на асинхронные запросы после жестов.

Пример свайпа с проверкой появления нового элемента: 

await touchscreen.touchStart([{ x: 50, y: 300 }]);
await touchscreen.touchMove([{ x: 250, y: 300 }]);
await touchscreen.touchEnd();

await page.waitForSelector('.new-item', { visible: true });

Ограничения

  • Puppeteer не эмулирует физическое давление пальцев, а лишь их касание на уровне событий.
  • Сложные мультитач-жесты могут вести себя иначе на реальных устройствах из-за особенностей сенсорного контроллера.
  • Анимации с высоким fps могут требовать увеличения количества шагов в touchMove для корректного тестирования.

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

Оглавление