Използване на XPath и Selenium за намиране на елемент в HTML страница

Using Xpath Selenium Find An Element Html Page



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 Driver или Chrome Web Driver.

За да изпълните изискванията 4, 5 и 6, прочетете моята статия Въведение в селена в Python 3 . Можете да намерите много статии по другите теми LinuxHint.com . Не забравяйте да ги проверите, ако имате нужда от помощ.





Настройване на директория на проекта:

За да поддържате всичко организирано, създайте нова директория на проекта selenium-xpath/ както следва:

$mkdir -пвselenium-xpath/шофьори



Придвижете се до selenium-xpath/ директория на проекта, както следва:

$CDselenium-xpath/

Създайте виртуална среда на Python в директорията на проекта, както следва:

$virtualenv .venv

Активирайте виртуалната среда, както следва:

$източник.venv/съм/активирате

Инсталирайте библиотеката на Selenium Python, използвайки PIP3, както следва:

$ pip3 инсталирайте селен

Изтеглете и инсталирайте всички необходими уеб драйвери в шофьори/ директория на проекта. Обясних процеса на изтегляне и инсталиране на уеб драйвери в моята статия Въведение в селена в Python 3 .

Вземете XPath Selector с помощта на Chrome Developer Tool:

В този раздел ще ви покажа как да намерите XPath селектора на елемента на уеб страницата, който искате да изберете със Selenium, като използвате вградения инструмент за програмисти на уеб браузъра Google Chrome.

За да получите селектора XPath с помощта на уеб браузъра Google Chrome, отворете Google Chrome и посетете уеб сайта, от който искате да извлечете данни. След това натиснете десния бутон на мишката (RMB) върху празно място на страницата и щракнете върху Проверете за да отворите Инструмент за програмисти на Chrome .

Можете също да натиснете + Преместване + Аз за да отворите Инструмент за програмисти на Chrome .

Инструмент за програмисти на Chrome трябва да се отвори.

За да намерите HTML представяне на желания от вас елемент на уеб страница, щракнете върху Проверете (

), както е отбелязано на екрана по -долу.

След това задръжте курсора на мишката върху желания елемент от уеб страница и натиснете левия бутон на мишката (LMB), за да го изберете.

HTML представянето на избрания от вас уеб елемент ще бъде подчертано в Елементи раздел на Инструмент за програмисти на Chrome, както можете да видите на екрана по -долу.

За да получите XPath селектора на желания от вас елемент, изберете елемента от Елементи раздел на Инструмент за програмисти на Chrome и щракнете с десния бутон върху него (RMB). След това изберете копие > Копирайте XPath, както е отбелязано на екрана по -долу.

Поставих селектора XPath в текстов редактор. Селекторът XPath изглежда, както е показано на екрана по -долу.

Вземете XPath Selector с помощта на Firefox Developer Tool:

В този раздел ще ви покажа как да намерите XPath селектора на елемента на уеб страницата, който искате да изберете със Selenium, като използвате вградения инструмент за разработчици на уеб браузъра Mozilla Firefox.

За да получите селектора XPath с помощта на уеб браузъра Firefox, отворете Firefox и посетете уеб сайта, от който искате да извлечете данни. След това натиснете десния бутон на мишката (RMB) върху празно място на страницата и щракнете върху Проверка на елемента (Q) за да отворите Инструмент за разработчици на Firefox .

Инструмент за разработчици на Firefox трябва да се отвори.

За да намерите HTML представяне на желания от вас елемент на уеб страница, щракнете върху Проверете (

), както е отбелязано на екрана по -долу.

След това задръжте курсора на мишката върху желания елемент от уеб страница и натиснете левия бутон на мишката (LMB), за да го изберете.

HTML представянето на избрания от вас уеб елемент ще бъде подчертано в Инспектор раздел на Инструмент за разработчици на Firefox, както можете да видите на екрана по -долу.

За да получите XPath селектора на желания от вас елемент, изберете елемента от Инспектор раздел на Инструмент за разработчици на Firefox и щракнете с десния бутон върху него (RMB). След това изберете копие > XPath както е отбелязано на екрана по -долу.

Селекторът XPath на желания от вас елемент трябва да изглежда така.

Извличане на данни от уеб страници с помощта на XPath Selector:

В този раздел ще ви покажа как да избирате елементи на уеб страници и да извличате данни от тях с помощта на селектори XPath с библиотеката Selenium Python.

Първо, създайте нов скрипт на Python ex01.py и въведете следните редове кодове.

