Brug af XPath og Selenium til at finde et element i HTML -side

Using Xpath Selenium Find An Element Html Page



XPath, også kendt som XML Path Language, er et sprog til valg af elementer fra et XML -dokument. Da HTML og XML følger den samme dokumentstruktur, kan XPath også bruges til at vælge elementer fra en webside.

Lokalisering og valg af elementer fra websiden er nøglen til webskrabning med Selenium. Til lokalisering og valg af elementer fra websiden kan du bruge XPath -vælgere i Selenium.







I denne artikel vil jeg vise dig, hvordan du finder og vælger elementer fra websider ved hjælp af XPath -vælgere i Selenium med Selenium python -biblioteket. Så lad os komme i gang.



Forudsætninger:

For at prøve kommandoerne og eksemplerne på denne artikel skal du have,



  1. En Linux -distribution (helst Ubuntu) installeret på din computer.
  2. Python 3 installeret på din computer.
  3. PIP 3 installeret på din computer.
  4. Python virtualenv pakke installeret på din computer.
  5. Mozilla Firefox eller Google Chrome webbrowsere installeret på din computer.
  6. Skal vide, hvordan du installerer Firefox Gecko Driver eller Chrome Web Driver.

Læs min artikel for at opfylde kravene 4, 5 og 6 Introduktion til selen i Python 3 . Du kan finde mange artikler om de andre emner om LinuxHint.com . Sørg for at tjekke dem ud, hvis du har brug for hjælp.





Opsætning af et projektmappe:

For at holde alt organiseret skal du oprette et nyt projektmappe selen-xpath/ som følger:

$mkdir -pvselen-xpath/chauffører



Naviger til selen-xpath/ projektmappe som følger:

$CDselen-xpath/

Opret et virtuelt Python -miljø i projektmappen som følger:

$virtualenv .venv

Aktiver det virtuelle miljø som følger:

$kilde.venv/er/aktivere

Installer Selenium Python -bibliotek ved hjælp af PIP3 som følger:

$ pip3 installer selen

Download og installer alle de nødvendige webdrivere i chauffører/ bibliotek over projektet. Jeg har forklaret processen med at downloade og installere webdrivere i min artikel Introduktion til selen i Python 3 .

Hent XPath Selector ved hjælp af Chrome Developer Tool:

I dette afsnit vil jeg vise dig, hvordan du finder XPath-vælgeren for det websideelement, du vil vælge med Selenium ved hjælp af det indbyggede udviklerværktøj i Google Chrome-webbrowseren.

For at få XPath -vælgeren ved hjælp af Google Chrome -webbrowseren skal du åbne Google Chrome og besøge det websted, hvorfra du vil udtrække data. Tryk derefter på højre museknap (RMB) på et tomt område på siden, og klik på Inspicere for at åbne Chrome udviklerværktøj .

Du kan også trykke på + Flytte + jeg for at åbne Chrome udviklerværktøj .

Chrome udviklerværktøj skal åbnes.

Hvis du vil finde HTML -repræsentationen for det ønskede websideelement, skal du klikke på Inspicere (

) ikon, som markeret på skærmbilledet herunder.

Hold derefter musen over det ønskede websideelement, og tryk på venstre museknap (LMB) for at vælge det.

HTML -repræsentationen af ​​det webelement, du har valgt, fremhæves i Elementer fanen på Chrome Developer Tool, som du kan se på skærmbilledet herunder.

For at få XPath -vælgeren til det ønskede element skal du vælge elementet fra Elementer fane af Chrome udviklerværktøj og højreklik (RMB) på den. Vælg derefter Kopi > Kopier XPath, som markeret på skærmbilledet herunder.

Jeg har indsat XPath -vælgeren i et tekstredigeringsprogram. XPath -vælgeren ser ud som vist på skærmbilledet herunder.

Hent XPath Selector ved hjælp af Firefox Developer Tool:

I dette afsnit vil jeg vise dig, hvordan du finder XPath-vælgeren for det websideelement, du vil vælge med Selenium ved hjælp af det indbyggede udviklerværktøj i Mozilla Firefox-webbrowseren.

For at hente XPath -vælgeren ved hjælp af Firefox -webbrowseren skal du åbne Firefox og besøge det websted, hvorfra du vil udtrække data. Tryk derefter på højre museknap (RMB) på et tomt område på siden, og klik på Undersøg element (Q) for at åbne Firefox udviklerværktøj .

