Touch Event
Please read the Terms of Use for Materials on ZennoLab
Table of contents
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
Please read the Terms of Use for Materials on ZennoLab
Table of contents
Before you can interact with an element on the page, you need to find it. In the Get Value, Set Value, Rise Event, Touch Event, Swipe Event actions, there are two ways to find items - classic and using XPath.
Classic - Search by HTML element parameters: tag, attribute and its value.
XPath - Search using XPath expressions . With the help of it you can implement a more versatile and resistant to layout changes way of data search in comparison with classic search or regular expressions.
Which tab
Select the tab on which the item will be searched.
Possible values:
Active tab
First
By name - when you select this item, an input field for the name of the tab will appear.
By number - in the entry field you will need to enter the serial number of the tab (numbering starts from zero!)
Document
It is recommended to set the value -1 (search in all documents on the page).
Form
It is also better to set -1 (search in all forms on the page). Choosing this value will make the template more versatile.
In the program settings, you can select two checkboxes - Search all forms on the page and Search all documents on page, and then always when adding an element to the Action Designer, the document number and form will be set to -1.
Tag (classic search only)
The actual HTML tag from which you want to get the value.
You can specify several tags at once, the separator is; (semicolon)
Conditions (classic search only)
Group - the priority of this condition. The higher this number, the lower the priority. If we could not find an element by the condition with the highest priority, then go to the condition with the next priority, and so on until the element is found, or until the search conditions are over. You can add several conditions with the same priority, then the search will be performed for all conditions with the same priority at the same time.
Attribute - HTML attribute of the tag by which the search is performed.
Search type :
text - search by full or partial text occurrence;
notext - search for elements that do not contain the specified text;
regexp - search using regular expressions
By default RegeXp search is case insensitive. To change it you can prepend(?-i)to your expression (this mean “disable case insensitive mode”).
Value - the value of the HTML tag attribute
Match # - the ordinal number of the found element (numbering from zero!). Ranges and variable macros can be used in this field.
To delete a search term, left-click on the field to the left of it (highlighted in blue in the screenshot) and press the delete button on the keyboard.
Several conditions can be used to find the desired item.
It is always important to try to select search conditions in such a way that only one element remains, i.e. the serial number was 0 (numbering from zero).
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 itScrolling
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 elementSwipe 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.
Demonstration project