Rise event
- Stanislav N. (Unlicensed)
- ZL Support
Please read the Terms of Use for Materials on ZennoLab
Table of contents
Description
This action is used when you need to somehow interact with the site (except when entering text when using the Set value action).
What can be emulated:
Element click
Mouse hover
Button press
Dragging elements across the site (drag & drop)
And other actions
As you can see in the screenshot above, the list of possible actions is quite impressive and it may not always be obvious what an event is doing. For more information, copy the name of the event, paste it into the search box of your favorite search engine and add javascript; the result should be something like this: “oncontextmenu javascript”, “javascript ondblclick”, “javascript onkeyup”. Thus, you can find a description of the action you are interested in.
How to add an action to a project?
Via the context menu Add Action → Tabs → Rise Event
Through the Action designer.
Or use smart search .
How to select an element to execute an event?
Let's take a look at this page as an example.
When the mouse cursor is over one of the smileys, it changes color (this also applies to the background, eyes and mouth of the smiley). Right-click on any of the emoticons and send it to the action designer (1) .
The search parameters for the element were substituted automatically, we will not focus on them now. What you should pay attention to:
in the Select action item (2) , select Rise (the default is Set - Setting the value )
select the desired Event (3) , in our case - onmouseover
be sure to click the Test button (4) to make sure that everything is configured correctly (specifically, in our case, the central, yellow, smiley should change color)
(optional) add comment (6) . Automatic comment is not very informative, and when there are many actions in your template, it will be very difficult to understand what this or that action is doing.
if everything is configured and works as intended, then add the action to the project (5)
What is it used for?
most often you will use this action to click on buttons, menu items ( switches ), checkboxes
drag and drop site elements
emulate mouse hover events to get a tooltip
calling JavaScript events for input fields.
sometimes website builders put additional JavaScript scripts on the input fields (for example, checking that the correct data has been entered in the field) and it is impossible to continue working without these scripts running. In such cases, you can try to call events onchange, onkeypress , etc. (if calling these events does not help, then you can use keyboard emulation and mouse emulation )
How to work with an action?
Select an event
Choosing what exactly needs to be done with the element.
In this field, you can manually specify a value, and not choose from the proposed.
You can also use project variables here ( {-Variable.var_name-} )
Element search
Mouse coordinates (drag and drop events only)
These are unique properties and they are available only for events of dragging elements - drag (from which place the element should be dragged) and drop (where it should be dragged).
Usage example
Simple clicks
You can practice in simple clicks on the page https://lessons.zennolab.com/en/index (switches, checkboxes) or here https://lessons.zennolab.com/en/registration (button at the bottom of the form).
Right click on any checkbox / switch - In the action constructor - Rise> click - Test (or Add to the project )
Tooltip
Example # 1
Such tips appear when the user hovers the mouse cursor over one or another element of the site.
An example can be seen here https://learn.javascript.ru/task/behavior-tooltip
But in this case it is not necessary to bother with the selection and emulation of events, you can look at the source code of the page and notice that the tooltip text is stored in the data-tooltip attribute and its value can be easily obtained using the Get value action. Very often the code of such hints is stored in the code of the page itself, and if you look carefully, you can find it.
Example No. 2
But sometimes everything is a little more complicated - when you hover the mouse cursor, using a JavaScript script, a request is sent to the server, a response is expected and, using the same JavaScript, the response is embedded in the body of the page. An example is the Zennolab forum. When you hover over the topic name, after a short time, a small window appears with content from the topic
In such a situation, there are several options for development:
you can use the Execute event action to emulate onmouseover to wait for the window to appear. Then, using the Get value cube, parse innerHtml and only then, using Text Processing, we get the values we need.
or you can try to repeat the request that is sent to the server. To do this, you can use both external and internal tools: either the web developer tools (available only for the Chrome browser), or the Traffic window
One of the advantages of the Traffic Window is that you can automatically create a request action from it. Right-click on the desired request and select Create action from request :
Drag&Drop
Right-click on the element that needs to be dragged, send it to the Action Designer .
Action - Rise, event - drag.
set X and Y - these are the coordinates of the beginning of the movement. Coordinates are measured from the upper left corner of the selected element (at this corner, point X = 1 and point Y = 1). Here the template will make the first click - drag .
Now we make a right-click on the element WHERE to drag, also send it to the Action Designer.
Action - Rise, event - drop.
set X and Y - these are the coordinates of the end of the movement. Coordinates are measured from the upper left corner of the selected element (at this corner, point X = 1 and point Y = 1). The template will drop the first element to this point of the second element.
Useful links