Использование XPath и Selenium для поиска элемента на HTML-странице

XPath, также известный как XML Path Language, — это язык для выбора элементов из XML-документа. Поскольку HTML и XML следуют одной и той же структуре документа, XPath также можно использовать для выбора элементов на веб-странице.

Поиск и выбор элементов на веб-странице является ключом к парсингу веб-страниц с помощью Selenium. Для поиска и выбора элементов на веб-странице вы можете использовать селекторы XPath в Selenium.

В этой статье я покажу вам, как находить и выбирать элементы на веб-страницах с помощью селекторов XPath в 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.com. Обязательно ознакомьтесь с ними, если вам нужна помощь.

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

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

$ mkdir -pv selenium-xpath/drivers

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

$ cd selenium-xpath/

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

$ virtualenv .venv

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

$ source .venv/bin/activate

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

$ pip3 install selenium

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

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

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

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

Вы также можете нажать + Shift + I , чтобы открыть Инструмент разработчика Chrome .

Инструмент разработчика Chrome .

Чтобы найти HTML-представление нужного элемента веб-страницы, нажмите Проверить (

), как отмечено на скриншоте ниже.

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

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

Чтобы получить селектор XPath для нужного элемента, выберите элемент на вкладке Elements в Chrome Developer Tool и вправо -щелкните (ПКМ) по нему. Затем выберите Копировать > Копировать XPath, как отмечено на скриншоте ниже.

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

Получите XPath Selector с помощью Firefox Developer Tool:

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

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

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

Чтобы найти HTML-представление желаемого элемента веб-страницы, нажмите Inspect (

), как отмечено на скриншоте ниже.

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

HTML-представление выбранного веб-элемента будет быть выделенным на вкладке Inspector Firefox Developer Tool , как вы можете видеть на снимке экрана ниже.

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

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

Извлечение данных с веб-страниц с помощью XPath Selector:

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

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

