Bruke XPath og Selenium for å finne et element i HTML -siden

Bruke XPath og Selenium for å finne et element i HTML -siden
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 websiden er nøkkelen til skraping av nettet med Selenium. For å finne og velge elementer fra websiden, kan du bruke XPath Selectors i Selenium.

I denne artikkelen skal jeg vise deg hvordan du finner og velger elementer fra websider ved hjelp av XPath Selectors i Selenium med Selenium Python Library. Så la oss komme i gang.

Forutsetninger:

For å prøve ut 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 din.
  4. Python Virtualenv pakke 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 emnene på Linuxhint.com. Sørg for å sjekke dem ut hvis du trenger hjelp.

Sette opp en prosjektkatalog:

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

$ mkdir -pv selen -xpath/drivere

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

$ cd selen-xpath/

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

$ virtualenv .Venv

Aktiver det virtuelle miljøet som følger:

$ kilde .Venv/bin/aktiverer

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

$ pip3 installer selen

Last ned og installer all nødvendig nettdriver i drivere/ Katalogen til prosjektet. Jeg har forklart prosessen med å laste ned og installere nettdrivere i artikkelen min Introduksjon til selen i Python 3.

Få XPath -velgeren ved hjelp av Chrome Developer Tool:

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

For å få XPath -velgeren ved å bruke Google Chrome -nettleseren, åpner du Google Chrome og besøk nettstedet du vil hente ut data. Trykk deretter på høyre museknapp (RMB) på et tomt område på siden og klikk på Undersøke Å åpne Chrome Developer Tool.

Du kan også trykke på + Skifte + Jeg Å åpne Chrome Developer Tool.

Chrome Developer Tool skal åpnes.

For å finne HTML -representasjonen av ønsket websideelement, klikker du på Undersøke(

) ikon, som merket i skjermbildet nedenfor.

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

HTML -representasjonen av nettelementet du har valgt vil bli fremhevet i Elementer Tab of the Chrome Developer Tool, Som du kan se på skjermbildet nedenfor.

For å få XPath -velgeren til ønsket element, velg elementet fra Elementer Tab av Chrome Developer Tool og høyreklikk (RMB) på den. Velg deretter Kopiere > Kopier xpath, Som merket på skjermbildet nedenfor.

Jeg har limt inn XPath -velgeren i en tekstredigerer. XPath -velgeren ser ut som vist på skjermdumpen nedenfor.

Få XPath -velgeren ved hjelp av Firefox Developer Tool:

I dette avsnittet skal jeg vise deg hvordan du finner XPath-velgeren til websideelementet du vil velge med Selenium ved å bruke det innebygde utviklerverktøyet til Mozilla Firefox Web Browser.

For å få XPath -velgeren ved å bruke Firefox Web Browser, åpner du Firefox og besøk nettstedet du vil hente ut data. Trykk deretter på høyre museknapp (RMB) på et tomt område på siden og klikk på Inspiser element (q) Å åpne Firefox Developer Tool.

Firefox Developer Tool skal åpnes.

For å finne HTML -representasjonen av ønsket websideelement, klikker du på Undersøke(

) ikon, som merket i skjermbildet nedenfor.

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

HTML -representasjonen av nettelementet du har valgt vil bli fremhevet i Inspektør Tab av Firefox Developer Tool, Som du kan se på skjermbildet nedenfor.

For å få XPath -velgeren til ønsket element, velg elementet fra Inspektør Tab av Firefox Developer Tool og høyreklikk (RMB) på den. Velg deretter Kopiere > Xpath Som merket på skjermbildet nedenfor.

XPath -velgeren til ønsket element skal se ut som dette.

Å trekke ut data fra websider ved hjelp av XPath Selector:

I dette avsnittet skal jeg vise deg hvordan du velger websideelementer og henter ut data fra dem ved hjelp av XPath -velgere med Selenium Python Library.

Lag først et nytt Python -skript EX01.py og skriv inn følgende koderlinjer.

