Skip to main content

Touch Event

Please read the Material Usage Rules on this site.

🔗 Original page — Source of this material

Description​

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

How do I add the action to a project?​

Via the context menu Add action → Tabs → Touch Event

image-20200816-104117

Or use ❗→ smart search.

Where can this be used?​

  • When you need to emulate a phone or any other device with a touchscreen
  • When you need to make all actions as close to human behavior as possible

How do you work with the action?​

You need to enable "Recording" and the ❗→ input mode "Touch" in the browser window so that all actions performed in the browser are automatically recorded as Touch events.

image-20200816-104449

Event selection​

  • Touch - tap (click/touch);
  • Long Touch - long press (RMB)

Before interacting with an element on the page, you need to find it. In the actions ❗→ Get value , ❗→ Set value , ❗→ Execute event , ❗→ Touch Event , ❗→ Swipe Event there are two ways to search for elements — classic and using XPath.

Classic — search by HTML element parameters: tag, attribute, and its value.

image-20200805-202115

XPath — search using ❗→ XPath expressions. With it, you can implement a more universal and layout-change-resistant way of searching for data compared to classic search or regular expressions.

image-20200805-202209

Which tab​

Select the tab where the element search will be performed. Possible values:

  • Active tab
  • First
  • By name — when selecting this option, an input field for the tab name will appear.
  • By number — you need to enter the tab index in the input field (numbering starts from zero!)

Document​

It is recommended to set the value to -1 (search in all documents on the page). 

Form​

It is also better to set -1 (search across all forms on the page). When choosing this value, the template will be more universal.

Why is it better to set -1?

Example: there are 3 forms on the page — search, registration, product order. We need to click a button in the order form, and we selected 2 (two) as the value of the "Form" field (numbering starts from zero). After some time, a new login form appears on the site and is inserted before the order form. Now form number 2 will be the login form, and our template will either throw an error saying the button was not found or (much worse) will click a different button in a different form.

Note

In the program settings, you can check two checkboxes — Search in all forms on the page and Search in all documents on the page, and then whenever you add an element to the Action Constructor, the document and form numbers will always be set to -1.

Tag (classic search only)**​

image-20210525-095347

The actual HTML tag whose value needs to be obtained.

Tip

You can specify several tags at once; the separator is ; (semicolon)

Conditions (classic search only)**​

image-20210525-100053

  1. Group — the priority of this condition. The higher this number, the lower the priority. If the element could not be found by the condition with the highest priority, the search moves to the condition with the next priority, and so on until the element is found or the search conditions are exhausted. You can add several conditions with the same priority; in that case, the search will be performed across all conditions with the same priority simultaneously.

  2. Attribute — the HTML tag attribute used for searching.

  3. Search type:

  4. text — search by full or partial text match;

  5. notext — search for elements that do not contain the specified text;

  6. regexp — search using ❗→ regular expressions By default, the search is case-insensitive. To make regular expression searches case-sensitive, add (?-i) at the very beginning of the expression (this means disabling case-insensitive search).

  7. Value — the value of the HTML tag attribute

  8. Match № — the index of the found element (numbering starts from zero!). In this field, you can ❗→ use ranges and ❗→ variable macros.

Note

To delete a search condition, you need to left-click the field to the left of it (highlighted in blue in the screenshot) and press the delete key on the keyboard.

Note

Multiple conditions can be used to search for the desired element.

It is always important to try to choose search conditions so that only one element remains, i.e., the index is 0 (numbering starts from zero).

Coordinates​

Execute the Touch event within the specified coordinates

image-20200816-110654

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

Tab "Advanced"​

Tab "Advanced"

"Wait before execution".

How long the action will wait before being executed.

"Wait for element no longer than".

If the element does not appear on the page within the specified time, the action will finish with an error.

Usage example​

Let’s take our resource as an example, where you can practice making simple clicks — https://lessons.zennolab.com/ru/index. To implement this, we will use the ❗→ Action Constructor.

Go to the page in ProjectMaker.

image-20200816-111725

Scroll down and find the field for clicking and selecting the OS. Right-click on the checkbox area and select "To Action Constructor".

image-20200816-111849

Select the Rise action and the touch event. Click the Test button to check.

image-20200816-111948

If the click was successful, click Add to project

C# usage examples​

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

Touch tap emulation​

touch_click

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

Scroll​

scroll

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

Swipe right​

swipes

var tab = instance.ActiveTab;

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

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

// Determine the X coordinates of the first touch and the last one when releasing the finger
var offsetX = width / 4;
var minX = canvas.DisplacementInBrowser.X + offsetX;
var maxX = minX + width - 2*offsetX;

// Determine the Y coordinates of the first touch and the last one when releasing the finger
var offsetY = height / 4;
var minY = canvas.DisplacementInBrowser.Y + offsetY;
var maxY = minY;

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

Settings​

Only part of the settings is shown here. You can find the full list in the ❗→ documentation.

Click here to expand

By default, a number of parameters are taken into account and randomized: speed, acceleration, movement 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, that option is also available.

var tab = instance.ActiveTab;
var parameters = tab.Touch.GetCopyOfTouchEmulationParameters(); // Get current touch settings
// Then type "parameters." and after the dot the syntax editor will suggest available fields of this object.

////////////////////////
// Some examples
////////////////////////
parameters.Acceleration = 1.2f; // Increase acceleration

parameters.MinCurvature = 0; // Minimum curvature — straight line
parameters.MaxCurvature = 1; // Maximum curvature — very strong bend

// Curve bend closer to the starting point
parameters.MinCurvePeakShift = 0f;
parameters.MaxCurvePeakShift = 0.2f;

parameters.MinStep = 1; // Lower starting speed
parameters.MaxStep = 60; // Higher final speed

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

tab.Touch.SetTouchEmulationParameters(parameters); // IMPORTANT: APPLY SETTINGS — OTHERWISE NOTHING WILL CHANGE

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

 Demo project​

Touch Sample Project