Rise event

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 ⁽¹⁾ .

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 ⁽²⁾ , select Rise (the default is Set - Setting the value )
select the desired Event ⁽³⁾ , in our case - onmouseover
be sure to click the Test button ⁽⁴⁾ to make sure that everything is configured correctly (specifically, in our case, the central, yellow, smiley should change color)
(optional) add comment ⁽⁶⁾ . 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 ⁽⁵⁾

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

Please read the Terms of Use for Materials on ZennoLab

Example: on page 3 of the form - search, registration, ordering goods. We need to click on the button in the order form and we have chosen as the value of the “Form” field - 2 (numbering from zero). After some time, a new login form appears on the site, and it is inserted in front of the order form. Number 2 will now be the login form, and our template will either give an error that the button was not found, or (much worse) will click on another button in another form.

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 :
1. text - search by full or partial text occurrence;
2. notext - search for elements that do not contain the specified text;
3. 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).

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 )

Screenshot

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

Query Tools

Web developer tools launch button
The actual web developer tools window
Traffic monitor

The same request in the instruments and in the traffic window is highlighted in blue.

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.