Fra Selenium Import WebDriver
fra Selenium.Webdriver.felles.nøkler importerer nøkler
fra Selenium.Webdriver.felles.ved import av
Alternativer = webdriver.ChromeOptions ()
alternativer.Hodeløs = sant
nettleser = webdriver.Krom (kjørbar_path = "./drivere/kromdriver ",
alternativer = alternativer)
nettleser.få ("https: // www.Unixtimestamp.com/")
Timestempel = nettleser.find_element_by_xpath ('/html/body/div [1]/div [1]
/div [2]/div [1]/div/div/h3 [2] ')
Print ('Gjeldende tidsstempel: % S' % (tidsstempel.tekst.split (") [0]))
nettleser.Lukk()

Når du er ferdig, kan du lagre EX01.py Python -manus.

Linje 1-3 importerer alle nødvendige selenkomponenter.

Linje 5 Oppretter et Chrome Option -objekt, og linje 6 muliggjør hodeløs modus for Chrome -nettleseren.

Linje 8 skaper et krom nettleser objekt ved å bruke Chromedriver binær fra drivere/ Katalogen til prosjektet.

Linje 10 ber nettleseren om å 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 den ut på konsollen.

Jeg har kopiert XPath -velgeren til den markerte H2 element fra Unixtimestamp.com Bruke Chrome Developer Tool.

Linje 14 lukker nettleseren.

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

$ Python3 EX01.py

Som du kan se, skrives tidsstempeldataene på skjermen.

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

I stedet for nettleser.find_element_by_xpath () Metode, du kan også bruke nettleser.find_element (av, velger) metode. Denne metoden trenger to parametere. Den første parameteren Av vil være Av.Xpath Som vi bruker XPath -velgeren, og den andre parameteren velger vil være XPath -velgeren selv. Resultatet vil være det samme.

Å se hvordan nettleser.find_element () Metoden fungerer for XPath -velgeren, lag et nytt Python -skript EX02.py, kopier og lim inn alle linjene fra EX01.py til EX02.py og endre linje 12 Som merket på skjermbildet nedenfor.

Som du ser, Python -skriptet EX02.py gir samme resultat som EX01.py.

$ Python3 EX02.py

De nettleser.find_element_by_xpath () og nettleser.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 Selectors, må du bruke nettleser.find_elements_by_xpath () eller nettleser.find_elements () metoder.

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

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

La oss se et eksempel på å trekke ut en liste over navn ved hjelp av XPath -velgeren fra Tilfeldig navngenerator.info Med Selenium Python Library.

Den uordnede listen (ol tag) har en 10 li Tagger inne i hver som inneholder et tilfeldig navn. Xpath for å velge alle li Tagger inne i ol 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 Selectors.

Lag et nytt Python -skript EX03.py og skriv inn følgende koder i den.

Fra Selenium Import WebDriver
fra Selenium.Webdriver.felles.nøkler importerer nøkler
fra Selenium.Webdriver.felles.ved import av
Alternativer = webdriver.ChromeOptions ()
alternativer.Hodeløs = sant
nettleser = webdriver.Krom (kjørbar_path = "./drivere/kromdriver ",
alternativer = alternativer)
nettleser.få ("http: // tilfeldig-navn-generator.info/")
Navn = nettleser.find_elements_by_xpath ('
//*[@id = "main"]/div [3]/div [2]/ol // li ')
For navn i navn:
trykk (navn.tekst)
nettleser.Lukk()

Når du er ferdig, kan du lagre EX03.py Python -manus.

Linje 1-8 er den samme som i EX01.py Python -manus. Så jeg skal ikke forklare dem her igjen.

Linje 10 ber nettleseren laste inn nettstedet tilfeldig navn-generator.info.

Linje 12 velger navnelisten ved hjelp av nettleser.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 sløyfe er vant til å iterere gjennom navn Liste og skriv ut navnene på konsollen.

Linje 16 lukker nettleseren.

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

$ Python3 EX03.py

Som du ser blir navnene hentet fra websiden og skrevet ut på konsollen.

I stedet for å bruke nettleser.find_elements_by_xpath () Metode, du kan også bruke nettleser.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 nettleser.find_elements () metode, lag et nytt python -skript EX04.py, kopier alle kodene fra EX03.py til EX04.py, og endringslinje 12 som merket i skjermbildet nedenfor.

Du bør få samme resultat som før.

$ Python3 EX04.py

Grunnleggende om XPath -velgeren:

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

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

$ mkdir -v www

Lag en ny fil Web01.html i www/ Katalog og skriv inn følgende linjer i den filen.






Grunnleggende HTML -dokument


Hei Verden



Når du er ferdig, kan du lagre Web01.html fil.

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

$ python3 -m http.Server - - - -direkte www/ 8080

HTTP -serveren skal starte.

Du skal kunne få tilgang til Web01.html Fil ved hjelp av URL http: // localhost: 8080/web01.HTML, som du kan se på skjermbildet nedenfor.

Mens Firefox eller Chrome Developer Tool åpnes, trykk + F Å åpne søkeboksen. Du kan skrive inn XPath -velgeren din her og se hva den velger veldig enkelt. Jeg skal bruke dette verktøyet i hele denne delen.

En xpath -velger starter med en Fremovernedgang (/) meste parten av tiden. Det er som et Linux -katalogtre. De / er roten til alle elementer på websiden.

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/kropp

De H1 header er inne i kropp stikkord. De H1 Header kan velges med XPath -velgeren /HTML/Body/H1

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

For å se hvordan relativ bane eller delvis bane fungerer, oppretter du en ny fil Web02.html i www/ Katalog og skriv inn følgende koder i den.






Grunnleggende HTML -dokument


Hei Verden



dette er melding




Hei Verden


Når du er ferdig, kan du lagre Web02.html fil og last den i nettleseren din.

Som du kan se, XPath -velgeren // div/p velger p Merk 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/p betyr velg p element inne i a div element, spiller ingen rolle hva som kommer før det.

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

Lag en ny fil Web03.html i www/ Katalog og skriv inn følgende koder i den.






Grunnleggende HTML -dokument


Hei Verden



dette er melding


Dette er en annen melding


overskrift 2


Lorem Ipsum Dolor Sit amet consektetur, adipisicing elit. Quibusdam
SPOLORIBUS Sapiente, Molestias Quos Quae Non Nam Incid Quis Delectus
Facilis magni officiis alias neque atque fuga? Unde, Aut Natus?




Dette er en bunntekst


Når du er ferdig, kan du lagre Web03.html fil og last den i nettleseren din.

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

Som du kan se, har jeg 2 elementer som samsvarer med XPath -velgeren // div [@class = 'container1']

For å velge den første div element med klasse Navn Container1, Legg til [1] På slutten av XPath Select, som vist på skjermdumpen nedenfor.

På samme måte kan du velge den andre div element med klasse Navn Container1 Bruke xpath -velgeren // div [@class = 'container1'] [2]

Du kan velge elementer av id også.

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

Her, The * før [@id = 'bunntekst-msg'] brukes til å velge ethvert element uavhengig av taggen deres.

Det er det grunnleggende i XPath -velgeren. Nå skal du kunne lage din egen XPath -velger for Selenium -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 Library. 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 hjelp av XPath -velgeren med Selenium Python Library.