Ручной поиск CSS-селекторов в браузере

Если автоматически созданный инструментом записи селектор оказался не оптимальным, Пользователь может вручную отредактировать код. Для этого следует открыть исходный код элемента на веб-странице. Это можно сделать с помощью "Инструментов разработчика" ("Developer Tools") браузера, после чего самостоятельно подобрать подходящий в данной ситуации селектор.

Например, в Google Chrome перейти к "Developer Tools" можно двумя способами:

• в основном меню выбрать More Tools -> Developer Tools,

• нажать на клавиши Ctrl+Shift+I.

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

Некоторые веб-страницы блокируют обычное контекстное меню браузера и вместо него показывают своё собственное меню при правом клике. Иногда клик по элементу меняет его состояние так, что исчезает нужный атрибут. Например, чтобы записать селектор для непрочитанного сообщения в мессенджере, правый клик по нему может пометить сообщение как прочитанное, и его код в "Inspect" изменится. Чтобы увидеть исходный код элемента в обоих случаях, используйте иконку "Select Element" (в Google Chrome она самая первая на панели):

В других браузерах (Edge, Firefox и т.д.) инструмент "Developer Tools" выглядит и работает схожим образом, но конкретные названия пунктов меню (и комбинации клавиш для его вызова) могут отличаться от примера выше.

Современные веб-страницы очень динамичны. Они могут менять свои элементы, названия, порядок и внешний вид даже после загрузки с сервера и кеширования в браузере. Также страницы часто подгружаются по частям, с помощью фреймов или динамически изменяют структуру — это называется DOM (модель страницы в виде дерева тегов). Технологии, такие как Ajax, позволяют обновлять части страницы без необходимости её полностью перезагружать.

Чтобы увидеть исходный HTML-код страницы сразу после загрузки, можно выбрать в меню браузера пункт "View page source". Но для автоматизации это не обязательно, потому что страница за время работы меняется.

Когда используются "Developer Tools" браузера, по сути отображается обновляемая в реальном времени структура DOM. Поэтому для поиска элементов лучше пользоваться именно этим динамическим отображением, а не исходным исходным кодом страницы.