| Panel | ||||||
|---|---|---|---|---|---|---|
| ||||||
We want to provide you with the latest help content in your language as soon as possible. This page has been translated automatically and may contain grammatical errors or inaccuracies. We want this content to be useful to you. Please let us know at the bottom of this page if this information was helpful. View the original article in Russian: Выполнить событие |
Описание
Данный экшен применяется когда нужно как-то провзаимодействовать с сайтом (кроме случаев ввода текста, когда используется экшен Установить значение).
Что можно эмулировать:
клик по элементу
Наведение курсора мыши
Нажатие кнопки
Перетягивание элементов по сайту (drag&drop)
И другие действия
...
| ||
Please read the Terms of Use for Materials on ZennoLab |
Table of contents
| Expand | ||||
|---|---|---|---|---|
| ||||
|
...
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”.
...
Как добавить действие в проект?
Через контекстное меню Добавить действие → Табы → Выполнить событие
...
Через конструктор действий.
Либо воспользуйтесь умным поиском.
Как выбрать элемент для выполнения события?
Рассмотрим на примере этой страницы.
...
Когда курсор мыши находится над одним из смайлов, тот меняет цвет (это же касается и фона, глаз и рта смайла). Кликаем по любому из смайлов ПКМ и отправляем в конструктор действий(1).
...
Параметры поиска элемента подставились автоматически, на них сейчас не будем заострять внимание. На что стоит обратить внимание:
в пункте Выбор действия(2) необходимо выбрать Rise (по умолчанию стоит Set - Установка значения)
выбрать нужное Событие(3), в нашем случае - onmouseover
обязательно нажмите кнопку Тестировать(4), чтоб удостовериться, что всё настроено правильно (конкретно в нашем случае центральный, жёлтый, смайлик должен сменить цвет)
(необязательно) добавьте комментарий(6). Автоматический комментарий не очень информативный и, когда в Вашем шаблоне, будет много действий, то будет очень сложно понять что выполняет тот или иной экшен
если всё настроено и работает так как задумано, то добавляйте экшен в проект(5)
Для чего используется?
чаще всего Вы будете использовать этот экшен для кликов по кнопкам, пунктам в меню (переключатели), чекбоксам
перетягивание элементов сайта
эмуляция событий наведения мыши для получения всплывающей подсказки
вызов JavaScript событий для полей ввода.
иногда создатели сайтов вешают на поля ввода дополнительные JavaScript скрипты (например проверка на то, что в поле введены корректные данные) и без срабатывания этих скриптов невозможно продолжить работу. В подобных случаях можно попробовать вызвать события onchange, onkeypress и др. (если вызов этих событий не помогает, то можно воспользоваться эмуляцией клавиатуры и эмуляцией мыши)
Как работать с экшеном?
...
1. “Выберите событие”
Выбираем что именно нужно сделать с элементом.
...
В данном поле можно вручную указать значение, а не выбирать из предложенного.
...
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-} )
2. Поиск элемента.
Классический - Поиск по параметрам HTML элемента: тэг, атрибут и его значение.
xPath - Поиск с помощью xPath выражений. С помощью него Вы можете реализовать более универсальный и устойчивый к изменениям вёрстки сайта способ поиска данных в сравнении с классическим поиском или регулярными выражениями.
3. Какая вкладка
Выбираем вкладку, на которой будет производиться поиск элемента.
Возможные значения:
Активная вкладка
Первая
По имени - при выборе данного пункта появится поле ввода для названия вкладки.
По номеру - в поле ввода надо будет ввести порядковый номер вкладки (нумерация начинается с нуля!)
4. Документ
Рекомендуется ставить значение -1 (поиск во всех документах на странице).
5. Форма
Тоже лучше ставить -1 (поиск по всем формам на странице). При выборе такого значения шаблон будет более универсальным.
Пример: на странице 3 формы - поиск, регистрация, заказ товара. Нам надо кликнуть в форме заказа по кнопке и мы выбрали в качестве значения поля “Форма” - 2 (нумерация с нуля). Спустя какое-то время на сайте появляется новая форма, для входа, и вставлена она перед формой заказа. Под номером 2 теперь будет форма входа и наш шаблон либо выдаст ошибку о том, что кнопка не найдена, либо (что гораздо хуже) будет кликать в другой форме по другой кнопке.
| Info |
|---|
В настройках программы (Настройки → Запись) можно отметить два чекбокса - “Искать во всех формах на странице” и “Искать во всех документах на странице” и тогда всегда при поиске элементов для номера документа и формы будет стоять -1. |
6. Тэг (только классический поиск)
Собственно HTML тэг на котором нужно вызвать событие.
7. Условия (только классический поиск)
...
Тип поиска:
text - поиск по полному либо частичному вхождению текста;
notext - поиск элементов в которых не будет указанного текста;
regexp - поиск с помощью регулярных выражений;
...
Значение - значение атрибута HTML тега (из 6-го пункта)
...
№ совпадения - порядковый номер найденного элемента.
| Info |
|---|
Чтобы удалить условие поиска необходимо кликнуть ЛКМ по полю слева от него (на скриншоте выделено синим цветом) и нажать кнопку delete на клавиатуре. |
| Info |
|---|
Для поиска нужного элемента может использоваться несколько условий. |
Всегда важно стараться подбирать условия поиска таким образом, чтоб оставался только один элемент, т.е. порядковый номер был 0 (нумерация с нуля). Так же в поле № совпадения можно использовать диапазоны.
8, 9. Координаты курсора мыши (только события drag и drop)
Это уникальные свойства и они доступны только для событий перетягивания элементов - drag (откуда надо перетащить элемент) и drop (куда его надо перетащить).
Пример использования
Простые клики
...
Element search
| Include Page | ||||
|---|---|---|---|---|
|
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/
...
...
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 )
| Expand | |
|---|---|
|
...
|
...
 |
