Bruke XPath og Selenium til å finne et element på HTML -siden

Using Xpath Selenium Find An Element Html Page



XPath, også kjent som XML Path Language, er et språk for å velge elementer fra et XML -dokument. Siden HTML og XML følger den samme dokumentstrukturen, kan XPath også brukes til å velge elementer fra en webside.

Å finne og velge elementer fra nettsiden er nøkkelen til nettskraping med Selenium. For å finne og velge elementer fra websiden kan du bruke XPath -velgere i Selenium.





I denne artikkelen skal jeg vise deg hvordan du finner og velger elementer fra websider ved hjelp av XPath -velgere i Selenium med Selenium python -biblioteket. Så, la oss komme i gang.



Forutsetninger:

For å prøve kommandoene og eksemplene på denne artikkelen må du ha,



  1. En Linux -distribusjon (helst Ubuntu) installert på datamaskinen din.
  2. Python 3 installert på datamaskinen din.
  3. PIP 3 installert på datamaskinen.
  4. Python virtualenv pakken installert på datamaskinen din.
  5. Mozilla Firefox eller Google Chrome nettlesere installert på datamaskinen din.
  6. Må vite hvordan du installerer Firefox Gecko Driver eller Chrome Web Driver.

For å oppfylle kravene 4, 5 og 6, les artikkelen min Introduksjon til selen i Python 3 . Du kan finne mange artikler om de andre temaene på LinuxHint.com . Husk å sjekke dem hvis du trenger hjelp.





Sette opp en prosjektkatalog:

For å holde alt organisert, opprett en ny prosjektkatalog selen-xpath/ følgende:

$mkdir -pvselen-xpath/sjåfører



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

$CDselen-xpath/

Lag et virtuelt Python -miljø i prosjektkatalogen som følger:

$virtualenv .venv

Aktiver det virtuelle miljøet som følger:

$kilde.venv/er/aktivere

Installer Selenium Python -biblioteket ved hjelp av PIP3 som følger:

$ pip3 installer selen

Last ned og installer all nødvendig webdriver i sjåfører/ katalog over prosjektet. Jeg har forklart prosessen med å laste ned og installere webdrivere i artikkelen min Introduksjon til selen i Python 3 .

Skaff deg XPath Selector med Chrome Developer Tool:

I denne delen skal jeg vise deg hvordan du finner XPath-velgeren til nettsideelementet du vil velge med Selenium ved hjelp av det innebygde utviklerverktøyet i nettleseren Google Chrome.

For å få XPath -velgeren ved hjelp av nettleseren Google Chrome, åpner du Google Chrome og besøker nettstedet du vil trekke ut data fra. Trykk deretter på høyre museknapp (RMB) på et tomt område på siden og klikk på Undersøke å åpne Chrome utviklerverktøy .

Du kan også trykke + Skifte + Jeg å åpne Chrome utviklerverktøy .

Chrome utviklerverktøy bør åpnes.

For å finne HTML -representasjonen for ønsket websideelement, klikk på Undersøke (

) -ikonet, som markert på skjermbildet nedenfor.

Hold deretter musepekeren over ønsket websideelement og trykk på venstre museknapp (LMB) for å velge det.

HTML -representasjonen for webelementet du har valgt vil bli markert i Elementer fanen på Chrome utviklerverktøy, som du kan se på skjermbildet nedenfor.

For å få XPath -velgeren til ønsket element, velg elementet fra Elementer kategorien Chrome utviklerverktøy og høyreklikk (RMB) på den. Velg deretter Kopiere > Kopier XPath, som markert på skjermbildet nedenfor.

Jeg har limt inn XPath -velgeren i et tekstredigeringsprogram. XPath -velgeren ser ut som vist på skjermbildet nedenfor.

Skaff deg XPath Selector med Firefox Developer Tool:

I denne delen skal jeg vise deg hvordan du finner XPath-velgeren til nettsideelementet du vil velge med Selenium ved hjelp av det innebygde utviklerverktøyet i nettleseren Mozilla Firefox.

For å få XPath -velgeren ved hjelp av Firefox -nettleseren, åpner du Firefox og besøker nettstedet du vil trekke ut data fra. Trykk deretter på høyre museknapp (RMB) på et tomt område på siden og klikk på Inspiser element (Q) å åpne Firefox utviklerverktøy .

