Touch Event

Please read the Terms of Use for Materials on ZennoLab

1 Table of contents
2 Description
3 How to add an action to a project?
4 Where can it be applied?
5 How to work with an action?
6 Select an event
7 Element search
8 Coordinates
- 8.1 Search for element by Coordinates.
9 Usage example
- 9.1 Examples of work in C#
  - 9.1.1 Emulation of touch-pressing
  - 9.1.2 Scrolling
  - 9.1.3 Swipe right
  - 9.1.4 Settings
10 Useful links

Description

This action allows you to emulate a Touch event (finger clicks).

How to add an action to a project?

Through the context menu Add Action → Tabs → Touch Event

Or use smart search .

Where can it be applied?

In cases where you need to emulate a phone or any other touchscreen device
In cases when you need to bring all actions as close as possible to human ones.

How to work with an action?

It is necessary to enable “Record” and “Touch” input mode in the browser window so that all actions executed in the browser are automatically recorded as Touch events.

Select an event

Touch - pressing (click / touch);
Long Touch - long clamping (right click)

Element search

Coordinates

Search for element by Coordinates.

Execute a Touch event within the specified coordinates.

Which tab is Active /First / By name / By number
Coordinates - you need to enter a range of X and Y coordinates. You can use project variables - {-Variable.example_var-} .

Usage example

Take as an example our resource where you can practice making simple clicks - https://lessons.zennolab.com/en/index . For implementation, we will use the Action Designer .

Go to the page in ProjectMaker'e.

We go down to the bottom and find the field for pressing and selecting the OS. Click on the place for the "checkmark" with the right mouse button and select "In the constructor of actions.

We select the action Rise , Event touch . Click on the Test button to check.

If the click was successful, then click Add to project

Examples of work in C#

Starting with version 7.1.4.0, a Touch property with a set of methods has been added to the CommandCenter.Tab. The Touch property contains basic methods: TouchStart, TouchEnd, TouchMove, TouchCancel, as well as complex methods with Touch overloads, SwipeIntoView, SwipeBetween and others.

Emulation of touch-pressing

var tab = instance.ActiveTab;
var init = tab.FindElementByXPath("/html/body/button", 0); // Searching for an HTML element via XPath
tab.Touch.Touch(init); // Click on it

Scrolling

var tab = instance.ActiveTab;
HtmlElement init = tab.FindElementByXPath(".//button", 0); // Searching for an HTML element via XPath
tab.Touch.SwipeIntoView(init); // Scroll the screen with touchscreens to the desired HTML element

Swipe right

var tab = instance.ActiveTab;

// We will swipe inside the HTML element. Let's compose an XPath expression.
var canvas = tab.FindElementByXPath(@"//*[@id=""canvas""]", 0);

// We get its dimensions: width and height
var width = canvas.BoundingClientWidth;
var height = canvas.BoundingClientHeight;

// Determine the coordinates of the first touch along the X axis, and the last when you release your finger
var offsetX = width / 4;
var minX = canvas.DisplacementInBrowser.X + offsetX;
var maxX = minX + width - 2*offsetX;

// Determine the coordinates of the first touch along the Y axis, and the last when you release your finger
var offsetY = height / 4;
var minY = canvas.DisplacementInBrowser.Y + offsetY;
var maxY = minY;

// Swipe to the right
tab.Touch.SwipeBetween(minX, minY, maxX, maxY);

Settings

Only part of the settings is displayed here. You can find a complete list in the documentation.

By default, a number of parameters are taken into account and randomized: speed, acceleration, motion curve, and others. All movements will be as natural as possible out of the box, but if you need to make adjustments to the behavior of touch events, there is such a possibility too.

var tab = instance.ActiveTab;
var parameters = tab.Touch.GetCopyOfTouchEmulationParameters(); //We get the current settings of the touch
// Then we write "parameters." and after the point, the syntax editor will prompt the available fields of this object.

////////////////////////
// Some examples
////////////////////////
parameters.Acceleration = 1.2f; // Let's put the acceleration harder

parameters.MinCurvature = 0; // Let the minimum curvature be a straight line
parameters.MaxCurvature = 1; // And the maximum curvature is a very strong bend.

// Bend a curve closer to the starting point
parameters.MinCurvePeakShift = 0f;
parameters.MaxCurvePeakShift = 0.2f;

parameters.MinStep = 1; // Lower initial speed
parameters.MaxStep = 60; // And the final one is higher

parameters.RightThumbProbability = 0.7f; // In 70% of cases the right finger will be used, and in 30% the left finger will be used.

tab.Touch.SetTouchEmulationParameters(parameters); // IMPORTANT: WE APPLY THE SETTINGS - OTHERWISE WILL NOT CHANGE ANYTHING

// More settings here: https://help.zennolab.com/en/v7/zennoposter/7.1.4/webframe.html#topic951.html
// instance.ActiveTab.Touch.SetTouchEmulationParameters(new TouchEmulationParameters()); // Setting default settings

Demonstration project

English Help ZennoLab