Всплывающая подсказка
Пример №1
Такие подсказки появляются, когда пользователь наводит курсор мыши на тот или иной элемент сайта.
...
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
...
Но в данном случае необязательно заморачиваться с подбором и эмуляцией событий, можно взглянуть в исходный код страницы и заметить, что текст подсказки хранится в атрибуте data-tooltip и его значение можно с лёгкостью получить используя экшен Взятие значения. Очень часто код таких подсказок хранится в коде самой страницы и если хорошенько поискать, то можно его найти.
...
Пример №2
Но иногда всё немного сложнее - при наведении курсора мыши, с помощью скрипта на JavaScript, отправляется запрос на сервер, происходит ожидание ответа и, с помощью все того же JavaScript, ответ встраивается в тело страницы. В качестве примера можно привести форум Zennolab. При наведении курсора на название темы спустя короткое время появляется небольшое окно с контентом из темы
...
В такой ситуации есть несколько вариантов развития:
можно с помощью экшена Выполнить событие эмулировать onmouseover дожидаться появления окна. Затем используя кубик Взять значение парсить innerHtml и уже потом с помощью Обработки текста достаём нужные нам значения.
либо можно попробовать повторить запрос, который отправляется на сервер. Для этого можно использовать как внешние средства, так и внутренние: либо инструменты web-разработчика (доступно только для Chrome браузер), либо Окно трафика
| Expand | ||
|---|---|---|
| ||
Синим выделен один и тот же запрос в инструментах и в окне трафика. |
Одним из преимуществ Окна трафика является то, что из него автоматически можно создать экшен запроса. Клик ПКМ по нужному запросу и выбрать Создать действие из запроса :
...
Drag&Drop
Кликаем ПКМ по элементу, КОТОРЫЙ надо перетянуть, отправляем его в Конструктор действий.
Действие - Rise, событие - drag.
устанавливаем X и Y - это координаты начала движения. Координаты отсчитываются от верхнего левого угла выбранного элемента (у этого угла точка X=1 и точка Y=1). Тут шаблон совершит первый клик - захват (drag).
Теперь делаем клик ПКМ по элементу КУДА надо перетащить, так же отправляем в Конструктор действий.
Действие - Rise, событие - drop.
устанавливаем X и Y - это координаты конца движения. Координаты отсчитываются от верхнего левого угла выбранного элемента (у этого угла точка X=1 и точка Y=1). В эту точку второго элемента шаблон перетащит (drop) первый элемент.
| Expand | ||
|---|---|---|
| ||
|
Полезные ссылки
...
Конструктор действий и Поиск по XPath
...
...
...
...
...
...
...
...
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
| Expand | ||
|---|---|---|
| ||
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.
| Expand | ||
|---|---|---|
| ||
|