Событие Touch

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

1 Описание
2 Как добавить действие в проект?
3 Где это можно применить?
4 Как работать с экшеном?
5 Пример использования
- 5.1 Примеры работы на C#
  - 5.1.1 Эмуляция тач-нажатия
  - 5.1.2 Скролл
  - 5.1.3 Свайп вправо
  - 5.1.4 Настройки
  - 5.1.5 Демонстрационный проект
6 Полезные ссылки

Описание

Данный экшен позволяет эмулировать Touch-событие (нажатие пальцем).

Как добавить действие в проект?

Через контекстное меню Добавить действие → Табы → Событие Touch

Либо воспользуйтесь умным поиском.

Где это можно применить?

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

Как работать с экшеном?

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

Выбор события

Touch - нажатие (клик/прикосновение);
Long Touch - длительное зажатие (ПКМ)

Поиск элемента

Координаты

Выполнить событие Touch в рамках указанных координат

Какая вкладка - Активная / Первая / По имени / По номеру
Координаты - необходимо вписать диапазон координат X и Y. Можно использовать переменные проекта - {-Variable.example_var-}.

Вкладка “Дополнительно”

“Подождать перед выполнением”.

Сколько времени экшен будет ожидать перед выполнением.

“Ждать элемент не более”.

Если по истечении указанного времени элемент не появился на странице, то экшен завершит работу с ошибкой.

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

Возьмем за пример наш ресурс, где можно потренироваться делать простые клики - https://lessons.zennolab.com/ru/index. Для реализации воспользуемся Конструктором действий.

Переходим на страницу в ProjectMaker’e.

Опускаемся ниже и находим поле для нажатия и выбора ОС. Нажимаем на место для “галочки” правой кнопкой мыши и выбираем “В конструктор действий”.

Выбираем действие Rise , Событие touch. Нажимаем на кнопку Тестировать для проверки.

Если клик совершился успешно, то нажимаем Добавить в проект

Примеры работы на C#

Начиная с версии 7.1.4.0, в CommandCenter.Tab добавлено свойство Touch с набором методов. В свойстве Touch есть базовые методы: TouchStart, TouchEnd, TouchMove, TouchCancel, а также комплексные методы с перегрузками Touch, SwipeIntoView, SwipeBetween и другие.

Эмуляция тач-нажатия

var tab = instance.ActiveTab;
var init = tab.FindElementByXPath("/html/body/button", 0); // Ищем HTML элемент через XPath
tab.Touch.Touch(init); // Жмём по нему

Скролл

var tab = instance.ActiveTab;
HtmlElement init = tab.FindElementByXPath(".//button", 0); // Ищем HTML элемент через XPath
tab.Touch.SwipeIntoView(init); // Скроллим экран тачами до нужного HTML элемента

Свайп вправо

var tab = instance.ActiveTab;

// Будем делать свайп внутри HTML элемента. Составим XPath выражение.
var canvas = tab.FindElementByXPath(@"//*[@id=""canvas""]", 0);

// Получаем его размеры: ширину и высоту
var width = canvas.BoundingClientWidth;
var height = canvas.BoundingClientHeight;

// Определяем координаты первого касания по оси X, и последнего - когда отпускаем палец
var offsetX = width / 4;
var minX = canvas.DisplacementInBrowser.X + offsetX;
var maxX = minX + width - 2*offsetX;

// Определяем координаты первого касания по оси Y, и последнего - когда отпускаем палец
var offsetY = height / 4;
var minY = canvas.DisplacementInBrowser.Y + offsetY;
var maxY = minY;

// Делаем свайп вправо
tab.Touch.SwipeBetween(minX, minY, maxX, maxY);

Настройки

Тут отображена только часть настроек. Полный список Вы можете найти в документации.

По умолчанию учитывается и рандомизируется ряд параметров: скорость, ускорение, кривая движения и другие. Все перемещения будут максимально естественными уже из «коробки», но если вам потребуется внести коррективы в поведение тач-событий – такая возможность тоже есть.

var tab = instance.ActiveTab;
var parameters = tab.Touch.GetCopyOfTouchEmulationParameters(); // Получаем текущие настройки тача
// Дальше пишем "parameters." и после точки syntax editor подскажет доступны поля этого объекта.

////////////////////////
// Некоторые примеры
////////////////////////
parameters.Acceleration = 1.2f; // Поставим ускорение посильнее

parameters.MinCurvature = 0; // Пусть минимальная кривизна - прямая линия
parameters.MaxCurvature = 1; // А максимальная кривизна - очень сильный изгиб

// Изгиб кривой ближе к начальной точке
parameters.MinCurvePeakShift = 0f;
parameters.MaxCurvePeakShift = 0.2f;

parameters.MinStep = 1; // Начальная скорость пониже
parameters.MaxStep = 60; // А финальная - выше

parameters.RightThumbProbability = 0.7f; // В 70% случаев будет использоваться правый палец, а в 30% - левый.

tab.Touch.SetTouchEmulationParameters(parameters); // ВАЖНО: ПРИМЕНЯЕМ НАСТРОЙКИ - ИНАЧЕ НИЧЕГО НЕ ИЗМЕНИТСЯ

// Ещё больше настроек здесь: https://help.zennolab.com/en/v7/zennoposter/7.1.4/webframe.html#topic951.html
// instance.ActiveTab.Touch.SetTouchEmulationParameters(new TouchEmulationParameters()); // Устанавливаем настройки по умолчанию

Русская справка Zennolab