Lokalisere elementer av CSS -velgere med selen

Å 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 CSS -velgere i Selenium.I denne artikkelen skal jeg vise deg hvordan du finner og velger elementer fra websider ved hjelp av CSS -velgere 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 med Python 3 Hos Linuxhint.com.

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-css-selector/ følgende:

$ mkdir -pv selen-css-selector/drivere

Naviger til selen-css-selector/ Prosjektkatalog som følger:

$ CD Selenium-CSS-Selector/

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 med Python 3. Hvis du trenger hjelp, kan du søke på Linuxhint.com for den artikkelen.

Få CSS -velger ved hjelp av Chrome Developer Tool:

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

For å få CSS -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() Ikonet 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 av Chrome Developer Tool Som du kan se på skjermbildet nedenfor.

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

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

Få CSS -velger ved hjelp av Firefox Developer Tool:

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

For å få CSS -velgeren ved å bruke Firefox Webleser, å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() Ikonet 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å CSS -velgeren til ønsket element, velg elementet fra Inspektør Tab av Firefox Developer Tool og høyreklikk (RMB) på den. Velg deretter Kopiere > CSS -velger Som merket på skjermbildet nedenfor.

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

Å trekke ut data ved hjelp av CSS -velger med selen:

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

Lag først et nytt Python -skript ex00.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/Chromedriver ", alternativer = alternativer)
nettleser.få ("https: // www.Unixtimestamp.com/")
Timestempel = nettleser.find_element_by_css_selector ('h3.Tekst-Danger: nth-Child (3) ')
Print ('Gjeldende tidsstempel: % S' % (tidsstempel.tekst.split (") [0]))
nettleser.Lukk()

Når du er ferdig, kan du lagre ex00.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 CSS -velgeren og lagrer det i tidsstempel variabel.

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

Slik er HTML -strukturen til UNIX tidsstempeldata i UnixTimestamp.com ser ut som.

Linje 14 lukker nettleseren.

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

$ Python3 Ex00.py

Som du kan se, skrives tidsstempeldataene på skjermen.

Her har jeg brukt nettleser.find_element (av, velger) metode.

Når vi bruker CSS -velgere, vil den første parameteren være Av.CSS_Selector og den andre parameteren vil være selve CSS -velgeren.

I stedet for nettleser.find_element () Metode, du kan også bruke nettleser.find_element_by_css_selector (velger) metode. Denne metoden trenger bare en CSS -velger for å fungere. Resultatet vil være det samme.

De nettleser.find_element () og nettleser.find_element_by_css_selector () Metoder brukes til å finne og velge et enkelt element fra websiden. Hvis du vil finne og velge flere elementer ved hjelp av CSS -velgerne, må du bruke nettleser.find_elements () og nettleser.find_elements_by_css_selector () metoder.

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

De nettleser.find_elements_by_css_selector () metoden tar det samme argumentet som nettleser.find_element_by_css_selector () metode.

La oss se et eksempel på å trekke ut en liste over navn ved hjelp av CSS-velgere fra tilfeldig navn-generator.info med selen.

Som du ser har den uordnede listen klassenavnet navneliste. Så vi kan bruke CSS -velgeren .Namelist Li For å velge alle navnene fra websiden.

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

Lag et nytt Python -skript EX01.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/Chromedriver ", alternativer = alternativer)
nettleser.få ("http: // tilfeldig-navn-generator.info/")
Navn = nettleser.find_elements (av.CSS_Selector, '.namelist li ')
For navn i navn:
trykk (navn.tekst)
nettleser.Lukk()

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

Linje 1-8 er den samme som i ex00.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 () metode. Denne metoden bruker CSS -velgeren .Namelist 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 EX01.py følgende:

$ Python3 EX01.py

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

I stedet for å bruke nettleser.find_elements () Metode, du kan også bruke nettleser.find_elements_by_css_selector () metoden som før. Denne metoden trenger bare en CSS -velger for å fungere. Resultatet vil være det samme.

Grunnleggende om CSS -velgere:

Du kan alltid finne CSS -velgeren til et websideelement ved hjelp av utviklerverktøyet til Firefox eller Chrome Web Browser. Denne auto-genererte CSS-velgeren er kanskje ikke det du vil ha. Noen ganger kan det hende du må skrive CSS -velgeren.

I denne delen skal jeg snakke om det grunnleggende om CSS -velgere, slik at du kan forstå hva en viss CSS -velger velger fra en webside og skriver den tilpassede CSS -velgeren om nødvendig.

Hvis du vil velge et element fra websiden ved hjelp av ID beskjed, CSS -velgeren vil være #beskjed.

CSS -velgeren .grønn vil velge et element ved hjelp av et klassenavn grønn.

Hvis du vil velge et element (klasse msg) inne i et annet element (klasse container), vil CSS -velgeren være .container .msg

CSS -velgeren .msg.suksess vil velge elementet som har to CSS -klasser msg og suksess.

For å velge alle p Tagger, du kan bruke CSS -velgeren p.

Å bare velge p Tagger inne i div Tagger, du kan bruke CSS -velgeren Div p

For å velge p Tagger som er de direkte søsknene til div Tagger, du kan bruke CSS -velgeren div> s

For å velge alle spenn og p Tagger, du kan bruke CSS -velgeren P, Span

For å velge p Tag umiddelbart etter div Tag, du kan bruke CSS -velgeren div + s

For å velge p Tag etter div Tag, du kan bruke CSS -velgeren div ~ s

For å velge alle p Tagger som har klassenavnet msg, Du kan bruke CSS -velgeren p.msg

For å velge alle spenn Tagger som har klassenavnet msg, Du kan bruke CSS -velgeren spenn.msg

For å velge alle elementene som har attributtet href, Du kan bruke CSS -velgeren [href]

For å velge elementet som har attributtet Navn og verdien av Navn attributt er Brukernavn, Du kan bruke CSS -velgeren [navn = ”brukernavn”]

For å velge alle elementene som har attributtet alt og verdien av alt attributt som inneholder substring vscode, Du kan bruke CSS -velgeren [alt ~ = ”vscode”]

Å velge alle elementene som har href attributt og verdien av href Attributt starter med strengen https, Du kan bruke CSS -velgeren [href^= ”https”]

Å velge alle elementene som har href attributt og verdien av href attributt slutter med strengen .com, Du kan bruke CSS -velgeren [href $ = ”.com ”]

Å velge alle elementene som har href attributt og verdien av href attributt har substring Google, Du kan bruke CSS -velgeren [href*= ”Google”]

Hvis du vil velge den første li Merk i ul Tag, du kan bruke CSS -velgeren Ul Li: Førstebarn

Hvis du vil velge den første li Merk i ul Tag, du kan også bruke CSS -velgeren Ul Li: nth-Child (1)

Hvis du vil velge den siste li Merk i ul Tag, du kan bruke CSS -velgeren Ul Li: Last-Child

Hvis du vil velge den siste li Merk i ul Tag, du kan også bruke CSS -velgeren Ul Li: Nth-Mast-Child (1)

Hvis du vil velge det andre li Merk i ul Tag fra begynnelsen, kan du bruke CSS -velgeren Ul Li: nth-Child (2)

Hvis du vil velge den tredje li Merk i ul Tag fra begynnelsen, kan du bruke CSS -velgeren Ul Li: nth-Child (3)

Hvis du vil velge det andre li Merk i ul Tag fra slutten, kan du bruke CSS -velgeren Ul Li: Nth-Mast-Child (2)

Hvis du vil velge den tredje li Merk i ul Tag fra slutten, kan du bruke CSS -velgeren Ul Li: Nth-Mast-Child (3)

Dette er de vanligste CSS -velgerne. Du vil finne deg selv å bruke disse nesten på alle selenprosjekter. Det er mange flere CSS -velgere. Du kan finne en liste over dem alle i W3Schools.com css selectors referanse.

Cnclusjon:

I denne artikkelen har jeg vist hvordan jeg finner og velger websideelementer ved hjelp av CSS -velgere med Selenium. Jeg har også diskutert det grunnleggende om CSS -velgere. Du skal kunne bruke CSS -velgere komfortabelt for Selenium -prosjektene dine.