Как понять, что селектор не оптимальный?

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

#main > footer > div._2lSWV._3cjY2.copyable-area > div > span:nth-child(2) > div > div._1VZX7 > div._2xy_p._3XKXx > button

и селектор

button[aria-label="Отправить"]

будут обозначать один и тот же элемент управления – кнопку «Отправить». И они оба будут работать в моменте. Первый селектор опирается на длинный путь от самого начала (корневого элемента) веб-страницы до конкретного элемента управления «вниз» по дереву иерархии элементов управления. Второй селектор опирается на тип тега элемента управления и один характерный атрибут этого тега. Несмотря на то, что в момент записи оба селектора работают корректно, первый селектор с гораздо большей вероятностью «сломается», то есть перестанет работать, при очередном обновлении веб-приложения или веб-сайта. Например, по пути селектора появятся или наоборот исчезнут промежуточные элементы управления, и, следовательно, изменится сам путь от корневого элемента до нужного нам.

Также, если в селекторе присутствуют псевдослучайные комбинации букв и цифр (такие как 1VZX7 или 3XKXx в примере выше), это является признаком потенциально нестабильного селектора. Например, эта комбинация букв и цифр может меняться при каждом заходе пользователя на сайт, и для другого пользователя она будет уже другой. Проверить это можно, разлогинившись из сайта, закрыв браузер, открыв его и снова перейдя на нужную страницу, либо просто зайдя на эту страницу с другого компьютера или браузера, и проверив – те же буквы и цифры вы видите в этом месте селектора, или уже другие. Также, может помочь (но не всегда) комбинация Ctrl+F5, которая вызывает полную перезагрузку страницы. Но, даже если после всех этих действий, комбинация букв и цифр не поменялась, она может поменяться после следующего билда (обновления) веб-сайта или веб-сервиса, т.к. современные фреймворки веб-сайтов (такие как Angular, React и т.д.) могут генерировать эти названия классов случайным образом при каждой пересборке страницы.

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

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