Поиск элементов с помощью селекторов CSS с помощью Selenium

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

Предпосылки:

Чтобы опробовать команды и примеры из этой статьи, вы должны иметь,

1) Дистрибутив Linux (желательно Ubuntu), установленный на вашем компьютере.
2) Python 3 установлен на вашем компьютере.
3) PIP 3 установлен на вашем компьютере.
4) Python virtualenv пакет установлен на вашем компьютере.
5) Веб-браузеры Mozilla Firefox или Google Chrome, установленные на вашем компьютере.
6) Необходимо знать, как установить драйвер Firefox Gecko или веб-драйвер Chrome.

Для выполнения требований 4, 5 и 6 прочтите мою статью Введение в Selenium с Python 3 в Linuxhint.ком.

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

Настройка каталога проекта:

Чтобы все было организовано, создайте новый каталог проекта Селен-CSS-селектор / следующим образом:

$ mkdir -pv selenium-css-selector / драйверы

Перейдите к селен-CSS-селектор / каталог проекта следующим образом:

$ cd селен-css-селектор /

Создайте виртуальную среду Python в каталоге проекта следующим образом:

$ virtualenv .Venv

Активируйте виртуальную среду следующим образом:

$ источник .Venv / bin / активировать

Установите библиотеку Selenium Python с помощью PIP3 следующим образом:

$ pip3 установить селен

Загрузите и установите все необходимые веб-драйверы в драйверы / каталог проекта. Я объяснил процесс загрузки и установки веб-драйверов в своей статье Введение в Selenium с Python 3. Если вам нужна помощь, ищите на LinuxHint.ком для этой статьи.

Получите селектор CSS с помощью инструмента разработчика Chrome:

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

Чтобы получить селектор CSS с помощью веб-браузера Google Chrome, откройте Google Chrome и посетите веб-сайт, с которого вы хотите извлечь данные. Затем нажмите правую кнопку мыши (ПКМ) в пустой области страницы и нажмите Осмотреть открыть Инструмент разработчика Chrome.

Вы также можете нажать + Сдвиг + я открыть Инструмент разработчика Chrome.

Инструмент разработчика Chrome должен быть открыт.

Чтобы найти HTML-представление желаемого элемента веб-страницы, щелкните значок Осмотреть(), как показано на скриншоте ниже.

Затем наведите указатель мыши на нужный элемент веб-страницы и нажмите левую кнопку мыши (ЛКМ), чтобы выбрать его.

HTML-представление выбранного веб-элемента будет выделено в Элементы вкладка Инструмент разработчика Chrome как вы можете видеть на скриншоте ниже.

Чтобы получить селектор CSS для желаемого элемента, выберите элемент из Элементы вкладка Инструмент разработчика Chrome и щелкните по нему правой кнопкой мыши (ПКМ). Затем выберите Копировать > Селектор копирования как отмечено на скриншоте ниже.

Я вставил селектор CSS в текстовый редактор. Селектор CSS выглядит так, как показано на скриншоте ниже.

Получите селектор CSS с помощью Firefox Developer Tool:

В этом разделе я собираюсь показать вам, как найти селектор CSS для элемента веб-страницы, который вы хотите выбрать с помощью Selenium, с помощью встроенного инструмента разработчика веб-браузера Mozilla Firefox.

Чтобы получить селектор CSS с помощью веб-браузера Firefox, откройте Firefox и посетите веб-сайт, с которого вы хотите извлечь данные. Затем нажмите правую кнопку мыши (ПКМ) в пустой области страницы и нажмите Осмотрите элемент (Q) открыть Инструмент разработчика Firefox.

Инструмент разработчика Firefox должен быть открыт.

Чтобы найти HTML-представление желаемого элемента веб-страницы, щелкните значок Осмотреть(), как показано на скриншоте ниже.

Затем наведите указатель мыши на нужный элемент веб-страницы и нажмите левую кнопку мыши (ЛКМ), чтобы выбрать его.

HTML-представление выбранного веб-элемента будет выделено в Инспектор вкладка Инструмент разработчика Firefox как вы можете видеть на скриншоте ниже.

Чтобы получить селектор CSS для желаемого элемента, выберите элемент из Инспектор вкладка Инструмент разработчика Firefox и щелкните по нему правой кнопкой мыши (ПКМ). Затем выберите Копировать > Селектор CSS как отмечено на скриншоте ниже.

Селектор CSS желаемого элемента должен выглядеть примерно так.

