Сенсорные жесты: tap, swipe, pinch

В автоматизации тестирования мобильных и веб-приложений с использованием Protractor важно учитывать работу с сенсорными элементами интерфейса. Protractor, основанный на WebDriverJS, предоставляет средства для эмуляции пользовательских жестов на элементах страницы, что особенно важно при тестировании адаптивных интерфейсов и мобильных приложений через браузеры с поддержкой сенсорного ввода. Основные жесты, используемые в таких сценариях, — tap, swipe, pinch.

Tap (одиночное нажатие)

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

Использование в Protractor:

Для выполнения tap на элементе используется метод element(...).click(). В мобильных контекстах можно применять TouchActions для более точной эмуляции сенсорного события.

const { browser, element, by, protractor } = require('protractor');

// Обычный tap через click
await element(by.id('loginButton')).click();

// Tap с использованием TouchActions
const actions = browser.actions();
await actions.tap(element(by.id('loginButton'))).perform();

Особенности:

  • Tap не вызывает события наведения мыши (mouseover).
  • При тестировании мобильных версий важно учитывать, что элемент должен быть видимым и доступным для касания.
  • Иногда необходимо добавить ожидание видимости элемента через ExpectedConditions, чтобы жест сработал корректно:
const EC = protractor.ExpectedConditions;
const loginBtn = element(by.id('loginButton'));
await browser.wait(EC.elementToBeClickable(loginBtn), 5000);
await loginBtn.click();

Swipe (свайп)

Описание: свайп — жест горизонтального или вертикального перемещения пальца по экрану. Используется для прокрутки, перелистывания карточек, навигации по слайдерам.

Реализация в Protractor:

Protractor не предоставляет прямого метода swipe, но его можно эмулировать через TouchActions или комбинацию mouseDown / mouseMove / mouseUp.

const actions = browser.actions();

await actions
  .move({ origin: element(by.css('.slider')) })
  .press()
  .move({ x: 200, y: 0 }) // свайп вправо на 200 пикселей
  .release()
  .perform();

Параметры:

  • x и y определяют направление и длину свайпа.
  • Горизонтальный свайп: меняется x, вертикальный: меняется y.
  • Перед выполнением свайпа желательно убедиться, что элемент видим и находится в зоне экрана.

Дополнительные советы:

  • Для динамических элементов, таких как слайдеры с анимацией, рекомендуется добавить небольшую паузу (browser.sleep(200)) между press и move, чтобы анимация успела сработать.
  • Для свайпов через всю страницу можно использовать координаты относительно body:
await actions
  .move({ x: 0, y: 500 })  // стартовая точка
  .press()
  .move({ x: 0, y: 0 })    // конечная точка
  .release()
  .perform();

Pinch (сжатие и разжатие)

Описание: жест pinch имитирует сжатие двух пальцев для уменьшения масштаба (zoom out) или растяжение для увеличения (zoom in). В веб-контексте используется редко, но критически важен для мобильных приложений, карт, изображений и диаграмм.

Эмуляция в Protractor:

Прямого метода pinch в Protractor нет, однако его можно реализовать через multi-touch actions, комбинируя два pointer действия.

const actions = browser.actions();

// Инициализация двух касаний для pinch
const finger1 = actions.pointer({ name: 'finger1', type: 'touch' });
const finger2 = actions.pointer({ name: 'finger2', type: 'touch' });

await actions
  .sequence([
    finger1.move({ x: 100, y: 200 }).press(),
    finger2.move({ x: 200, y: 200 }).press(),
    finger1.move({ x: 150, y: 200 }),
    finger2.move({ x: 150, y: 200 }),
    finger1.release(),
    finger2.release()
  ])
  .perform();

Особенности:

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

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

  1. Ожидания: всегда использовать ExpectedConditions перед выполнением жестов, чтобы избежать ошибок, связанных с невидимыми элементами.
  2. Совместимость: при тестировании мобильных жестов на десктопе использовать эмуляцию touch-событий через DevTools или браузерные API.
  3. Логирование: для сложных жестов (swipe, pinch) полезно логировать координаты начала и конца, чтобы быстро отлаживать тесты.
  4. Комбинации жестов: часто tap и swipe комбинируются для проверки интерактивных списков, прокрутки и активации элементов внутри слайдера.

Сенсорные жесты в Protractor предоставляют гибкость для тестирования мобильных и адаптивных интерфейсов. Правильное использование tap, swipe и pinch позволяет воспроизводить реальные сценарии взаимодействия пользователя, минимизируя различия между эмуляцией и поведением настоящего устройства.

Оглавление