Описание Robot
Релизы

Взаимодействие с элементами на веб-странице (Browser Picker)

Введение

Чтобы взаимодействовать с элементами на веб-страницах, необходимо выбирать конкретные элементы, а также, при необходимости, определённые свойства этих элементов.

Для таких целей в платформе используется вкладка "Элементы", с помощью которой можно выбирать используемые элементы в на веб-страницах, удалять и создавать новые.

Интерфейс

На рисунке ниже представлен интерфейс программы ElectroNeek Studio с активной вкладкой "Элементы".

Для создания нового элемента, необходимо:

  • Кликнуть на кнопку "Добавить новый элемент"

  • Выбрать "Элемент браузера"

  • Указать название для элемента

  • Нажать на кнопку "Изменить элемент"

В свойствах элемента браузера для указания элемента на веб-странице можно использовать различные способы для определения элементов:

  • Атрибуты

  • CSS-селектор

  • XPath

Способ "Атрибуты" (Browser Picker

Для того, чтобы использовать функционал программы Browser Picker необходимо установить в Google Chrome расширение "ElectroNeek" и включить его.

Подробнее о том, как включить данное расширение можно узнать в данной статье:

При выборе данного способа появляется кнопка "Изменить элемент", после нажатия на которую, запускается программа Browser Picker (и открывается Google Chrome, если был закрыт):

Далее необходимо нажать на кнопку "Выбрать" в Browser Picker и навести курсор на нужный элемент на выбранном сайте и нажать CTRL+X для фиксации выбора.

После чего появится окно Browser Picker с атрибутами выбранного элемента:

При нажатии на кнопку "Проверить" элемент будет обведён жёлтой рамкой (если найден 1 элемент) либо оранжевой рамкой (если найдено несколько элементов) и появится надпись "Найден 1 элемент" либо надпись "Найдено несколько элементов: Х", где Х - число найденных элементов по выбранным атрибутам.

Цель - получить надпись "Найден 1 элемент" (если необходимо кликнуть по элементу) путём проставления флагов возле названий атрибутов из списка (чекбоксы).

Чтобы сохранить все настройки необходимо нажать на кнопку "ОК".

В столбце "Вычисление" окна Browser Picker возможно выбрать метод задания значения атрибута:

  • Равно

  • Вычислить

  • Содержит

Метод "Равно"

Позволяет в явном виде задать значения атрибута для поиска элемента.

Метод "Вычислить"

Позволяет использовать переменные для задания значения атрибута. Для этого необходимо указать название переменной, которая хранит требуемое значение. Например:

Метод "Содержит"

Позволяет указать строку, которую должен содержать атрибут в своём значении.

Способы "CSS-селектор" и "XPath"

Попробуем на практике

Рассмотрим в качестве примера сайт Google.com. Если бы мы хотели создать простого робота, который открывает сайт Google.com в браузере и ищет определённую информацию, то, в таком случае, необходимо, чтобы робот был по крайне мере способен:

  • Найти область для ввода в HTML-коде веб-страницы

  • Ввести данные в поле

  • Найти кнопку "Поиск в Google" в HTML-коде

  • Кликнуть на кнопку

Для начала нам необходимо найти поле для ввода поискового запроса. Для этого нужно извлечь его селектор.

Для этого примера мы используем браузер Google Chrome.

  1. Вводим google.com в адресную строку и переходим на страницу:

  2. Нажимаем клавишу F12 на клавиатуре чтобы получить доступ к HTML-коду (инспектору).

  3. Открываем вкладку "Elements".

Вы должны увидеть окно подобного вида:

Это HTML структура веб-страницы. Следующим шагом найдем конкретный элемент и получим его определяющие его атрибуты. Для этого нажмите на такую иконку в верхнем левом углу окна инспектора.

После активации этого режима просто поместите курсор над интересующим элементом страницы в левой части окна. Соответствующий этому элементу участок кода сразу будет подсвечен в окне справа.

Таким способом вы можете видеть код любого элемента страницы просто перемещая курсор мыши.

CSS селекторы

Cascading Style Sheets (CSS) - это язык таблиц стилей используемый для описания того как отформатирован и выглядит документ написанный на HTML или XML. В CSS, селекторы это паттерны использующиеся для выбора стилизованного элемента.

CSS селекторы лучше использовать, когда имеешь дело с классами, ID и именами тегов

CSS селектор сразу подсвечивается на экране рядом с элементом, как только навести на него мышь (см изображение выше).

В нашем примере с google.com основная область ввода имеет такой CSS-селектор:

Рекомендуем попробовать своими руками особенности разных селекторов в Тестере CSS селекторов.

XPath селекторы

XPath - XML path language, - это язык запросов для выбора узлов (нод) в XML документе. Определение элементов с помощью XPath работает очень хорошо и гибко. XPath использует выражения в виде пути для навигации среди элементов и атрибутов XML документа.

Существуют примеры с которыми сложно справиться используя только CSS селекторы. Посмотрите на такой кусок HTML кода

<p> First </p>
<p> Second </p>
<p> Third. Some text in Paragraph </p>

XPath для получения содержимого третьего тега <p> это

//p[contains(text(), 'Some text in Paragraph')]

При этом невозможно определить содержимое этого<p>тега с помощью одного лишь CSS селектора .

Не существует селекторов для содержимого в спецификации CSS3. Можно определить элемент, имя атрибута элемента, значение именованного атрибута элемента. Но содержимое внутри элемента нет.

Но что если нужно сделать сложный запрос, который учитывает содержимое элемента? Это можно сделать только с помощью XPath

Чтобы быстро получить значение XPath для элемента, кликните правой кнопкой мыши на подсвеченном участке кода и пройдите к пункту Copy XPath

В примере с google.com основная область ввода имеет такой XPath селектор

//*[@id="tsf"]/div[2]/div[1]/div[1]/div/div[2]/input

Ознакомьтесь с данной статьёй для большего понимания работы селекторов.