из selenium import webdriver
из selenium.webdriver.common.keys import Keys
из selenium.webdriver. common.by import By
options = webdriver.ChromeOptions ()
options.headless = True
browser = webdriver.Chrome (executable_path = «./drivers/chromedriver»,
options = options)
browser.get («https://www.unixtimestamp.com/»)
t imestamp = browser.find_element_by_xpath (‘/html/body/div [1]/div [1]
/div [2]/div [1]/div/div/h3 [2]’)
print (‘Текущая отметка времени:% s’% (timestamp.text.split (») [0]))
browser.close ()

По завершении сохраните скрипт Python ex01.py .

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

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

Строка 8 создает объект Chrome browser с использованием двоичного файла chromedriver . из каталога drivers/ проекта.

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

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

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

Я скопировал селектор XPath отмеченного элемента h2 из unixtimestamp.com с помощью инструмента разработчика Chrome. .

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

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

$ python3 ex01.py

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

Здесь я использовал метод browser.find_element_by_xpath (selector) . Единственным параметром этого метода является Селектор , который является селектором XPath элемента.

Вместо метода browser.find_element_by_xpath () вы также можете используйте метод browser.find_element (By, selector) . Этот метод требует двух параметров. первый параметр By будет By.XPATH , так как мы будем использовать селектор XPath, а второй параметр селектор будет быть самим селектором XPath. Результат будет таким же.

Чтобы увидеть, как метод browser.find_element () работает с селектором XPath, создайте новый скрипт Python ex02 .py , скопируйте и вставьте все строки из ex01.py в ex02.py и измените строку 12 , как отмечено на скриншоте ниже.

Как вы Как видите, сценарий Python ex02.py дает тот же результат, что и ex01.py .

$ python3 ex02.py

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.

Неупорядоченный список (тег ol ) содержит 10 тегов li внутри каждого, содержащих случайное имя. XPath для выбора всех тегов li внутри тега ol в этом случае — //* [@ id = ”main”] /div [3]/div [2]/ol//li

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

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

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
из selenium.webdriver.common.by импортировать По
options = webdriver.ChromeOptions ()
options.headless = True
browser = webdriver.Chrome (executable_path = «./drivers/ chromedriver «,
options = options)
browser.get (» http://random-name-generator.info/»)
names = browser.find_elements_by_xpath (‘
//* [@ id = «main»]/div [3]/div [2]/ol//li ‘)
для имени в именах:
print (name.text)
browser.close ()

По завершении сохраните сценарий Python ex03.py .

Строка 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 для поиска списка имен. Затем список имен сохраняется в переменной names .

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

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

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

$ python3 ex03.py

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

Вместо использования метода browser.find_elements_by_xpath () вы также можете использовать метод browser.find_elements () , как и раньше. Первый аргумент этого метода — By.XPATH, а второй аргумент — селектор XPath.

Чтобы поэкспериментировать с browser.find_elements ( ) создайте новый скрипт Python ex04.py , скопируйте все коды из ex03. py на ex04.py и измените строку 12, как отмечено на скриншоте ниже.

Вы должны получить тот же результат, что и раньше.

$ python3 ex04.py

Основы XPath Selector:

Инструмент разработчика Firefox или веб-браузера Google Chrome автоматически генерирует селектор XPath. Но этих селекторов XPath иногда недостаточно для вашего проекта. В этом случае вы должны знать, что делает определенный селектор XPath для построения вашего селектора XPath. В этом разделе я собираюсь показать вам основы селекторов XPath. Затем вы сможете создать свой собственный селектор XPath.

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

$ mkdir -v www

Создайте новый файл web01.html в каталоге www/ и введите следующие строки в этот файл.

Базовый HTML-документ

Hello World

По завершении сохраните файл web01.html .

Запустите простой HTTP-сервер на порту 8080, используя следующую команду:

$ python3 -m http. сервер — каталог www/8080

Должен запуститься HTTP-сервер.

У вас должна быть возможность получить доступ к файлу web01.html , используя URL-адрес http://localhost: 8080/web01.html, как видно на скриншоте ниже.

Пока Открывается Firefox или Chrome Developer Tool, нажмите + F , чтобы открыть окно поиска. Вы можете ввести здесь свой селектор XPath и очень легко увидеть, что он выбирает. Я собираюсь использовать этот инструмент в этом разделе.

Селектор XPath в большинстве случаев начинается с косой черты (/) . Это похоже на дерево каталогов Linux. / — это корень всех элементов на веб-странице.

Первый элемент — это html . Итак, селектор XPath /html выбирает весь тег html .

Внутри тега html у нас есть тег body . body можно выбрать с помощью селектора XPath

Заголовок h1 находится внутри тега body . h1 заголовок можно выбрать с помощью селектора XPath

Этот тип селектора XPath называется селектором абсолютного пути. В селекторе абсолютного пути вы должны перемещаться по веб-странице от корня (/) страницы. Недостаток абсолютного Селектор пути заключается в том, что даже небольшое изменение структуры веб-страницы может сделать ваш селектор XPath недействительным. Решением этой проблемы является относительный или частичный селектор XPath.

Чтобы увидеть, как относительный путь или частичный путь работает, создайте новый файл web02.html в каталоге www/ ectory и введите в нем следующие строки кодов.

Базовый HTML-документ

Hello World

это сообщение

привет мир

Как только вы закончите , сохраните файл web02.html и загрузите его в свой веб-браузер.

Как видите, селектор XPath //div/p выбирает тег p внутри Тег div . Это пример относительного селектора XPath.

Относительный селектор XPath начинается с //. Затем вы указываете структуру элемента, который хотите выбрать. В этом случае div/p .

Итак, //div/p означает выбор p внутри элемента div , не имеет значения, что предшествует ему.

Вы также можете выбирать элементы по различным атрибутам, таким как id , class , type и т. д. с помощью селектора XPath. Давайте посмотрим, как это сделать.

Создайте новый файл web03.html в каталоге www/ и введите следующие строки кодов в нем.

Базовый HTML-документ

Hello World

это сообщение

это другое сообщение

заголовок 2

Lorem ipsum dolor sit amet conctetur, adipisicing elit. Quibusdam
eligendi doloribus sapiente, molestias quos quae non nam incidunt quis delectus
facilis magni officiis alias neque atque fuga? Unde, aut natus?

это нижний колонтитул

Как только вы закончите, сохраните web03.html и загрузите его в свой веб-браузер.

Допустим, вы хотите выбрать все элементы div с именем class container1 . Чтобы сделать это, вы можете использовать селектор XPath

Как видите, у меня есть 2 элемента, которые совпадают селектор XPath

Чтобы выбрать первый элемент div с именем class , container1 добавьте [1] в конец выбора XPath, как показано на снимке экрана ниже.

Таким же образом вы можете выбрать второй элемент div с помощью класса назовите container1 с помощью селектора XPath

Вы также можете выбирать элементы по id .

Например, чтобы выбрать элемент с id footer-msg , вы можете использовать е селектор XPath //* [@ ид = ‘сноска-сообщ’]

Здесь * перед [@ id = ‘footer-msg’] используется для выбора любого элемента независимо от его тега.

Это основы селектора XPath. Теперь у вас должна быть возможность создать собственный селектор XPath для ваших проектов Selenium..

Заключение:

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

Оцените статью
nanomode.ru
Добавить комментарий