Самое важное о селекторах в BAS

Большинство новичков при создании скриптов даже не задумываются, насколько важен выбор селектора — берут первый попавшийся, чаще всего CSS, и не знают, что есть другие, часто более удобные варианты.

В итоге селекторы получаются ненадёжными (сломаются при первом же обновлении сайта). Давайте разберёмся, какие способы выбора элементов вообще есть в BAS, и какие из них действительно стоит использовать.

1. CSS. Что такое DOM и откуда берутся классы и ID

Когда ты открываешь сайт ты видишь кнопки, поля, тексты.

Но под капотом у каждой страницы есть структура, которая описывает всё это. Она называется DOM — Document Object Model (да не важно как она называется)

Проще говоря, это дерево из элементов: div, button, input и так далее

DOM - это структура, по которой построена любая страница. Она выглядит как вложенные "контейнеры" — один элемент находится внутри другого. Всё это описывается с помощью HTML-тегов: div, span, input, button, и так далее.

Пример простого фрагмента:

<div class="form">
  <input id="email" placeholder="Email">
  <button>Отправить</button>
</div>

• div — это просто блок (контейнер), в нём могут быть другие элементы.
• input — поле ввода
• button — кнопка

Частая ошибка: селекторы вида :nth-child(...)

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

>CSS> :nth-child(1) > :nth-child(1) > :nth-child(2) > :nth-child(1) > img

Когда ты используешь :nth-child(...), ты говоришь: "дай мне второй элемент внутри вот этого блока, внутри другого блока и тд".
Если туда случайно добавят ещё один div, то счёт сдвинется, и BAS нажмёт не туда. Поэтому такие селекторы — хрупкие.

На первый взгляд - работает. Но на деле:

• Такой селектор зависит от точной структуры страницы, и если добавится хоть один новый div — он перестанет находить элемент.
• Невозможно понять, что он делает.
• При обновлении сайта он почти наверняка сломается.

Вот простой пример:

<div class="form">
  <input id="email" type="text">
  <button class="btn-submit">Отправить</button>
</div>

Каждый элемент может иметь:

• ID — уникальный идентификатор (id="email"),
• Class — класс или группа (например, class="btn-submit"),
• Атрибуты — всё остальное (type="text", placeholder="Ваш e-mail" и т.д.).

Ты не видишь этого на сайте, но BAS видит. Именно по этой структуре BAS может понять, куда нажать или что заполнить.

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

id="login"
id="userpassword"
class="email"
class="password"

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

>CSS> #login
>CSS> #userpassword
>CSS> .email
>CSS> .password

Почему так?

Это особенность HTML и CSS:

• id="..." - это уникальный идентификатор. В CSS (и в BAS) он обозначается через решётку #.
• class="..." - это группа или категория, и она обозначается через точку .

Примеры:

• #login - означает: "элемент с id login"
• .email - означает: "элемент с классом email"

Когда мы пишем:

>CSS> #login

это значит — найти элемент с id="login". Символ # — это стандарт в CSS.

А если так:

>CSS> .email

это элемент с class="email". Символ . — для классов.

Также можно обратиться к атрибутам:

>CSS> input[placeholder="Email"]

Это значит: найти input, у которого есть placeholder="Email". Атрибут placeholder — это текст-подсказка, который отображается внутри поля ввода до того, как пользователь начнёт что-то печатать

Пример:

На сайте ты увидишь это как серый текст внутри поля.

Этот атрибут очень удобно использовать в BAS, потому что:

• Он часто бывает уникальным и стабильным.
• Его видно на экране, и ты можешь сразу понять, к чему он относится.
• Он не меняется от структуры страницы, как классы или id.

Важно: ты не обязан использовать всё подряд. Не нужно писать сразу div > span > input. Достаточно одного хорошего признака, который стабилен.

Если на элементе есть и id, и class, лучше использовать id.

Пример:

<input id="emailInput" class="input email">

Селектор >CSS> #emailInput будет более точным и уникальным, чем >CSS> .email.
В HTML id должен быть уникальным на странице, а вот классы часто повторяются.

Поэтому правило простое:

Если у элемента есть id - используй его. Если нет - ищи по class или другим атрибутам (placeholder, name и т.д.)

Когда это работает хорошо?

• Когда id и class звучат логично, а не сгенерированы автоматически
• Когда они не меняются от запуска к запуску и не зависят от языка или содержимого

А вот так делать не стоит:

class="x9s7q3d"
class="input-98af_x"
id="b12"

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

TL;DR по CSS

CSS-селекторы отлично подходят, когда:

• У элемента есть стабильный и осмысленный id или class
• Есть логичный атрибут (name, type, placeholder, value)
• Ты хочешь задать точное и универсальное правило

Избегай всего, что выглядит как автоматически сгенерированное, и не строй селекторы только на структуре.

