Поиск и выбор элементов на веб-странице - ключ к парсингу веб-страниц с помощью Selenium. Для поиска и выбора элементов на веб-странице вы можете использовать селекторы XPath в Selenium.
В этой статье я покажу вам, как находить и выбирать элементы на веб-страницах с помощью селекторов XPath в Selenium с библиотекой Selenium python. Итак, приступим.
Предпосылки:
Чтобы опробовать команды и примеры из этой статьи, вы должны иметь:
- На вашем компьютере установлен дистрибутив Linux (желательно Ubuntu).
- Python 3 установлен на вашем компьютере.
- PIP 3 установлен на вашем компьютере.
- Python virtualenv пакет установлен на вашем компьютере.
- На вашем компьютере установлены браузеры Mozilla Firefox или Google Chrome.
- Должен знать, как установить драйвер Firefox Gecko или веб-драйвер Chrome.
Для выполнения требований 4, 5 и 6 прочтите мою статью Введение в Selenium в Python 3 . Вы можете найти множество статей по другим темам на LinuxHint.com . Обязательно ознакомьтесь с ними, если вам понадобится помощь.
Настройка каталога проекта:
Чтобы все было организовано, создайте новый каталог проекта селен-xpath / следующее:
$mkdir -pvселен-xpath/водители 
Перейдите к селен-xpath / каталог проекта следующим образом:
$CDселен-xpath/ 
Создайте виртуальную среду Python в каталоге проекта следующим образом:
$virtualenv .venv 
Активируйте виртуальную среду следующим образом:
$источник.venv/являюсь/активировать 
Установите библиотеку Selenium Python с помощью PIP3 следующим образом:
$ pip3 установить селен 
Загрузите и установите все необходимые веб-драйверы в драйверы / каталог проекта. Я объяснил процесс загрузки и установки веб-драйверов в своей статье. Введение в Selenium в Python 3 .
Получите XPath Selector с помощью Chrome Developer Tool:
В этом разделе я покажу вам, как найти селектор XPath для элемента веб-страницы, который вы хотите выбрать с помощью Selenium, с помощью встроенного инструмента разработчика веб-браузера Google Chrome.
Чтобы получить селектор XPath с помощью веб-браузера Google Chrome, откройте Google Chrome и посетите веб-сайт, с которого вы хотите извлечь данные. Затем нажмите правую кнопку мыши (ПКМ) в пустой области страницы и нажмите Осмотреть открыть Инструмент разработчика Chrome .
Вы также можете нажать + Сдвиг + я открыть Инструмент разработчика Chrome .
Инструмент разработчика Chrome должен быть открыт.
Чтобы найти HTML-представление желаемого элемента веб-страницы, щелкните значок Осмотреть (
), как показано на скриншоте ниже.
Затем наведите указатель мыши на нужный элемент веб-страницы и нажмите левую кнопку мыши (ЛКМ), чтобы выбрать его.
HTML-представление выбранного веб-элемента будет выделено в Элементы вкладка Инструмент разработчика Chrome, как вы можете видеть на скриншоте ниже.
Чтобы получить селектор XPath желаемого элемента, выберите элемент из Элементы вкладка Инструмент разработчика Chrome и щелкните его правой кнопкой мыши (ПКМ). Затем выберите Копировать > Скопируйте XPath, как отмечено на скриншоте ниже.
Я вставил селектор XPath в текстовый редактор. Селектор XPath выглядит так, как показано на скриншоте ниже.
Получите XPath Selector с помощью Firefox Developer Tool:
В этом разделе я собираюсь показать вам, как найти селектор XPath для элемента веб-страницы, который вы хотите выбрать с помощью Selenium, с помощью встроенного инструмента разработчика веб-браузера Mozilla Firefox.
Чтобы получить селектор XPath с помощью веб-браузера Firefox, откройте Firefox и посетите веб-сайт, с которого вы хотите извлечь данные. Затем нажмите правую кнопку мыши (ПКМ) в пустой области страницы и нажмите Осмотрите элемент (Q) открыть Инструмент разработчика Firefox .
Инструмент разработчика Firefox должен быть открыт.
Чтобы найти HTML-представление желаемого элемента веб-страницы, щелкните значок Осмотреть (
), как показано на скриншоте ниже.
Затем наведите указатель мыши на нужный элемент веб-страницы и нажмите левую кнопку мыши (ЛКМ), чтобы выбрать его.
HTML-представление выбранного веб-элемента будет выделено в Инспектор вкладка Инструмент разработчика Firefox, как вы можете видеть на скриншоте ниже.
Чтобы получить селектор XPath желаемого элемента, выберите элемент из Инспектор вкладка Инструмент разработчика Firefox и щелкните его правой кнопкой мыши (ПКМ). Затем выберите Копировать > XPath как отмечено на скриншоте ниже.
Селектор XPath желаемого элемента должен выглядеть примерно так.
Извлечение данных с веб-страниц с помощью XPath Selector:
В этом разделе я собираюсь показать вам, как выбирать элементы веб-страницы и извлекать из них данные с помощью селекторов XPath с библиотекой Selenium Python.
Сначала создайте новый скрипт Python ex01.py и введите следующие строки кодов.
изселенИмпортироватьwebdriverизселен.webdriver.общий.ключи ИмпортироватьКлючи
изселен.webdriver.общий.к ИмпортироватьК
параметрызнак равноwebdriver.ChromeOptions()
параметры.Обезглавленный знак равно Правда
браузерзнак равноwebdriver.Хром(исполняемый_путьзнак равно'./drivers/chromedriver',
параметрызнак равнопараметры)
браузер.получать(https://www.unixtimestamp.com/)
отметка временизнак равнобраузер.find_element_by_xpath('/ html / body / div [1] / div [1]
/ div [2] / div [1] / div / div / h3 [2] ')
Распечатать('Текущая отметка времени:% s'%(отметка времени.текст.расколоть('')[0]))
браузер.близко()
Как только вы закончите, сохраните ex01.py Скрипт Python.
Строка 1-3 импортирует все необходимые компоненты Selenium.
Строка 5 создает объект параметров Chrome, а строка 6 включает безголовый режим для веб-браузера Chrome.
Строка 8 создает Chrome браузер объект, использующий хромированная отвертка двоичный из драйверы / каталог проекта.
Строка 10 указывает браузеру загрузить веб-сайт unixtimestamp.com.
Строка 12 находит элемент, имеющий данные отметки времени со страницы, используя селектор XPath, и сохраняет его в отметка времени Переменная.
Строка 13 анализирует данные временной метки элемента и выводит их на консоль.
Я скопировал селектор XPath отмеченного h2 элемент из unixtimestamp.com с помощью инструмента разработчика Chrome.
Строка 14 закрывает браузер.
Запустите скрипт Python ex01.py следующее:
$ python3 ex01.ру 
Как видите, данные отметки времени печатаются на экране.
Здесь я использовал browser.find_element_by_xpath (селектор) метод. Единственным параметром этого метода является селектор который является селектором XPath элемента.
Вместо того browser.find_element_by_xpath () метод, вы также можете использовать browser.find_element (по, селектор) метод. Для этого метода нужны два параметра. Первый параметр К будет Автор: XPATH поскольку мы будем использовать селектор XPath, а второй параметр селектор будет сам селектор XPath. Результат будет таким же.
Чтобы увидеть, как browser.find_element () метод работает для селектора XPath, создайте новый скрипт Python ex02.py , скопируйте и вставьте все строки из ex01.py к ex02.py и изменить строка 12 как отмечено на скриншоте ниже.
Как видите, скрипт Python ex02.py дает тот же результат, что и ex01.py .
$ python3 ex02.ру 
В browser.find_element_by_xpath () а также browser.find_element () методы используются для поиска и выбора одного элемента на веб-страницах. Если вы хотите найти и выбрать несколько элементов с помощью селекторов XPath, вам нужно использовать browser.find_elements_by_xpath () или browser.find_elements () методы.
В browser.find_elements_by_xpath () метод принимает тот же аргумент, что и browser.find_element_by_xpath () метод.
В browser.find_elements () метод принимает те же аргументы, что и browser.find_element () метод.
Давайте посмотрим на пример извлечения списка имен с помощью селектора XPath из random-name-generator.info с библиотекой Selenium Python.
Неупорядоченный список ( умереть тег) имеет 10 на внутри каждого тега, содержащего случайное имя. XPath для выбора всех на теги внутри умереть тег в этом случае // * [@ id = main] / div [3] / div [2] / ol // li
Давайте рассмотрим пример выбора нескольких элементов на веб-странице с помощью селекторов XPath.
Создайте новый скрипт Python ex03.py и введите в него следующие строки кодов.
изселенИмпортироватьwebdriverизселен.webdriver.общий.ключи ИмпортироватьКлючи
изселен.webdriver.общий.к ИмпортироватьК
параметрызнак равноwebdriver.ChromeOptions()
параметры.Обезглавленный знак равно Правда
браузерзнак равноwebdriver.Хром(исполняемый_путьзнак равно'./drivers/chromedriver',
параметрызнак равнопараметры)
браузер.получать('http://random-name-generator.info/')
именазнак равнобраузер.find_elements_by_xpath('
// * [@ id = 'main'] / div [3] / div [2] / ol // li ')
дляимявимена:
Распечатать(имя.текст)
браузер.близко()
Как только вы закончите, сохраните ex03.py Скрипт Python.
Строка 1-8 такая же, как в ex01.py Скрипт Python. Так что я не буду здесь снова их объяснять.
Строка 10 указывает браузеру загрузить сайт random-name-generator.info.
Строка 12 выбирает список имен с помощью browser.find_elements_by_xpath () метод. Этот метод использует селектор XPath // * [@ id = main] / div [3] / div [2] / ol // li чтобы найти список имен. Затем список имен сохраняется в имена Переменная.
В строках 13 и 14 a для цикл используется для перебора имена перечислить и распечатать имена на консоли.
Строка 16 закрывает браузер.
Запустите скрипт Python ex03.py следующее:
$ python3 ex03.ру 
Как видите, имена извлекаются с веб-страницы и печатаются на консоли.
Вместо использования browser.find_elements_by_xpath () метод, вы также можете использовать browser.find_elements () метод как раньше. Первый аргумент этого метода - Автор: XPATH, а второй аргумент - это селектор XPath.
Поэкспериментировать с browser.find_elements () метод, создайте новый скрипт Python ex04.py скопируйте все коды из ex03.py к ex04.py и измените строку 12, как показано на скриншоте ниже.
Вы должны получить тот же результат, что и раньше.
$ python3 ex04.ру 
Основы XPath Selector:
Инструмент разработчика Firefox или веб-браузера Google Chrome автоматически генерирует селектор XPath. Но этих селекторов XPath иногда недостаточно для вашего проекта. В этом случае вы должны знать, что делает определенный селектор XPath для построения вашего селектора XPath. В этом разделе я собираюсь показать вам основы селекторов XPath. Затем вы сможете создать свой собственный селектор XPath.
Создать новый каталог www / в каталоге вашего проекта следующим образом:
$mkdir -vwww 
Создать новый файл web01.html в www / каталог и введите следующие строки в этот файл.
< html языкзнак равно'на'>
< голова >
< мета кодировказнак равно'UTF-8'>
< мета имязнак равно'область просмотра' содержаниезнак равно'ширина = ширина устройства, начальный масштаб = 1.0'>
< заглавие >Базовый HTML-документ</ заглавие >
</ голова >
< тело >
< h1 >Привет, мир</ h1 >
</ тело >
</ html >
Как только вы закончите, сохраните web01.html файл.
Запустите простой HTTP-сервер на порту 8080, используя следующую команду:
$ python3 -m http.сервер- каталог www /8080 
HTTP-сервер должен запуститься.
У вас должен быть доступ к web01.html файл, используя URL http: // локальный: 8080 / web01.html , как вы можете видеть на скриншоте ниже.
Когда открыт Firefox или Chrome Developer Tool, нажмите + F , чтобы открыть окно поиска. Вы можете ввести здесь свой селектор XPath и очень легко увидеть, что он выбирает. Я собираюсь использовать этот инструмент в этом разделе.
Селектор XPath начинается с косая черта (/) большую часть времени. Это похоже на дерево каталогов Linux. В / является корнем всех элементов на веб-странице.
Первый элемент - это html . Итак, селектор XPath / html выбирает весь html ярлык.
Внутри html тег, у нас есть тело ярлык. В тело тег можно выбрать с помощью селектора XPath / html / body
В h1 заголовок находится внутри тело ярлык. В h1 заголовок можно выбрать с помощью селектора XPath / html / body / h1
Этот тип селектора XPath называется селектором абсолютного пути. В селекторе абсолютного пути вы должны перемещаться по веб-странице от корня (/) страницы. Недостатком селектора абсолютного пути является то, что даже небольшое изменение структуры веб-страницы может сделать ваш селектор XPath недействительным. Решением этой проблемы является относительный или частичный селектор XPath.
Чтобы увидеть, как работает относительный или частичный путь, создайте новый файл web02.html в www / каталог и введите в нем следующие строки кодов.
< html языкзнак равно'на'>
< голова >
< мета кодировказнак равно'UTF-8'>
< мета имязнак равно'область просмотра' содержаниезнак равно'ширина = ширина устройства, начальный масштаб = 1.0'>
< заглавие >Базовый HTML-документ</ заглавие >
</ голова >
< тело >
< h1 >Привет, мир</ h1 >
< div >
< п >это сообщение</ п >
</ div >
< div >
< охватывать >Привет, мир</ охватывать >
</ div >
</ тело >
</ html >
Как только вы закончите, сохраните web02.html файл и загрузите его в свой веб-браузер.
Как видите, селектор XPath // div / p выбирает п тег внутри div ярлык. Это пример относительного селектора XPath.
Относительный селектор XPath начинается с // . Затем вы указываете структуру элемента, который хотите выбрать. В этом случае, дел / п .
Так, // div / p означает выбрать п элемент внутри div элемент, не имеет значения, что предшествует ему.
Вы также можете выбирать элементы по различным атрибутам, например я бы , класс , тип, и т. д. с помощью селектора XPath. Посмотрим, как это сделать.
Создать новый файл web03.html в www / каталог и введите в нем следующие строки кодов.
< html языкзнак равно'на'>
< голова >
< мета кодировказнак равно'UTF-8'>
< мета имязнак равно'область просмотра' содержаниезнак равно'ширина = ширина устройства, начальный масштаб = 1.0'>
< заглавие > Базовый HTML-документ</ заглавие >
</ голова >
< тело >
< h1 > Привет, мир</ h1 >
< div классзнак равно'container1'>
< п > это сообщение</ п >
< охватывать > это еще одно сообщение</ охватывать >
</ div >
< div классзнак равно'container1'>
< h2 > заголовок2</ h2 >
< п > Некоторые люди
мудро выбирать боли, неприятности и те, которые не попадают на избранного
непростые перелеты и другие отличные услуги? Откуда или откуда он родился?</ п >
</ div >
< охватывать я бызнак равно'footer-msg'> это нижний колонтитул</ охватывать >
</нижний колонтитул>
</ тело >
</ html >
Как только вы закончите, сохраните web03.html файл и загрузите его в свой веб-браузер.
Допустим, вы хотите выбрать все div элементы, которые имеют класс имя container1 . Для этого вы можете использовать селектор XPath // div [@ class = ’container1 ′]
Как видите, у меня есть 2 элемента, которые соответствуют селектору XPath. // div [@ class = ’container1 ′]
Выбрать первый div элемент с класс имя container1 , Добавить [1] в конце XPath выберите, как показано на скриншоте ниже.
Таким же образом можно выбрать второй div элемент с класс имя container1 используя селектор XPath // div [@ class = ’container1 ′] [2]
Вы можете выбрать элементы по я бы также.
Например, чтобы выбрать элемент, имеющий я бы из footer-msg , вы можете использовать селектор XPath // * [@ id = ’footer-msg’]
Здесь * до [@ id = ’footer-msg’] используется для выбора любого элемента независимо от его тега.
Это основы селектора XPath. Теперь у вас должна быть возможность создать собственный селектор XPath для ваших проектов Selenium.
Заключение:
В этой статье я показал вам, как находить и выбирать элементы на веб-страницах с помощью селектора XPath с библиотекой Selenium Python. Я также обсудил наиболее распространенные селекторы XPath. Прочитав эту статью, вы почувствуете себя довольно уверенно, выбирая элементы с веб-страниц с помощью селектора XPath с библиотекой Selenium Python.