Firefox utviklerverktøy bør åpnes.

For å finne HTML -representasjonen for ønsket websideelement, klikk på Undersøke (

) -ikonet, som markert på skjermbildet nedenfor.

Hold deretter musepekeren over ønsket websideelement og trykk på venstre museknapp (LMB) for å velge det.

HTML -representasjonen for webelementet du har valgt vil bli markert i Inspektør kategorien Firefox utviklerverktøy, som du kan se på skjermbildet nedenfor.

For å få XPath -velgeren til ønsket element, velg elementet fra Inspektør kategorien Firefox utviklerverktøy og høyreklikk (RMB) på den. Velg deretter Kopiere > XPath som markert på skjermbildet nedenfor.

XPath -velgeren til ønsket element bør se omtrent slik ut.

Pakk ut data fra websider ved hjelp av XPath Selector:

I denne delen skal jeg vise deg hvordan du velger websideelementer og trekker ut data fra dem ved hjelp av XPath -velgere med Selenium Python -biblioteket.

Opprett først et nytt Python -skript ex01.py og skriv inn følgende koderader.

fraselenimportwebdriver
fraselen.webdriver.felles.nøkler importNøkler
fraselen.webdriver.felles.av importAv
alternativer=webdriver.ChromeOptions()
alternativer.hodeløs = ekte
nettleser=webdriver.Chrome(kjørbar_bane='./drivers/chromedriver',
alternativer=alternativer)
nettleser.('https://www.unixtimestamp.com/')
tidsstempel=nettleser.finn_element_by_xpath('/html/body/div [1]/div [1]
/div [2]/div [1]/div/div/h3 [2] '
)
skrive ut('Gjeldende tidsstempel: %s'%(tidsstempel.tekst.dele('')[0]))
nettleser.Lukk()

Når du er ferdig, lagrer du ex01.py Python -skript.

Linje 1-3 importerer alle nødvendige selenkomponenter.

Linje 5 oppretter et Chrome Options -objekt, og linje 6 aktiverer hodeløs modus for Chrome -nettleseren.

Linje 8 lager en Chrome nettleser objektet ved hjelp av chromedriver binær fra sjåfører/ katalog over prosjektet.

Linje 10 forteller nettleseren å laste inn nettstedet unixtimestamp.com.

Linje 12 finner elementet som har tidsstempeldataene fra siden ved hjelp av XPath -velgeren og lagrer det i tidsstempel variabel.

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

Jeg har kopiert XPath -velgeren til det merkede h2 element fra unixtimestamp.com bruker Chrome Developer Tool.

Linje 14 lukker nettleseren.

Kjør Python -skriptet ex01.py følgende:

$ python3 ex01.py

Som du kan se, skrives tidsstempeldataene ut på skjermen.

Her har jeg brukt browser.find_element_by_xpath (velger) metode. Den eneste parameteren for denne metoden er velger, som er XPath -velgeren til elementet.

I stedet for browser.find_element_by_xpath () metode, kan du også bruke browser.find_element (By, selector) metode. Denne metoden krever to parametere. Den første parameteren Av vil være Av.XPATH som vi skal bruke XPath -velgeren og den andre parameteren velgeren vil være selve XPath -velgeren. Resultatet blir det samme.

For å se hvordan browser.find_element () metode fungerer for XPath -velgeren, opprett et nytt Python -skript ex02.py , kopier og lim inn alle linjene fra ex01.py til ex02.py og endre linje 12 som markert på skjermbildet nedenfor.

Som du kan se, Python -skriptet ex02.py gir samme resultat som ex01.py .

$ python3 ex02.py

De browser.find_element_by_xpath () og browser.find_element () metoder brukes til å finne og velge et enkelt element fra websider. Hvis du vil finne og velge flere elementer ved hjelp av XPath -velgere, må du bruke browser.find_elements_by_xpath () eller browser.find_elements () metoder.

De browser.find_elements_by_xpath () metoden tar det samme argumentet som browser.find_element_by_xpath () metode.

De browser.find_elements () metoden tar de samme argumentene som browser.find_element () metode.

La oss se et eksempel på å trekke ut en liste med navn ved å bruke XPath -velgeren fra random-name-generator.info med Selenium Python -biblioteket.