Firefox udviklerværktøj skal åbnes.

Hvis du vil finde HTML -repræsentationen for det ønskede websideelement, skal du klikke på Inspicere (

) ikon, som markeret på skærmbilledet herunder.

Hold derefter musen over det ønskede websideelement, og tryk på venstre museknap (LMB) for at vælge det.

HTML -repræsentationen af ​​det webelement, du har valgt, fremhæves i Inspektør fane af Firefox udviklerværktøj, som du kan se på skærmbilledet herunder.

For at få XPath -vælgeren til det ønskede element skal du vælge elementet fra Inspektør fane af Firefox udviklerværktøj og højreklik (RMB) på den. Vælg derefter Kopi > XPath som markeret på skærmbilledet herunder.

XPath -vælgeren for dit ønskede element skal se sådan ud.

Udtrækning af data fra websider ved hjælp af XPath Selector:

I dette afsnit vil jeg vise dig, hvordan du vælger websideelementer og udtrækker data fra dem ved hjælp af XPath -vælgere med Selenium Python -biblioteket.

Opret først et nyt Python -script ex01.py og indtast følgende kodelinjer.

fraselenimporterewebdriver
fraselen.webdriver.almindelige.nøgler importereNøgler
fraselen.webdriver.almindelige.ved importereVed
muligheder=webdriver.ChromeOptions()
muligheder.hovedløs = Sand
browser=webdriver.Chrome(eksekverbar_sti='./drivers/chromedriver',
muligheder=muligheder)
browser.('https://www.unixtimestamp.com/')
tidsstempel=browser.find_element_by_xpath('/html/body/div [1]/div [1]
/div [2]/div [1]/div/div/h3 [2] '
)
Print('Aktuelt tidsstempel: %s'%(tidsstempel.tekst.dele('')[0]))
browser.tæt()

Når du er færdig, skal du gemme ex01.py Python script.

Linje 1-3 importerer alle de nødvendige selenkomponenter.

Linje 5 opretter et Chrome Options -objekt, og linje 6 muliggør hovedløs tilstand til Chrome -webbrowseren.

Linje 8 opretter en Chrome browser objekt ved hjælp af chromedriver binært fra chauffører/ bibliotek over projektet.

Linje 10 fortæller browseren at indlæse webstedet unixtimestamp.com.

Linje 12 finder det element, der har tidsstempeldataene fra siden ved hjælp af XPath -vælgeren og gemmer det i tidsstempel variabel.

Linje 13 analyserer tidsstempeldataene fra elementet og udskriver det på konsollen.

Jeg har kopieret XPath -vælgeren til det markerede h2 element fra unixtimestamp.com ved hjælp af Chrome Developer Tool.

Linje 14 lukker browseren.

Kør Python -scriptet ex01.py som følger:

$ python3 ex01.py

Som du kan se, udskrives tidsstempeldataene på skærmen.

Her har jeg brugt browser.find_element_by_xpath (vælger) metode. Den eneste parameter for denne metode er vælger, som er elementet XPath -vælger.

I stedet for browser.find_element_by_xpath () metode, kan du også bruge browser.find_element (Efter, vælger) metode. Denne metode kræver to parametre. Den første parameter Ved vil være Af.XPATH da vi vil bruge XPath -vælgeren og den anden parameter vælger vil være selve XPath -vælgeren. Resultatet bliver det samme.

For at se hvordan browser.find_element () metode fungerer til XPath -vælger, opret et nyt Python -script ex02.py , kopier og indsæt alle linjerne fra ex01.py til ex02.py og ændre linje 12 som markeret på skærmbilledet herunder.

Som du kan se, Python -scriptet ex02.py giver det samme resultat som ex01.py .

$ python3 ex02.py

Det browser.find_element_by_xpath () og browser.find_element () metoder bruges til at finde og vælge et enkelt element fra websider. Hvis du vil finde og vælge flere elementer ved hjælp af XPath -vælgere, skal du bruge browser.find_elements_by_xpath () eller browser.find_elements () metoder.

Det browser.find_elements_by_xpath () metode tager det samme argument som browser.find_element_by_xpath () metode.

Det browser.find_elements () metode tager de samme argumenter som browser.find_element () metode.