Извлечение данных с помощью CSS-селектора с Selenium:

В этом разделе я покажу вам, как выбирать элементы веб-страницы и извлекать из них данные с помощью селекторов CSS с библиотекой Selenium Python.

Сначала создайте новый скрипт Python ex00.ру и введите следующие строки кодов.

из selenium import webdriver
из селена.webdriver.общий.ключи импорт Ключи
из селена.webdriver.общий.по импорту По
options = webdriver.ChromeOptions ()
параметры.headless = Правда
браузер = веб-драйвер.Chrome (исполняемый_путь = "./ drivers / chromedriver ", options = options)
браузер.get ("https: // www.unixtimestamp.com / ")
timestamp = браузер.find_element_by_css_selector ('h3.текст-опасность: nth-child (3) ')
print ('Текущая отметка времени:% s'% (отметка времени.текст.split (") [0]))
браузер.Закрыть()

Как только вы закончите, сохраните ex00.ру Скрипт Python.

Строка 1-3 импортирует все необходимые компоненты Selenium.

Строка 5 создает объект параметров Chrome, а строка 6 включает безголовый режим для веб-браузера Chrome.

Строка 8 создает Chrome браузер объект, использующий хромированная отвертка двоичный из драйверы / каталог проекта.

Строка 10 сообщает браузеру загрузить веб-сайт unixtimestamp.ком.

Строка 12 находит элемент, который имеет данные отметки времени со страницы с помощью селектора CSS, и сохраняет его в отметка времени Переменная.

Строка 13 анализирует данные временной метки элемента и выводит их на консоль.

Вот как HTML-структура данных временной метки UNIX в unixtimestamp.com выглядит как.

Строка 14 закрывает браузер.

Запустите скрипт Python ex00.ру следующим образом:

$ python3 ex00.ру

Как видите, данные отметки времени печатаются на экране.

Здесь я использовал браузер.find_element (по, селектор) метод.

Поскольку мы используем селекторы CSS, первым параметром будет От.CSS_SELECTOR а вторым параметром будет сам селектор CSS.

Вместо браузер.find_element () метод, вы также можете использовать браузер.find_element_by_css_selector (селектор) метод. Для работы этого метода нужен только селектор CSS. Результат будет тот же.

В браузер.find_element () а также браузер.find_element_by_css_selector () методы используются для поиска и выбора одного элемента на веб-странице. Если вы хотите найти и выбрать несколько элементов с помощью селекторов CSS, вам нужно использовать браузер.find_elements () а также браузер.find_elements_by_css_selector () методы.

В браузер.find_elements () метод принимает те же аргументы, что и браузер.find_element () метод.

В браузер.find_elements_by_css_selector () метод принимает тот же аргумент, что и браузер.find_element_by_css_selector () метод.

Давайте посмотрим на пример извлечения списка имен с помощью селекторов CSS из генератора случайных имен.информация с Selenium.

Как видите, неупорядоченный список имеет имя класса список имен. Итак, мы можем использовать селектор CSS .nameList li выбрать все имена с веб-страницы.

Давайте рассмотрим пример выбора нескольких элементов на веб-странице с помощью селекторов CSS.

Создайте новый скрипт Python ex01.ру и введите в нем следующие строки кода.

из selenium import webdriver
из селена.webdriver.общий.ключи импорт Ключи
из селена.webdriver.общий.по импорту По
options = webdriver.ChromeOptions ()
параметры.headless = Правда
браузер = веб-драйвер.Chrome (исполняемый_путь = "./ drivers / chromedriver ", options = options)
браузер.get ("http: // генератор случайных имен.Информация/")
имена = браузер.find_elements (Автор.CSS_SELECTOR, '.nameList li ')
для имени в именах:
печать (имя.текст)
браузер.Закрыть()

Как только вы закончите, сохраните ex01.ру Скрипт Python.

Строка 1-8 такая же, как в ex00.ру Скрипт Python. Так что я не буду здесь снова их объяснять.

Строка 10 сообщает браузеру загрузить генератор случайных имен веб-сайта.Информация.

Строка 12 выбирает список имен с помощью браузер.find_elements () метод. Этот метод использует селектор CSS .nameList li найти список имен. Затем список имен сохраняется в имена Переменная.

В строках 13 и 14 a для цикл используется для перебора имена перечислить и распечатать имена на консоли.

Строка 16 закрывает браузер.

Запустите скрипт Python ex01.ру следующим образом:

$ python3 ex01.ру

Как видите, имена извлекаются с веб-страницы и печатаются на консоли.

Вместо использования браузер.find_elements () метод, вы также можете использовать браузер.find_elements_by_css_selector () метод как раньше. Для работы этого метода нужен только селектор CSS. Результат будет тот же.

Основы CSS-селекторов:

Вы всегда можете найти CSS-селектор элемента веб-страницы с помощью инструмента разработчика Firefox или веб-браузера Chrome. Этот автоматически сгенерированный селектор CSS может быть не тем, что вам нужно. Иногда вам, возможно, придется написать свой CSS-селектор.

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

Если вы хотите выбрать элемент на веб-странице с помощью идентификатора сообщение, селектор CSS будет #сообщение.

Селектор CSS .зеленый выберет элемент, используя имя класса зеленый.

Если вы хотите выбрать элемент (класс сообщение) внутри другого элемента (класса контейнер), селектор CSS будет .контейнер .сообщение

Селектор CSS .сообщение.успех выберет элемент, который имеет два класса CSS сообщение а также успех.

Чтобы выбрать все п теги, вы можете использовать селектор CSS п.

Чтобы выбрать только п теги внутри div теги, вы можете использовать селектор CSS div p

Чтобы выбрать п теги, которые являются прямыми братьями и сестрами div теги, вы можете использовать селектор CSS div> p

Чтобы выбрать все охватывать а также п теги, вы можете использовать селектор CSS p, пролет

Чтобы выбрать п тег сразу после div тег, вы можете использовать селектор CSS div + p

Чтобы выбрать п тег после div тег, вы можете использовать селектор CSS div ~ p

Чтобы выбрать все п теги с именем класса сообщение, вы можете использовать селектор CSS п.сообщение

Чтобы выбрать все охватывать теги с именем класса сообщение, вы можете использовать селектор CSS охватывать.сообщение

Чтобы выбрать все элементы, у которых есть атрибут href, вы можете использовать селектор CSS [href]

Чтобы выбрать элемент, имеющий атрибут название и ценность название атрибут имя пользователя, вы можете использовать селектор CSS [name = ”имя пользователя”]

Чтобы выбрать все элементы, у которых есть атрибут альт и ценность альт атрибут, содержащий подстроку vscode, вы можете использовать селектор CSS [alt ~ = ”vscode”]

Чтобы выбрать все элементы, у которых есть href атрибут и значение href атрибут начинается со строки https, вы можете использовать селектор CSS [href ^ = ”https”]

Чтобы выбрать все элементы, у которых есть href атрибут и значение href атрибут, заканчивающийся строкой .ком, вы можете использовать селектор CSS [href $ = ”.com »]

Чтобы выбрать все элементы, у которых есть href атрибут и значение href атрибут имеет подстроку Google, вы можете использовать селектор CSS [href * = "Google"]

Если вы хотите выбрать первый Ли тег внутри ул тег, вы можете использовать селектор CSS ul li: первенец

Если вы хотите выбрать первый Ли тег внутри ул тег, вы также можете использовать селектор CSS ul li: nth-ребенок (1)

Если вы хотите выбрать последний Ли тег внутри ул тег, вы можете использовать селектор CSS ул ли: последний ребенок

Если вы хотите выбрать последний Ли тег внутри ул тег, вы также можете использовать селектор CSS ul li: nth-last-child (1)

Если вы хотите выбрать второй Ли тег внутри ул тег, начиная с начала, вы можете использовать селектор CSS ul li: nth-ребенок (2)

Если вы хотите выбрать третий Ли тег внутри ул тег, начиная с начала, вы можете использовать селектор CSS ul li: nth-ребенок (3)

Если вы хотите выбрать второй Ли тег внутри ул тег, начиная с конца, вы можете использовать селектор CSS ul li: nth-last-child (2)

Если вы хотите выбрать третий Ли тег внутри ул тег, начиная с конца, вы можете использовать селектор CSS ul li: nth-last-child (3)

Это наиболее распространенные селекторы CSS. Вы обнаружите, что используете их почти в каждом проекте Selenium. Есть еще много других CSS-селекторов. Вы можете найти их все в w3schools.com Справка по селекторам CSS.

Включение:

В этой статье я показал, как находить и выбирать элементы веб-страницы с помощью селекторов CSS с Selenium. Я также обсудил основы селекторов CSS. Вы должны уметь удобно использовать селекторы CSS для своих проектов на Selenium.