Den uordnede listen ( tag) har en 10 tagger inne i hver som inneholder et tilfeldig navn. XPath for å velge alle tagger inne i tag i dette tilfellet er //*[@id = main]/div [3]/div [2]/ol // li

La oss gå gjennom et eksempel på å velge flere elementer fra websiden ved hjelp av XPath -velgere.

Lag et nytt Python -skript ex03.py og skriv inn følgende koderader.

fraselenimportwebdriver
fraselen.webdriver.felles.nøkler importNøkler
fraselen.webdriver.felles.av importAv
alternativer=webdriver.ChromeOptions()
alternativer.hodeløs = ekte
nettleser=webdriver.Chrome(kjørbar_bane='./drivers/chromedriver',
alternativer=alternativer)
nettleser.('http://random-name-generator.info/')
navn=nettleser.find_elements_by_xpath('
//*[@id = 'main']/div [3]/div [2]/ol // li '
)
tilNavninavn:
skrive ut(Navn.tekst)
nettleser.Lukk()

Når du er ferdig, lagrer du ex03.py Python -skript.

Linje 1-8 er den samme som i ex01.py Python -skript. Så jeg kommer ikke til å forklare dem her igjen.

Linje 10 forteller nettleseren å laste ned nettstedet random-name-generator.info.

Linje 12 velger navnelisten ved hjelp av browser.find_elements_by_xpath () metode. Denne metoden bruker XPath -velgeren //*[@id = main]/div [3]/div [2]/ol // li for å finne navnelisten. Deretter lagres navnelisten i navn variabel.

I linje 13 og 14, a til loop brukes til å iterere gjennom navn liste og skrive ut navnene på konsollen.

Linje 16 lukker nettleseren.

Kjør Python -skriptet ex03.py følgende:

$ python3 ex03.py

Som du kan se, trekkes navnene ut fra nettsiden og skrives ut på konsollen.

I stedet for å bruke browser.find_elements_by_xpath () metode, kan du også bruke browser.find_elements () metode som før. Det første argumentet for denne metoden er Av. XPATH, og det andre argumentet er XPath -velgeren.

Å eksperimentere med browser.find_elements () metode, opprett et nytt Python -skript ex04.py , kopier alle kodene fra ex03.py til ex04.py , og endre linje 12 som markert på skjermbildet nedenfor.

Du bør få det samme resultatet som før.

$ python3 ex04.py

Grunnleggende om XPath Selector:

Utviklerverktøyet for Firefox eller Google Chrome nettleser genererer automatisk XPath -velgeren. Men disse XPath -velgerne er noen ganger ikke tilstrekkelige for prosjektet ditt. I så fall må du vite hva en bestemt XPath -velger gjør for å bygge XPath -velgeren. I denne delen skal jeg vise deg det grunnleggende om XPath -velgere. Deretter bør du kunne bygge din egen XPath -velger.

Lag en ny katalog www/ i prosjektkatalogen som følger:

$mkdir -vwww

Lag en ny fil web01.html i www/ katalog og skriv inn følgende linjer i filen.


< html lang='på'>
< hode >
< meta tegnsett='UTF-8'>
< meta Navn='viewport' innhold='width = device-width, initial-scale = 1.0'>
< tittel >Grunnleggende HTML -dokument</ tittel >
</ hode >
< kropp >
< h1 >Hei Verden</ h1 >
</ kropp >
</ html >

Når du er ferdig, lagrer du web01.html fil.

Kjør en enkel HTTP -server på port 8080 ved å bruke følgende kommando:

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

HTTP -serveren skal starte.

Du bør ha tilgang til web01.html filen ved hjelp av URL -en http: // localhost: 8080/web01.html , som du kan se på skjermbildet nedenfor.

Mens Firefox eller Chrome Developer Tool er åpnet, trykker du på + F for å åpne søkeboksen. Du kan skrive inn XPath -velgeren din her og se hva den velger veldig enkelt. Jeg kommer til å bruke dette verktøyet i hele denne delen.

En XPath -velger starter med en skråstrek (/) meste parten av tiden. Det er som et Linux -katalogtre. De / er roten til alle elementene på nettsiden.