Lad os se et eksempel på at udtrække en liste med navne ved hjælp af XPath -vælger fra random-name-generator.info med Selenium Python -biblioteket.

Den uordnede liste ( tag) har en 10 ved tags inde i hver indeholdende et tilfældigt navn. XPath til at vælge alle ved tags inde i tag i dette tilfælde er //*[@id = main]/div [3]/div [2]/ol // li

Lad os gå igennem et eksempel på at vælge flere elementer fra websiden ved hjælp af XPath -vælgere.

Opret et nyt Python -script ex03.py og indtast følgende kodelinjer i den.

fraselenimporterewebdriver
fraselen.webdriver.almindelige.nøgler importereNøgler
fraselen.webdriver.almindelige.ved importereVed
muligheder=webdriver.ChromeOptions()
muligheder.hovedløs = Sand
browser=webdriver.Chrome(eksekverbar_sti='./drivers/chromedriver',
muligheder=muligheder)
browser.('http://random-name-generator.info/')
navne=browser.find_elements_by_xpath('
//*[@id = 'main']/div [3]/div [2]/ol // li '
)
tilnavninavne:
Print(navn.tekst)
browser.tæt()

Når du er færdig, skal du gemme ex03.py Python script.

Linje 1-8 er den samme som i ex01.py Python script. Så jeg vil ikke forklare dem her igen.

Linje 10 fortæller browseren at indlæse webstedet random-name-generator.info.

Linje 12 vælger navnelisten ved hjælp af browser.find_elements_by_xpath () metode. Denne metode bruger XPath -vælgeren //*[@id = main]/div [3]/div [2]/ol // li for at finde navnelisten. Navnelisten gemmes derefter i navne variabel.

I linje 13 og 14, a til loop bruges til at iterere gennem navne liste og udskrive navnene på konsollen.

Linje 16 lukker browseren.

Kør Python -scriptet ex03.py som følger:

$ python3 ex03.py

Som du kan se, udtrækkes navnene fra websiden og udskrives på konsollen.

I stedet for at bruge browser.find_elements_by_xpath () metode, kan du også bruge browser.find_elements () metode som før. Det første argument for denne metode er Af XPATH, og det andet argument er XPath -vælgeren.

At eksperimentere med browser.find_elements () metode, opret et nyt Python -script ex04.py , kopier alle koderne fra ex03.py til ex04.py , og skift linje 12 som markeret på skærmbilledet herunder.

Du skal få det samme resultat som før.

$ python3 ex04.py

Grundlæggende om XPath Selector:

Developer Tool i Firefox eller Google Chrome webbrowser genererer automatisk XPath -vælger. Men disse XPath -vælgere er undertiden ikke tilstrækkelige til dit projekt. I så fald skal du vide, hvad en bestemt XPath -vælger gør for at bygge din XPath -vælger. I dette afsnit vil jeg vise dig det grundlæggende i XPath -vælgere. Derefter bør du være i stand til at bygge din egen XPath -vælger.

Opret et nyt bibliotek www/ i din projektmappe som følger:

$mkdir -vwww

Opret en ny fil web01.html i www/ bibliotek, og indtast følgende linjer i filen.


< html lang='på'>
< hoved >
< meta tegnsæt='UTF-8'>
< meta navn='viewport' indhold='width = device-width, initial-scale = 1.0'>
< titel >Grundlæggende HTML -dokument</ titel >
</ hoved >
< legeme >
< h1 >Hej Verden</ h1 >
</ legeme >
</ html >

Når du er færdig, skal du gemme web01.html fil.

Kør en simpel HTTP -server på port 8080 ved hjælp af følgende kommando:

$ python3 -m http.server--katalog www/8080

HTTP -serveren skal starte.

Du skal have adgang til web01.html fil ved hjælp af URL'en http: // localhost: 8080/web01.html , som du kan se på skærmbilledet herunder.

Mens Firefox eller Chrome Developer Tool er åbnet, skal du trykke på + F for at åbne søgefeltet. Du kan indtaste din XPath -vælger her og se, hvad den vælger meget let. Jeg vil bruge dette værktøj i hele dette afsnit.

En XPath -vælger starter med en skråstreg (/) det meste af tiden. Det er som et Linux -biblioteketræ. Det / er roden til alle elementer på websiden.

Det første element er html . Så XPath -vælgeren /html vælger det hele html tag.

