Перейти к содержимому
PD
Browser Automation Studio

Поиск элементов в BAS: селекторы, которые не ломаются

Как работает поиск элементов в Browser Automation Studio — CSS против XPath, почему записанные селекторы ломаются и как писать селекторы, переживающие изменения страницы.

Каждое действие BAS, которое касается страницы — клик, ввод, извлечение — сначала должно найти элемент. Сделаете селектор правильно — бот работает месяцами; ошибётесь — он сломается при следующем редизайне сайта. Это важнейший навык надёжной браузерной автоматизации.

Как работает поиск элементов в BAS

Когда вы записываете действие, BAS фиксирует селектор, указывающий на элемент, с которым вы взаимодействовали. При повторе он запрашивает живой DOM этим селектором и действует на совпадение. Запись удобна, но часто выбирает хрупкие селекторы — длинные цепочки автогенерируемых классов или позиции nth-child, которые легко меняются.

Решение — относиться к записанному селектору как к черновику и дорабатывать его руками.

CSS-селекторы: ваш выбор по умолчанию

CSS-селекторы покрывают подавляющее большинство случаев и работают быстрее всего. Приоритет того, на что опираться:

  1. id#login-button. Уникален и стабилен, когда есть.
  2. nameinput[name="email"]. Часто встречается и надёжен на формах.
  3. Атрибуты data-*[data-testid="submit"]. Разработчики часто добавляют их специально как стабильные зацепки.
  4. Семантические комбинации класса/атрибутаbutton.primary[type="submit"].

Избегайте привязки к классам вроде css-1a2b3c — их генерируют сборщики, и они меняются с каждым релизом.

XPath: когда CSS не хватает

XPath мощнее, но медленнее и многословнее. Используйте его для двух вещей, которые CSS не умеет:

  • Поиск по видимому тексту: //button[contains(text(),"Войти")] — незаменимо, когда у кнопок нет стабильных атрибутов.
  • Движение относительно другого элемента: найти подпись (label), затем её соседний input.

Если цель выражается через CSS — предпочитайте CSS. Переходите на XPath только ради поиска по тексту и реляционных запросов.

Селекторы, которые переживают изменения

  • Привязывайтесь к смыслу, а не к вёрстке. [name="password"] описывает, что это за поле; div:nth-child(3) > inputгде оно случайно стоит сегодня.
  • Делайте короче. Каждый лишний шаг в цепочке — ещё одна точка, которая может измениться.
  • Один сильный атрибут лучше длинного хрупкого пути.
  • Проверяйте после перезагрузки. Перезапустите после жёсткого обновления; хороший селектор совпадает каждый раз.

Дело не только в выборе — ещё и в таймингах

Правильный селектор всё равно упадёт, если элемент ещё не отрисовался. Страницы грузятся асинхронно, поэтому сочетайте выбор с шагом ожидания элемента перед действием. Большинство ошибок «селектор не найден» — это на самом деле ошибки таймингов: элемента просто ещё не было.

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

Вопросы и ответы

Что использовать в BAS — CSS или XPath селекторы?

В большинстве случаев CSS-селекторы: они короче и быстрее. XPath берите, только когда нужно искать по видимому тексту или двигаться относительно другого элемента — этого CSS не умеет.

Почему бот в BAS перестаёт находить элемент?

Обычно селектор опирался на автогенерируемый класс или абсолютную позицию, которые изменились при следующем деплое сайта. Привязывайте селектор к стабильным атрибутам: id, name, data-*.

Ещё по теме

  • #Browser Automation Studio
  • #BAS
  • #Селекторы
  • #CSS
  • #XPath

Есть идея? Давайте превратим её в работающий продукт.

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