Det første elementet er html . Så, XPath -velgeren /html velger hele html stikkord.

Inne i html tag, vi har en kropp stikkord. De kropp tag kan velges med XPath -velgeren /html/body

De h1 header er inne i kropp stikkord. De h1 header kan velges med XPath -velgeren /html/body/h1

Denne typen XPath -velger kalles en absolutt veivelger. I absolutt stivelger må du krysse websiden fra roten (/) på siden. Ulempen med en absolutt veivelger er at selv en liten endring av nettsidestrukturen kan gjøre XPath -velgeren ugyldig. Løsningen på dette problemet er en relativ eller delvis XPath -velger.

Opprett en ny fil for å se hvordan relativ bane eller delvis bane fungerer web02.html i www/ katalog og skriv inn følgende koderader.


< html lang='på'>
< hode >
< meta tegnsett='UTF-8'>
< meta Navn='viewport' innhold='width = device-width, initial-scale = 1.0'>
< tittel >Grunnleggende HTML -dokument</ tittel >
</ hode >
< kropp >
< h1 >Hei Verden</ h1 >

< div >
< s >dette er melding</ s >
</ div >

< div >
< spenn >Hei Verden</ spenn >
</ div >
</ kropp >
</ html >

Når du er ferdig, lagrer du web02.html filen og last den inn i nettleseren din.

Som du kan se, XPath -velgeren // div/s velger s tag inne i div stikkord. Dette er et eksempel på en relativ XPath -velger.

Relativ XPath -velger starter med // . Deretter spesifiserer du strukturen til elementet du vil velge. I dette tilfellet, div/s .

Så, // div/s betyr å velge s element inne i a div element, spiller ingen rolle hva som kommer foran det.

Du kan også velge elementer etter forskjellige attributter som id , klasse , type, etc. ved hjelp av XPath -velgeren. La oss se hvordan du gjør det.

Lag en ny fil web03.html i www/ katalog og skriv inn følgende koderader.


< html lang='på'>
< hode >
< meta tegnsett='UTF-8'>
< meta Navn='viewport' innhold='width = device-width, initial-scale = 1.0'>
< tittel > Grunnleggende HTML -dokument</ tittel >
</ hode >
< kropp >
< h1 > Hei verden</ h1 >
< div klasse='container1'>
< s > dette er en melding</ s >
< spenn > dette er en annen melding</ spenn >
</ div >
< div klasse='container1'>
< h2 > overskrift2</ h2 >
< s > Noen mennesker
klokt å velge smerter, problemer, de som ikke faller for den utvalgte
ikke enkle flyreiser og andre gode tjenester? Hvorfra eller hvor ble han født?</ s >
</ div >

< spenn id='bunntekst-msg'> dette er en bunntekst</ spenn >
</bunntekst>
</ kropp >
</ html >

Når du er ferdig, lagrer du web03.html filen og last den inn i nettleseren din.

La oss si at du vil velge alle div elementer som har klasse Navn beholder 1 . For å gjøre det, kan du bruke XPath -velgeren // div [@class = ’container1 ′]

Som du kan se, har jeg to elementer som matcher XPath -velgeren // div [@class = ’container1 ′]

For å velge den første div element med klasse Navn beholder 1 , legge til [1] på slutten av XPath -valget, som vist på skjermbildet nedenfor.

På samme måte kan du velge den andre div element med klasse Navn beholder 1 ved hjelp av XPath -velgeren // div [@class = ’container1 ′] [2]

Du kan velge elementer ved å id også.

For eksempel for å velge elementet som har id av bunntekst-melding , kan du bruke XPath -velgeren //*[@id = ’footer-msg’]

Her, den * før [@id = ’footer-msg’] brukes til å velge et element uavhengig av taggen.

Det er det grunnleggende i XPath -velgeren. Nå bør du kunne lage din egen XPath -velger for Selen -prosjektene dine.

Konklusjon:

I denne artikkelen har jeg vist deg hvordan du finner og velger elementer fra websider ved hjelp av XPath -velgeren med Selenium Python -biblioteket. Jeg har også diskutert de vanligste XPath -velgerne. Etter å ha lest denne artikkelen, bør du føle deg ganske trygg på å velge elementer fra websider ved å bruke XPath -velgeren med Selenium Python -biblioteket.