отселенвносуеб драйвер
отселен.уеб драйвер.често срещани.ключове вносКлючове
отселен.уеб драйвер.често срещани.от вносОт
настроики=уеб драйвер.Опции за Chrome()
настроики.без глава = Вярно
браузър=уеб драйвер.Chrome(executable_path='./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.py

Както можете да видите, данните за времевата отметка се отпечатват на екрана.

Тук съм използвал 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.py

The browser.find_element_by_xpath () и browser.find_element () се използват методи за намиране и избор на отделен елемент от уеб страници. Ако искате да намерите и изберете множество елементи с помощта на XPath селектори, тогава трябва да използвате browser.find_elements_by_xpath () или browser.find_elements () методи.

The browser.find_elements_by_xpath () метод приема същия аргумент като browser.find_element_by_xpath () метод.

The 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 и въведете следните редове кодове в него.

отселенвносуеб драйвер
отселен.уеб драйвер.често срещани.ключове вносКлючове
отселен.уеб драйвер.често срещани.от вносОт
настроики=уеб драйвер.Опции за Chrome()
настроики.без глава = Вярно
браузър=уеб драйвер.Chrome(executable_path='./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 а за цикъл се използва за повторение през имена списък и отпечатайте имената на конзолата.

Ред 16 затваря браузъра.

Стартирайте скрипта на Python ex03.py както следва:

$ python3 ex03.py

Както можете да видите, имената се извличат от уеб страницата и се отпечатват на конзолата.

Вместо да използвате browser.find_elements_by_xpath () метод, можете също да използвате browser.find_elements () метод както преди. Първият аргумент на този метод е От.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 -vwww

Създайте нов файл web01.html в www/ директория и въведете следните редове в този файл.


< html lang='На'>
< глава >
< мета charset=„UTF-8“>
< мета име='изглед' съдържание='width = device-width, initial-scale = 1.0'>
< заглавие >Основен HTML документ</ заглавие >
</ глава >
< тяло >
< h1 >Здравей свят</ h1 >
</ тяло >
</ html >

След като приключите, запазете web01.html файл.

Изпълнете прост HTTP сървър на порт 8080, като използвате следната команда:

$ python3 -m http.сървър--директория www/8080

HTTP сървърът трябва да стартира.

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

Докато се отваря Инструментът за разработчици на Firefox или Chrome, натиснете + F за да отворите полето за търсене. Можете да въведете вашия XPath селектор тук и да видите какво избира много лесно. Ще използвам този инструмент в целия този раздел.

Селекторът XPath започва с a наклонена черта напред (/) през повечето време. Това е като дърво на директории на Linux. The / е коренът на всички елементи на уеб страницата.

Първият елемент е html . И така, селекторът XPath /html избира цялото html етикет.

Вътре в html таг, имаме a тяло етикет. The тяло таг може да бъде избран с селектора XPath /html/body

The h1 заглавката е вътре в тяло етикет. The h1 заглавката може да бъде избрана с селектора XPath /html/body/h1

Този тип селектор на XPath се нарича абсолютен селектор на път. В абсолютния селектор на пътя трябва да преминете през уеб страницата от корена (/) на страницата. Недостатъкът на абсолютния селектор на пътища е, че дори и малка промяна в структурата на уеб страницата може да направи вашия XPath селектор невалиден. Решението на този проблем е относителен или частичен XPath селектор.

За да видите как работи относителният път или частичният път, създайте нов файл web02.html в www/ директория и въведете следните редове кодове в нея.


< html lang='На'>
< глава >
< мета charset=„UTF-8“>
< мета име='изглед' съдържание='width = device-width, initial-scale = 1.0'>
< заглавие >Основен HTML документ</ заглавие >
</ глава >
< тяло >
< h1 >Здравей свят</ h1 >

< div >
< стр >това е съобщение</ стр >
</ div >

< div >
< педя >Здравей свят</ педя >
</ div >
</ тяло >
</ html >

След като приключите, запазете web02.html файл и го зареди във вашия уеб браузър.

Както можете да видите, селекторът XPath // div/p избира стр маркер вътре в div етикет. Това е пример за относителен селектор на XPath.

Относителният селектор на XPath започва с // . След това посочвате структурата на елемента, който искате да изберете. В такъв случай, div/p .

Така, // div/p означава изберете стр елемент вътре в a div елемент, няма значение какво идва преди него.

Можете също така да избирате елементи по различни атрибути като документ за самоличност , клас , Тип, и т.н. с помощта на XPath селектор. Нека да видим как да направим това.

Създайте нов файл web03.html в www/ директория и въведете следните редове кодове в нея.


< html lang='На'>
< глава >
< мета charset=„UTF-8“>
< мета име='изглед' съдържание='width = device-width, initial-scale = 1.0'>
< заглавие > Основен HTML документ</ заглавие >
</ глава >
< тяло >
< h1 > Здравей свят</ h1 >
< div клас='container1'>
< стр > това е съобщение</ стр >
< педя > това е друго съобщение</ педя >
</ div >
< div клас='container1'>
< h2 > заглавие2</ h2 >
< стр > Някой хора
разумно е да избереш болките, неприятностите, тези, които не попадат на избрания
лесни полети или други страхотни услуги? Откъде или откъде е роден?</ стр >
</ div >

< педя документ за самоличност='footer-msg'> това е долен колонтитул</ педя >
</долен колонтитул>
</ тяло >
</ html >

След като приключите, запазете web03.html файл и го зареди във вашия уеб браузър.

Да предположим, че искате да изберете всички div елементи, които имат клас име контейнер 1 . За да направите това, можете да използвате селектора XPath // div [@class = ’container1 ′]

Както можете да видите, имам 2 елемента, които съответстват на селектора XPath // div [@class = ’container1 ′]

За да изберете първия div елемент с клас име контейнер 1 , добавете [1] в края на XPath изберете, както е показано на екрана по -долу.

По същия начин можете да изберете втория div елемент с клас име контейнер 1 използвайки селектора XPath // div [@class = ’container1 ′] [2]

Можете да изберете елементи по документ за самоличност също така.

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

Тук, * преди [@id = ’footer-msg’] се използва за избор на всеки елемент, независимо от техния маркер.

Това са основите на селектора на XPath. Сега трябва да можете да създадете свой собствен XPath селектор за вашите проекти на Selenium.

Заключение:

В тази статия ви показах как да намирате и избирате елементи от уеб страници с помощта на селектора XPath с библиотеката Selenium Python. Обсъдих и най -често срещаните селектори за XPath. След като прочетете тази статия, трябва да се чувствате доста уверено, като избирате елементи от уеб страници, използвайки селектора XPath с библиотеката Selenium Python.