Урок 3: Работа с селекторами в BAS

Введение

Селекторы — это ключевой инструмент для автоматизации взаимодействия с веб-элементами. В этом уроке мы подробно разберем, что такое селекторы, какие виды селекторов существуют, как их использовать и как выбирать правильный селектор для работы на различных криптосайтах. Мы рассмотрим примеры работы с селекторами на сайте PancakeSwap, а также дадим практические советы по их использованию.

1. Что такое селектор?

Селектор — это идентификатор элемента на веб-странице. Каждый элемент на сайте, будь то кнопка, текст, изображение или меню, имеет свой уникальный селектор. Селекторы позволяют нам точно указывать, с каким элементом нужно взаимодействовать в автоматизированном скрипте.

Пример:

На сайте PancakeSwap (криптовалютная платформа для обмена токенов) вы можете увидеть:

Кнопку "Connect Wallet" (подключение кошелька).
Элемент для смены сети.
Различные значки и меню.

Все эти элементы имеют свои селекторы, которые позволяют нам взаимодействовать с ними через BAS (Browser Automation Studio). Например, кнопка "Connect Wallet" может иметь селектор button.connect-wallet, который указывает на элемент с тегом button и классом connect-wallet.

Как это работает?

Когда вы открываете веб-страницу, каждый элемент на ней имеет определенное местоположение и атрибуты (например, id, class, tag). Селекторы используют эти атрибуты для идентификации элементов. Например, если вы хотите нажать на кнопку "Connect Wallet", BAS использует селектор, чтобы найти эту кнопку на странице и выполнить действие (например, клик).

Чтобы увидеть селектора нужно нажать f1(выбрать непрямое управление браузером в BAS). Тогда вы можете заметить, что элементы сайта, куда вы наводите курсор выделяются красным прямоугольником. Это как раз CSS селектора. они также подписываются снизу слева.

2. Виды селекторов

В BAS существует несколько видов селекторов, каждый из которых имеет свои особенности и применяется в зависимости от ситуации. Рассмотрим основные из них:

2.1. CSS-селектор

CSS-селектор — это один из самых распространенных видов селекторов. Он основан на атрибутах HTML-элементов, таких как id, class, tag и других. CSS-селекторы используются для точного указания элемента на странице.

Преимущества:

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

Недостатки:

Могут быть недолговечными, если структура страницы меняется (например, если добавляются новые элементы, и индексы элементов сбиваются).
Если элемент не имеет уникальных атрибутов, CSS-селектор может быть неточным.

В общем наша задача искать максимально долговечные селектора. Тут уже поможет опыт, насмотренность и тд. После нескольких собственных скриптов уже будете по виду селектора определять к чему он относится и сколько протянет. Рекомендую использовать DevTools. Для этого кликаем правой кнопкой мыши и выбираем "Изучить элемент на странице"

Пример CSS-селектора:

DIV.raf-pidor67adsakflm124.slezi-hueshi13fas

Когда использовать CSS-селектор?

Когда элемент имеет уникальный id или class.
Когда структура страницы стабильна и не меняется часто.

2.2. Match-селектор

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

Преимущества:

Простота в использовании.
Не требует глубокого понимания структуры HTML.
Идеально подходит для элементов с уникальным текстом (например, кнопки с текстом "Connect Wallet").

Недостатки:

Может быть менее точным, если на странице есть несколько элементов с одинаковым текстом.
Если текст элемента меняется (например, при смене языка), Match-селектор может перестать работать.

Пример Match-селектора:

Connect Wallet

Этот селектор найдет все элементы с текстом "Connect Wallet".

Мы видим что с таким текстом найдено 2 элемента. Если мы хотим нажать только на 1, то дописываем >AT>0

Таким образом мы перебираем индексы элементов и ищем подходящий. В этом методе может возникнуть проблема, если сработает автоперевод языка, но это случается крайне редко

Когда использовать Match-селектор?

Когда элемент имеет уникальный текст, который не меняется.
Когда другие селекторы (CSS, XPath) сложно применить.

2.3. XPath-селектор

XPath — это более продвинутый вид селектора, который позволяет точно указывать путь к элементу в структуре HTML-документа. XPath используется, когда нужно работать с элементами, которые находятся в сложной вложенной структуре.

Преимущества:

Очень точный.
Позволяет работать с элементами, которые сложно найти с помощью CSS или Match.
Подходит для сложных структур с множеством вложенных элементов.

