Localizarea și selectarea elementelor din pagina web este cheia pentru răzuirea web cu Selenium. Pentru localizarea și selectarea elementelor din pagina web, puteți utiliza selectoare XPath în Selenium.
În acest articol, vă voi arăta cum să localizați și să selectați elemente din pagini web folosind selectoarele XPath din Selenium cu biblioteca Python Selenium. Deci sa începem.
Condiții preliminare:
Pentru a încerca comenzile și exemplele acestui articol, trebuie să aveți,
- O distribuție Linux (de preferință Ubuntu) instalată pe computer.
- Python 3 instalat pe computer.
- PIP 3 instalat pe computer.
- Piton virtualenv pachetul instalat pe computer.
- Browsere web Mozilla Firefox sau Google Chrome instalate pe computer.
- Trebuie să știți cum să instalați driverul Firefox Gecko sau driverul web Chrome.
Pentru îndeplinirea cerințelor 4, 5 și 6, citiți articolul meu Introducere în Seleniu în Python 3 . Puteți găsi multe articole despre celelalte subiecte de pe LinuxHint.com . Asigurați-vă că le verificați dacă aveți nevoie de asistență.
Configurarea unui director de proiect:
Pentru a menține totul organizat, creați un nou director de proiect seleniu-xpath / după cum urmează:
$mkdir -pvseleniu-xpath/șoferii 
Navigați la seleniu-xpath / directorul proiectului după cum urmează:
$CDseleniu-xpath/ 
Creați un mediu virtual Python în directorul proiectului după cum urmează:
$virtualenv .venv 
Activați mediul virtual după cum urmează:
$sursă.venv/a.m/Activati 
Instalați biblioteca Selenium Python utilizând PIP3 după cum urmează:
$ pip3 instalează seleniu 
Descărcați și instalați toate driverele web necesare în drivere / directorul proiectului. Am explicat procesul de descărcare și instalare a driverelor web în articolul meu Introducere în Seleniu în Python 3 .
Obțineți XPath Selector folosind Instrumentul pentru dezvoltatori Chrome:
În această secțiune, vă voi arăta cum să găsiți selectorul XPath al elementului de pagină web pe care doriți să îl selectați cu Selenium folosind Instrumentul de dezvoltator încorporat al browserului web Google Chrome.
Pentru a obține selectorul XPath utilizând browserul web Google Chrome, deschideți Google Chrome și vizitați site-ul web din care doriți să extrageți date. Apoi, apăsați butonul din dreapta al mouse-ului (RMB) pe o zonă goală a paginii și faceți clic pe Inspecta pentru a deschide Instrumentul pentru dezvoltatori Chrome .
De asemenea, puteți apăsa + Schimb + Eu pentru a deschide Instrumentul pentru dezvoltatori Chrome .
Instrumentul pentru dezvoltatori Chrome ar trebui să fie deschis.
Pentru a găsi reprezentarea HTML a elementului de pagină web dorit, faceți clic pe Inspecta (
), așa cum este marcată în captura de ecran de mai jos.
Apoi, treceți cu mouse-ul peste elementul de pagină web dorit și apăsați butonul stâng al mouse-ului (LMB) pentru al selecta.
Reprezentarea HTML a elementului web pe care l-ați selectat va fi evidențiată în Elemente fila din Instrumentul pentru dezvoltatori Chrome, după cum puteți vedea în captura de ecran de mai jos.
Pentru a obține selectorul XPath al elementului dorit, selectați elementul din Elemente fila din Instrumentul pentru dezvoltatori Chrome și faceți clic dreapta (RMB) pe el. Apoi, selectați Copie > Copiați XPath, așa cum este marcat în captura de ecran de mai jos.
Am lipit selectorul XPath într-un editor de text. Selectorul XPath arată așa cum se arată în captura de ecran de mai jos.
Obțineți XPath Selector folosind Instrumentul pentru dezvoltatori Firefox:
În această secțiune, vă voi arăta cum să găsiți selectorul XPath al elementului de pagină web pe care doriți să îl selectați cu Selenium folosind Instrumentul de dezvoltator încorporat al browserului web Mozilla Firefox.
Pentru a obține selectorul XPath utilizând browserul web Firefox, deschideți Firefox și vizitați site-ul web din care doriți să extrageți date. Apoi, apăsați butonul din dreapta al mouse-ului (RMB) pe o zonă goală a paginii și faceți clic pe Inspectați elementul (Q) pentru a deschide Instrumentul pentru dezvoltatori Firefox .
Instrumentul pentru dezvoltatori Firefox ar trebui să fie deschis.
Pentru a găsi reprezentarea HTML a elementului de pagină web dorit, faceți clic pe Inspecta (
), așa cum este marcată în captura de ecran de mai jos.
Apoi, treceți cu mouse-ul peste elementul de pagină web dorit și apăsați butonul stâng al mouse-ului (LMB) pentru al selecta.
Reprezentarea HTML a elementului web pe care l-ați selectat va fi evidențiată în Inspector fila din Instrumentul pentru dezvoltatori Firefox, după cum puteți vedea în captura de ecran de mai jos.
Pentru a obține selectorul XPath al elementului dorit, selectați elementul din Inspector fila din Instrumentul pentru dezvoltatori Firefox și faceți clic dreapta (RMB) pe el. Apoi, selectați Copie > XPath așa cum este marcat în captura de ecran de mai jos.
Selectorul XPath al elementului dorit ar trebui să arate cam așa.
Extragerea datelor din paginile web folosind XPath Selector:
În această secțiune, vă voi arăta cum să selectați elemente de pagină web și să extrageți date din acestea folosind selectoare XPath cu biblioteca Selenium Python.
Mai întâi, creați un nou script Python ex01.py și introduceți următoarele linii de coduri.
dinseleniuimportwebdriverdinseleniu.webdriver.uzual.chei importTaste
dinseleniu.webdriver.uzual.de importDe
Opțiuni=webdriver.Opțiuni Chrome()
Opțiuni.fără cap = Adevărat
browser=webdriver.Crom(calea_executabilă=„./drivers/chromedriver”,
Opțiuni=Opțiuni)
browser.obține(„https://www.unixtimestamp.com/”)
timestamp-ul=browser.find_element_by_xpath('/ html / body / div [1] / div [1]
/ div [2] / div [1] / div / div / h3 [2] ')
imprimare(„Marcaj de timp curent:% s”%(timestamp-ul.text.Despică('')[0]))
browser.închide()
După ce ați terminat, salvați ex01.py Script Python.
Linia 1-3 importă toate componentele de seleniu necesare.
Linia 5 creează un obiect Opțiuni Chrome, iar linia 6 activează modul fără cap pentru browserul web Chrome.
Linia 8 creează un Chrome browser obiect folosind râu cromat binar din drivere / directorul proiectului.
Linia 10 spune browserului să încarce site-ul web unixtimestamp.com.
Linia 12 găsește elementul care are datele de marcare a timpului din pagină folosind selectorul XPath și îl stochează în timestamp-ul variabil.
Linia 13 analizează datele de timestamp din element și le imprimă pe consolă.
Am copiat selectorul XPath al marcajului h2 element din unixtimestamp.com folosind Instrumentul pentru dezvoltatori Chrome.
Linia 14 închide browserul.
Rulați scriptul Python ex01.py după cum urmează:
$ python3 ex01.py 
După cum puteți vedea, datele marcajului de timp sunt imprimate pe ecran.
Aici, am folosit browser.find_element_by_xpath (selector) metodă. Singurul parametru al acestei metode este selector, care este selectorul XPath al elementului.
In loc de browser.find_element_by_xpath () metoda, puteți utiliza, de asemenea browser.find_element (De, selector) metodă. Această metodă are nevoie de doi parametri. Primul parametru De va fi De.XPATH deoarece vom folosi selectorul XPath și al doilea parametru selector va fi selectorul XPath în sine. Rezultatul va fi același.
Pentru a vedea cum browser.find_element () metoda funcționează pentru selectorul XPath, creați un nou script Python ex02.py , copiați și lipiți toate liniile din ex01.py la ex02.py și schimbare linia 12 așa cum este marcat în captura de ecran de mai jos.
După cum puteți vedea, scriptul Python ex02.py dă același rezultat ca ex01.py .
$ python3 ex02.py 
The browser.find_element_by_xpath () și browser.find_element () sunt folosite metode pentru a găsi și selecta un singur element din paginile web. Dacă doriți să găsiți și să selectați mai multe elemente folosind selectoare XPath, atunci trebuie să utilizați browser.find_elements_by_xpath () sau browser.find_elements () metode.
The browser.find_elements_by_xpath () metoda are același argument ca și browser.find_element_by_xpath () metodă.
The browser.find_elements () metoda ia aceleași argumente ca browser.find_element () metodă.
Să vedem un exemplu de extragere a unei liste de nume folosind selectorul XPath din random-name-generator.info cu biblioteca Selenium Python.
Lista neordonată ( a muri tag) are un 10 la etichete din fiecare conținând un nume aleatoriu. XPath pentru a selecta toate la etichete în interiorul a muri eticheta în acest caz este // * [@ id = main] / div [3] / div [2] / ol // li
Să parcurgem un exemplu de selectare a mai multor elemente din pagina web folosind selectoare XPath.
Creați un nou script Python ex03.py și introduceți următoarele linii de coduri în el.
dinseleniuimportwebdriverdinseleniu.webdriver.uzual.chei importTaste
dinseleniu.webdriver.uzual.de importDe
Opțiuni=webdriver.Opțiuni Chrome()
Opțiuni.fără cap = Adevărat
browser=webdriver.Crom(calea_executabilă=„./drivers/chromedriver”,
Opțiuni=Opțiuni)
browser.obține(„http://random-name-generator.info/”)
nume=browser.find_elements_by_xpath('
// * [@ id = 'main'] / div [3] / div [2] / ol // li ')
pentruNumeînnume:
imprimare(Nume.text)
browser.închide()
După ce ați terminat, salvați ex03.py Script Python.
Linia 1-8 este aceeași ca în ex01.py Script Python. Deci, nu o să le explic din nou aici.
Linia 10 spune browserului să încarce site-ul random-name-generator.info.
Linia 12 selectează lista de nume folosind browser.find_elements_by_xpath () metodă. Această metodă utilizează selectorul XPath // * [@ id = main] / div [3] / div [2] / ol // li pentru a găsi lista de nume. Apoi, lista de nume este stocată în nume variabil.
În rândurile 13 și 14, a pentru bucla este utilizată pentru a itera prin nume listați și tipăriți numele pe consolă.
Linia 16 închide browserul.
Rulați scriptul Python ex03.py după cum urmează:
$ python3 ex03.py 
După cum puteți vedea, numele sunt extrase din pagina web și tipărite pe consolă.
În loc să utilizați browser.find_elements_by_xpath () metoda, puteți utiliza, de asemenea, browser.find_elements () metoda ca înainte. Primul argument al acestei metode este De.XPATH, iar al doilea argument este selectorul XPath.
Pentru a experimenta browser.find_elements () , creați un nou script Python ex04.py , copiați toate codurile din ex03.py la ex04.py și schimbați linia 12 așa cum este marcat în captura de ecran de mai jos.
Ar trebui să obțineți același rezultat ca înainte.
$ python3 ex04.py 
Noțiuni de bază ale XPath Selector:
Instrumentul pentru dezvoltatori al browserului web Firefox sau Google Chrome generează automat selectorul XPath. Dar aceste selectoare XPath nu sunt uneori suficiente pentru proiectul dvs. În acest caz, trebuie să știți ce face un anumit selector XPath pentru a construi selectorul XPath. În această secțiune, vă voi arăta elementele de bază ale selectorilor XPath. Apoi, ar trebui să puteți construi propriul selector XPath.
Creați un director nou www / în directorul de proiect, după cum urmează:
$mkdir -vwww 
Creați un fișier nou web01.html în www / director și introduceți următoarele linii în acel fișier.
< html lang='pe'>
< cap >
< meta set de caractere=„UTF-8”>
< meta Nume=„vizualizare” conţinut=„lățime = lățime dispozitiv, scară inițială = 1,0”>
< titlu >Document HTML de bază</ titlu >
</ cap >
< corp >
< h1 >Salut Lume</ h1 >
</ corp >
</ html >
După ce ați terminat, salvați web01.html fişier.
Rulați un server HTTP simplu pe portul 8080 folosind următoarea comandă:
$ python3 -m http.Server--director www /8080 
Ar trebui să pornească serverul HTTP.
Ar trebui să puteți accesa fișierul web01.html fișier utilizând adresa URL http: // localhost: 8080 / web01.html , după cum puteți vedea în captura de ecran de mai jos.
În timp ce Firefox sau Chrome Developer Tool sunt deschise, apăsați + F pentru a deschide caseta de căutare. Puteți introduce aici selectorul XPath și puteți vedea ce selectează foarte ușor. Voi folosi acest instrument în toată această secțiune.
Un selector XPath începe cu un slash înainte (/) de cele mai multe ori. Este ca un arbore de directoare Linux. The / este rădăcina tuturor elementelor de pe pagina web.
Primul element este html . Deci, selectorul XPath / html selectează întregul html etichetă.
În interiorul html tag, avem un corp etichetă. The corp eticheta poate fi selectată cu selectorul XPath / html / body
The h1 antetul se află în interiorul corp etichetă. The h1 antetul poate fi selectat cu selectorul XPath / html / body / h1
Acest tip de selector XPath se numește selector de cale absolut. În selectorul de cale absolut, trebuie să parcurgeți pagina web din rădăcina (/) paginii. Dezavantajul unui selector de cale absolut este că chiar și o ușoară modificare a structurii paginii web poate face ca selectorul dvs. XPath să fie invalid. Soluția la această problemă este un selector XPath relativ sau parțial.
Pentru a vedea cum funcționează calea relativă sau calea parțială, creați un fișier nou web02.html în www / director și introduceți următoarele linii de coduri în el.
< html lang='pe'>
< cap >
< meta set de caractere=„UTF-8”>
< meta Nume=„vizualizare” conţinut=„lățime = lățime dispozitiv, scară inițială = 1,0”>
< titlu >Document HTML de bază</ titlu >
</ cap >
< corp >
< h1 >Salut Lume</ h1 >
< div >
< p >acesta este mesajul</ p >
</ div >
< div >
< span >Salut Lume</ span >
</ div >
</ corp >
</ html >
După ce ați terminat, salvați web02.html fișierul și încărcați-l în browserul dvs. web.
După cum puteți vedea, selectorul XPath // div / p selectează p eticheta în interiorul div etichetă. Acesta este un exemplu de selector relativ XPath.
Selectorul relativ XPath începe cu // . Apoi specificați structura elementului pe care doriți să îl selectați. În acest caz, div / p .
Asa de, // div / p înseamnă selectați p element din interiorul unui div element, nu contează ce vine înainte de el.
De asemenea, puteți selecta elemente după diferite atribute, cum ar fi id , clasă , tip, etc. folosind selectorul XPath. Să vedem cum să facem asta.
Creați un fișier nou web03.html în www / director și introduceți următoarele linii de coduri în el.
< html lang='pe'>
< cap >
< meta set de caractere=„UTF-8”>
< meta Nume=„vizualizare” conţinut=„lățime = lățime dispozitiv, scară inițială = 1,0”>
< titlu > Document HTML de bază</ titlu >
</ cap >
< corp >
< h1 > Hello World</ h1 >
< div clasă=„container1”>
< p > acesta este mesaj</ p >
< span > acesta este un alt mesaj</ span >
</ div >
< div clasă=„container1”>
< h2 > titlu2</ h2 >
< p > Unii oameni
înțelept să alegi durerile, necazurile, cele care nu se încadrează în cel ales
zboruri ușoare sau alte servicii excelente? De unde sau de unde s-a născut?</ p >
</ div >
< span id=„footer-msg”> acesta este un subsol</ span >
</subsol>
</ corp >
</ html >
După ce ați terminat, salvați web03.html fișierul și încărcați-l în browserul dvs. web.
Să presupunem că doriți să selectați toate div elemente care au clasă Nume container1 . Pentru a face acest lucru, puteți utiliza selectorul XPath // div [@ class = ’container1 ′]
După cum puteți vedea, am 2 elemente care se potrivesc cu selectorul XPath // div [@ class = ’container1 ′]
Pentru a selecta primul div element cu clasă Nume container1 , adăuga [1] la sfârșitul XPath selectați, așa cum se arată în captura de ecran de mai jos.
În același mod, puteți selecta al doilea div element cu clasă Nume container1 folosind selectorul XPath // div [@ class = ’container1 ′] [2]
Puteți selecta elemente după id de asemenea.
De exemplu, pentru a selecta elementul care are id de footer-msg , puteți utiliza selectorul XPath // * [@ id = ’footer-msg’]
Aici * inainte de [@ id = ’footer-msg’] este folosit pentru a selecta orice element indiferent de eticheta lor.
Acesta este elementul de bază al selectorului XPath. Acum, ar trebui să puteți crea propriul selector XPath pentru proiectele dvs. Selenium.
Concluzie:
În acest articol, v-am arătat cum să găsiți și să selectați elemente din pagini web folosind selectorul XPath cu biblioteca Selenium Python. De asemenea, am discutat despre cele mai comune selectoare XPath. După ce ați citit acest articol, ar trebui să vă simțiți destul de încrezători selectând elemente din paginile web folosind selectorul XPath cu biblioteca Selenium Python.