Phenquestions
Forutsetninger:
For å prøve kommandoene og eksemplene til 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 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 med Python 3 på Linuxhint.com.
Du kan finne mange artikler om de andre emnene på LinuxHint.com. Husk å sjekke dem ut hvis du trenger hjelp.
Sette opp en prosjektkatalog:
For å holde alt organisert, opprett en ny prosjektkatalog selen-css-velger / som følger:
$ mkdir -pv selen-css-velger / drivere
Naviger til selen-css-velger / prosjektkatalog som følger:
$ cd selen-css-selector /
Opprett et virtuelt Python-miljø i prosjektkatalogen som følger:
$ virtualenv .venv
Aktiver det virtuelle miljøet som følger:
$ kilde .venv / bin / aktiver
Installer Selenium Python-biblioteket ved hjelp av PIP3 som følger:
$ pip3 installer selen
Last ned og installer alle nødvendige nettdrivere i drivere / katalog av 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 Selector ved hjelp av Chrome Developer Tool:
I denne delen skal jeg vise deg hvordan du finner CSS-velgeren for nettsideelementet du vil velge med Selen ved hjelp av det innebygde utviklerverktøyet i Google Chrome-nettleseren.
For å få CSS-velgeren ved hjelp av Google Chrome-nettleseren, åpne Google Chrome og besøk nettstedet du vil hente ut data fra. 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
Chrome Developer Tool skal åpnes.
For å finne HTML-representasjonen av ønsket websideelement, klikk på Undersøke() ikonet som er merket i skjermbildet nedenfor.
Hold deretter markøren over ønsket websideelement og trykk på venstre museknapp (LMB) for å velge det.
HTML-representasjonen av webelementet du har valgt vil bli uthevet i Elementer fanen til Chrome Developer Tool som du kan se på skjermbildet nedenfor.
For å hente CSS-velgeren for ønsket element, velg elementet fra Elementer fanen til Chrome Developer Tool og høyreklikk (RMB) på den. Velg deretter Kopiere > Kopivelger som markert i skjermbildet nedenfor.
Jeg har limt inn CSS-velgeren i en tekstredigerer. CSS-velgeren ser ut som vist på skjermbildet nedenfor.
Få CSS Selector ved hjelp av Firefox Developer Tool:
I denne delen skal jeg vise deg hvordan du finner CSS-velgeren til nettsideelementet du vil velge med Selen ved hjelp av det innebygde utviklerverktøyet i Mozilla Firefox-nettleseren.
For å få CSS-velgeren ved hjelp av Firefox-nettleseren, åpner du Firefox og besøker nettstedet du vil hente 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 Developer Tool.
Firefox Developer Tool skal åpnes.
For å finne HTML-representasjonen av ønsket websideelement, klikk på Undersøke() ikonet som er merket i skjermbildet nedenfor.
Hold deretter markøren over ønsket websideelement og trykk på venstre museknapp (LMB) for å velge det.
HTML-representasjonen av webelementet du har valgt vil bli uthevet i Inspektør fanen til Firefox Developer Tool som du kan se på skjermbildet nedenfor.
For å hente CSS-velgeren for ønsket element, velg elementet fra Inspektør fanen til Firefox Developer Tool og høyreklikk (RMB) på den. Velg deretter Kopiere > CSS-velger som markert i skjermbildet nedenfor.
CSS-velgeren til ønsket element skal se slik ut.
Utpakking av data ved bruk av CSS Selector med Selen:
I denne delen skal jeg vise deg hvordan du velger nettsideelementer og trekker ut data fra dem ved hjelp av CSS-velgere med Selenium Python-bibliotek.
Først oppretter du et nytt Python-skript ex00.py og skriv inn følgende kodelinjer.
fra selen import webdriverfra selen.webdriver.felles.nøkler importerer nøkler
fra selen.webdriver.felles.ved import av
opsjoner = webdriver.ChromeOptions ()
alternativer.hodeløs = Sant
nettleser = webdriver.Chrome (executable_path = "./ drivers / chromedriver ", opsjoner = opsjoner)
nettleser.få ("https: // www.unixtimestamp.com / ")
tidsstempel = nettleser.find_element_by_css_selector ('h3.tekst-fare: nth-child (3) ')
utskrift ('Gjeldende tidsstempel:% s'% (tidsstempel.tekst.delt (") [0]))
nettleser.Lukk()
Når du er ferdig, lagrer du ex00.py Python-skript.
Linje 1-3 importerer alle nødvendige Selen-komponenter.
Linje 5 oppretter et Chrome Options-objekt, og linje 6 aktiverer hodeløs modus for Chrome-nettleseren.
Linje 8 oppretter en Chrome nettleser objektet ved hjelp av chromedriver binær fra drivere / katalog av prosjektet.
Linje 10 ber nettleseren om å laste inn nettstedet unixtimestamp.com.
Linje 12 finner elementet som har tidsstempeldata fra siden ved hjelp av CSS-velgeren og lagrer det i tidsstempel variabel.
Linje 13 analyserer tidsstempeldataene fra elementet og skriver dem ut på konsollen.
Dette er hvordan HTML-strukturen til UNIX-tidsstempeldata i unixtimestamp.com ser ut som.
Linje 14 lukker nettleseren.
Kjør Python-skriptet ex00.py som følger:
$ python3 ex00.py
Som du kan se, blir tidsstempeldataene skrevet ut på skjermen.
Her har jeg brukt nettleser.find_element (av, velger) metode.
Ettersom vi bruker CSS-velgere, vil den første parameteren være Av.CSS_SELECTOR og den andre parameteren er selve CSS-velgeren.
I stedet for nettleser.finn_element () metode, kan du også bruke nettleser.find_element_by_css_selector (velger) metode. Denne metoden trenger bare en CSS-velger for å fungere. Resultatet blir det samme.
De nettleser.finn_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.finn_element () metode.
De nettleser.find_elements_by_css_selector () metoden tar samme argument som nettleser.find_element_by_css_selector () metode.
La oss se et eksempel på å trekke ut en liste over navn ved hjelp av CSS-velgerne fra random-name-generator.info med Selen.
Som du kan se, har den uordnede listen kursnavnet navneliste. Så vi kan bruke CSS-velgeren .navneliste li for å velge alle navnene fra websiden.
La oss gå gjennom et eksempel på å velge flere elementer fra websiden ved hjelp av CSS-velgerne.
Opprett et nytt Python-skript ex01.py og skriv inn følgende kodelinjer i den.
fra selen import webdriverfra selen.webdriver.felles.nøkler importerer nøkler
fra selen.webdriver.felles.ved import av
opsjoner = webdriver.ChromeOptions ()
alternativer.hodeløs = Sant
nettleser = webdriver.Chrome (executable_path = "./ drivers / chromedriver ", opsjoner = opsjoner)
nettleser.get ("http: // random-name-generator.info / ")
navn = nettleser.find_elements (av.CSS_SELECTOR, '.navneliste li ')
for navn i navn:
skriv ut (navn.tekst)
nettleser.Lukk()
Når du er ferdig, lagrer du ex01.py Python-skript.
Linje 1-8 er den samme som i ex00.py Python-skript. Så jeg kommer ikke til å forklare dem her igjen.
Linje 10 ber nettleseren om å laste inn nettstedet generator for tilfeldig navn.info.
Linje 12 velger navnelisten ved hjelp av nettleser.find_elements () metode. Denne metoden bruker CSS-velgeren .navneliste li for å finne navnelisten. Deretter lagres navnelisten i navn variabel.
I linje 13 og 14, a til loop brukes til å gjenta gjennom navn liste opp og skriv ut navnene på konsollen.
Linje 16 lukker nettleseren.
Kjør Python-skriptet ex01.py som følger:
$ python3 ex01.py
Som du kan se, hentes navnene fra websiden og skrives ut på konsollen.
I stedet for å bruke nettleser.find_elements () metoden, kan du også bruke nettleser.find_elements_by_css_selector () metoden som før. Denne metoden trenger bare en CSS-velger for å fungere. Resultatet blir det samme.
Grunnleggende om CSS-velgere:
Du kan alltid finne CSS-velgeren til et nettsideelement ved hjelp av utviklerverktøyet i Firefox eller Chrome-nettleseren. Denne automatisk genererte CSS-velgeren er kanskje ikke det du vil ha. Noen ganger kan det hende du må skrive CSS-velgeren din.
I denne delen skal jeg snakke om det grunnleggende om CSS-velgerne, slik at du kan forstå hva en bestemt CSS-velger velger fra en webside og skrive din tilpassede CSS-velger om nødvendig.
Hvis du vil velge et element fra websiden ved hjelp av ID-en beskjed, vil CSS-velgeren være #beskjed.
CSS-velgeren .grønn velger 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 velger elementet som har to CSS-klasser msg og suksess.
For å velge alle s koder, kan du bruke CSS-velgeren s.
For å velge bare s tagger inne i div koder, kan du bruke CSS-velgeren div s
For å velge s koder som er søsknene til div koder, kan du bruke CSS-velgeren div> s
For å velge alle span og s koder, kan du bruke CSS-velgeren p, span
For å velge s tag umiddelbart etter div kan du bruke CSS-velgeren div + s
For å velge s tag etter div kan du bruke CSS-velgeren div ~ s
For å velge alle s tagger som har kursnavnet msg, du kan bruke CSS-velgeren s.msg
For å velge alle span tagger som har kursnavnet msg, du kan bruke CSS-velgeren span.msg
Å velge alle elementene som har attributtet href, du kan bruke CSS-velgeren [href]
Å velge elementet som har attributtet Navn og verdien av Navn attributt er brukernavn, du kan bruke CSS-velgeren [name = ”brukernavn”]
Å 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 som 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 tag inne i ul kan du bruke CSS-velgeren ul li: første barn
Hvis du vil velge den første li tag inne i ul kan du også bruke CSS-velgeren ul li: nth-child (1)
Hvis du vil velge den siste li tag inne i ul kan du bruke CSS-velgeren ul li: siste barn
Hvis du vil velge den siste li tag inne i ul kan du også bruke CSS-velgeren ul li: nest siste barn (1)
Hvis du vil velge det andre li tag inne i ul fra begynnelsen, kan du bruke CSS-velgeren ul li: nth-child (2)
Hvis du vil velge den tredje li tag inne i ul fra begynnelsen, kan du bruke CSS-velgeren ul li: nth-child (3)
Hvis du vil velge det andre li tag inne i ul fra slutten, kan du bruke CSS-velgeren ul li: nest siste barn (2)
Hvis du vil velge den tredje li tag inne i ul fra slutten, kan du bruke CSS-velgeren ul li: nest siste barn (3)
Dette er de vanligste CSS-velgerne. Du vil komme til å bruke disse nesten på alle Selen-prosjekter. Det er mange flere CSS-velgere. Du finner en liste over dem alle i w3schools.com CSS Selectors Reference.
Inklusjon:
I denne artikkelen har jeg vist hvordan du finner og velger nettsideelementer ved hjelp av CSS-velgere med Selen. Jeg har også diskutert det grunnleggende om CSS-velgerne. Du bør kunne bruke CSS-velgerne komfortabelt for dine Selen-prosjekter.