CSS хорош тем, что быстрее, чем MATCH, но требует чуть больше внимания и понимания, что именно ты выбираешь.

2. MATCH — самый простой способ находить элементы в BAS

Возьмем пример, у нас в коде элемента есть вот такое:

<input id="input-98af_x" 
class="x9s7q3d" 
placeholder="Email/Sub-Account"
type="text" value="">="">

ID и класс нам не подойдут, так как они содержат набор случайных букв и цифр, которые будут меняться. Что я предлагаю: взять атрибут placeholder и использовать метод MATCH. Вот как в итоге будет выглядеть структура в самом BAS, чтобы найти нужный элемент среди кучи бессмысленных классов:

Что это за >AT>0 в конце?

Дело в том, что MATCH может найти сразу несколько элементов, подходящих под условие. Например, если на странице есть два поля с одинаковым placeholder, BAS не знает, какое из них выбрать и может нажать не туда.

>AT>0 означает: использовать первый подходящий элемент.
В программировании отсчёт начинается с нуля, поэтому:

• >AT>0 — это первый элемент
• >AT>1 — второй
• >AT>2 — третий и так далее

Если не указать AT, BAS может сработать нестабильно и сегодня нажмёт на нужный элемент, завтра на соседний.

3. РАЗБИРАЕМ НА ПРИМЕРЕ

К примеру возьмем Ютуб:

Если мы наведемся на кнопку лайка и откроем правой кнопкой мышки код элемента в структуре мы увидим следующее:

Как мы видим у нас нет как такого явного класса, или же айди. Но это не значит, что элемент нельзя зацепить

Что мы можем с этого достать:

aria-label="like this video along with 10 other people"

title="I like this"

aria-label="like this video along with 10 other people"

Использовать как есть - плохо, потому что часть "10 other people" будет меняться

Но можно использовать Match с частью строки:

>MATCH> like this video>AT>0

или CSS с *= (содержит):

>CSS> button[aria-label*="like this video"]

Пример кнопки входа:

Код элемента:

<button class="_root_79e1v_50 _primary_79e1v_85" 
aria-describedby="" aria-disabled="false" type="submit" 
name="intent" value="email">Continue</button>

Я вижу для себя 3 варианта, как мы можем использовать MATCH здесь, потому что class выглядит как 💩

Вариант 1:

>MATCH>type="submit">AT>0

Почему:

• Атрибут type="submit" встречается только у кнопок отправки форм.
• Если это единственная такая кнопка на странице — работает отлично.
• Если на странице есть несколько submit, обязательно указываем >AT>.

Вариант 2:

>MATCH>value="email">AT>0

Почему:

• Атрибут value="email" это скрытая "цель" кнопки, и на большинстве сайтов он остаётся стабильным.
• Хороший выбор, если на странице есть другие кнопки, но они с другими value.

Вариант 3:

>MATCH>Continue>AT>0

Почему:

• Поиск по тексту кнопки самый читаемый и понятный способ.
• Но он зависит от языка страницы если пользователь сменит язык, кнопка может называться иначе.
• Работает, если ты уверен, что текст стабилен.

TL;DR по MATCH

1. Всегда указывай >AT>0

• Даже если на странице сейчас один элемент — завтра может появиться второй.
• >AT>0 означает: возьми первый подходящий элемент.

2. Используй смысловые атрибуты

• Ищи по placeholder, name, type, value, title, aria-label, если они содержат понятные и постоянные значения.
  Пример: >MATCH>placeholder="Email address">AT>0 value="submit">AT>0

3. Можно искать по тексту, но с осторожностью

• Поиск по тексту (>MATCH> Отправить) работает, но может сломаться при смене языка или дизайна.
• Не злоупотребляй этим, если есть альтернативы.

4. Избегай динамических значений

• Не используй id, class, aria-*, если они выглядят как сгенерированные (например, id=":r1:-xyz123" или class="_root_ab123_4").

5. Минимизируй длину MATCH

• Чем короче и точнее выражение — тем меньше шансов, что оно “сломается” при обновлении сайта.

А что насчёт XPath?

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

Пример:

>XPath> //button[@type="submit"]

Или:

>XPath> //input[contains(@placeholder, "Email")]

Что умеет XPath:

• Искать элементы по частичному совпадению
• Навигировать вверх и вниз по дереву элементов

Но честно:

За 3 года работы в BAS мне никогда не понадобился XPath, не говоря уже про AT и None (не встречал ниразу в скриптах чужих даже)
Во всех проектах от простых до сложных всегда хватало MATCH и CSS.

Я предпочитаю использовать самое простое. XPath требует времени на изучение, синтаксис у него специфичный, и если ты не работал с XML или HTML в ручную — он может показаться перегруженным. Если ты умеешь решать задачу с помощью MATCH или CSS - ПОЛНЫЙ ГАЗ!

Мой Телеграм канал - @baser_crypto

YouTube - youtube.com/@baser_crypto