Inde i html tag, vi har en legeme tag. Det legeme tag kan vælges med XPath -vælgeren /html/body

Det h1 header er inde i legeme tag. Det h1 header kan vælges med XPath -vælgeren /html/body/h1

Denne type XPath -vælger kaldes en absolut sti -vælger. I absolut sti -vælger skal du krydse websiden fra sidens rod (/). Ulempen ved en absolut stavælger er, at selv en lille ændring af websidestrukturen kan gøre din XPath -vælger ugyldig. Løsningen på dette problem er en relativ eller delvis XPath -vælger.

For at se, hvordan relativ sti eller delvis sti fungerer, skal du oprette en ny fil web02.html i www/ bibliotek, og indtast følgende kodelinjer i den.


< html lang='på'>
< hoved >
< meta tegnsæt='UTF-8'>
< meta navn='viewport' indhold='width = device-width, initial-scale = 1.0'>
< titel >Grundlæggende HTML -dokument</ titel >
</ hoved >
< legeme >
< h1 >Hej Verden</ h1 >

< div >
< s >dette er besked</ s >
</ div >

< div >
< spændvidde >Hej Verden</ spændvidde >
</ div >
</ legeme >
</ html >

Når du er færdig, skal du gemme web02.html fil og indlæse den i din webbrowser.

Som du kan se, XPath -vælgeren // div/s vælger s mærke inde i div tag. Dette er et eksempel på en relativ XPath -vælger.

Relativ XPath -vælger starter med // . Derefter angiver du strukturen for det element, du vil vælge. I dette tilfælde, div/s .

Så, // div/s betyder at vælge s element inde i a div element, er ligegyldigt hvad der kommer før det.

Du kan også vælge elementer efter forskellige attributter som f.eks id , klasse , type, osv. ved hjælp af XPath -vælger. Lad os se, hvordan du gør det.

Opret en ny fil web03.html i www/ bibliotek, og indtast følgende kodelinjer i den.


< html lang='på'>
< hoved >
< meta tegnsæt='UTF-8'>
< meta navn='viewport' indhold='width = device-width, initial-scale = 1.0'>
< titel > Grundlæggende HTML -dokument</ titel >
</ hoved >
< legeme >
< h1 > Hej verden</ h1 >
< div klasse='container1'>
< s > det er en besked</ s >
< spændvidde > dette er en anden besked</ spændvidde >
</ div >
< div klasse='container1'>
< h2 > overskrift2</ h2 >
< s > Nogle mennesker
klogt at vælge smerterne, problemer og dem, der ikke falder for den valgte
ikke lette flyrejser og andre gode tjenester? Hvorfra eller hvorfra blev han født?</ s >
</ div >

< spændvidde id='footer-msg'> dette er en sidefod</ spændvidde >
</sidefod>
</ legeme >
</ html >

Når du er færdig, skal du gemme web03.html fil og indlæse den i din webbrowser.

Lad os sige, at du vil vælge alle div elementer, der har klasse navn beholder 1 . For at gøre det kan du bruge XPath -vælgeren // div [@class = ’container1 ′]

Som du kan se, har jeg 2 elementer, der matcher XPath -vælgeren // div [@class = ’container1 ′]

For at vælge den første div element med klasse navn beholder 1 , tilføje [1] i slutningen af ​​XPath vælg, som vist på skærmbilledet herunder.

På samme måde kan du vælge den anden div element med klasse navn beholder 1 ved hjælp af XPath -vælgeren // div [@class = ’container1 ′] [2]

Du kan vælge elementer ved id såvel.

For eksempel at vælge det element, der har id af footer-msg , kan du bruge XPath -vælgeren //*[@id = ’footer-msg’]

Her er * Før [@id = 'footer-msg'] bruges til at vælge ethvert element uanset deres tag.

Det er det grundlæggende i XPath -vælgeren. Nu skulle du være i stand til at oprette din egen XPath -vælger til dine Selenium -projekter.

Konklusion:

I denne artikel har jeg vist dig, hvordan du finder og vælger elementer fra websider ved hjælp af XPath -vælgeren med Selenium Python -biblioteket. Jeg har også diskuteret de mest almindelige XPath -vælgere. Efter at have læst denne artikel, bør du føle dig temmelig sikker på at vælge elementer fra websider ved hjælp af XPath -vælgeren med Selenium Python -biblioteket.