Недостатки:

Требует понимания структуры HTML и синтаксиса XPath.
Может быть сложным для новичков.

Как использовать?

Заходим в DevTools и в поиске находим необходимый нам элемент. К примеру нам нужна кнопка "Connect Wallet"

Видим что эта кнопка находится в верхней шапке, то есть сначала обращаемся к тегу nav

Далее пишем button. Практически все кнопки используют этот тег, но лучше проверить.

Найдено 40 элементов. Чтобы тыкнуть именно на "Connect Wallet" прописываем квадратные скобки - []. В них мы указываем что содержится в конкретном элементе.

[contains(.,'Connect Wallet')]

[contains(.,'хуйхуйхуй')] - так выглядит уже привязка к конкретному элементу

Если у вас нашлось больше 1 элемента, то делаете перебором через >AT>0 1 и тд

Когда использовать XPath-селектор?

Когда элемент находится в сложной вложенной структуре.
Когда другие селекторы (CSS, Match) не работают.

XPath довольно сложная штука, но как по мне это лучший вариант среди селекторов. С практикой вы приживетесь и будете плавать в коде элемента как рыба в воде и сможете даже в электронном дневнике двойки на пятерки менять, чтобы мама похвалила.

2.4. Графический селектор

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

Преимущества:

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

Недостатки:

Менее надежен, так как зависит от точности совпадения изображения.
Может не работать, если элемент меняет свой внешний вид (например, цвет или размер).

Пример использования графического селектора:

Вы выделяете элемент на странице с помощью мыши, и BAS создает графический селектор на основе изображения этого элемента.

Когда использовать графический селектор?

Когда другие селекторы не работают.
Когда элемент не имеет уникальных атрибутов или текста.

3. Как выбрать правильный селектор?

При выборе селектора важно учитывать несколько факторов:

3.1. Долговечность

Селектор должен быть максимально стабильным и не зависеть от изменений на странице. Например, использование id или статичных классов предпочтительнее, чем использование индексов элементов.

Пример:

Хороший селектор: button.connect-wallet (использует класс).
Плохой селектор: button:nth-child(2) (использует индекс, который может измениться).

3.2. Точность

Селектор должен точно указывать на нужный элемент, чтобы избежать ошибок в работе скрипта. Если селектор находит несколько элементов, это может привести к неправильным действиям.

Пример:

Если на странице несколько кнопок с текстом "Connect Wallet", используйте более точный селектор, например, XPath.

3.3. Простота

По возможности выбирайте простые и понятные селекторы, которые легко поддерживать. Сложные селекторы могут быть трудными для понимания и отладки.

4. Пример работы с селекторами на сайте PancakeSwap

Давайте рассмотрим пример работы с селекторами на сайте PancakeSwap.

4.1. Кнопка "Connect Wallet"

CSS-селектор: button.connect-wallet
Match-селектор: Connect Wallet
XPath-селектор: //button[contains(text(), 'Connect Wallet')]

4.2. Элемент для смены сети

CSS-селектор: div.network-selector
Match-селектор: Switch Network
XPath-селектор: //div[contains(text(), 'Switch Network')]

4.3. Меню "Trade"

CSS-селектор: a.trade-link
Match-селектор: Trade
XPath-селектор: //a[contains(text(), 'Trade')]

5. Советы по работе с селекторами

Используйте инструменты разработчика: В браузере есть встроенные инструменты разработчика (DevTools), которые позволяют изучать структуру HTML и находить селекторы. Нажмите правой кнопкой мыши на элемент и выберите "Изучить элемент".
Избегайте динамических селекторов: Если селектор содержит динамические значения (например, случайные числа или буквы), старайтесь избегать их использования. Вместо этого ищите статичные атрибуты, такие как id или классы.
Тестируйте селекторы: Перед использованием селектора в скрипте обязательно протестируйте его, чтобы убедиться, что он точно указывает на нужный элемент.

Заключение

Селекторы — это мощный инструмент для автоматизации взаимодействия с веб-элементами. Понимание различных видов селекторов и их правильное использование позволит вам создавать более надежные и эффективные скрипты. В этом уроке мы рассмотрели основные виды селекторов (CSS, Match, XPath и графический селектор), а также примеры их использования на реальном сайте.

Практикуйтесь в работе с селекторами, и со временем вы сможете легко находить и использовать их для автоматизации любых задач на веб-сайтах.