Phenquestions
Preduvjeti:
Da biste isprobali naredbe i primjere ovog članka, morate ih imati,
1) Linux distribucija (po mogućnosti Ubuntu) instalirana na vašem računalu.
2) Python 3 instaliran na vašem računalu.
3) PIP 3 instaliran na vašem računalu.
4) Python virtualenv paket instaliran na vašem računalu.
5) Mozilla Firefox ili Google Chrome web preglednici instalirani na vašem računalu.
6) Morate znati kako instalirati Firefox Gecko Driver ili Chrome Web Driver.
Za ispunjavanje zahtjeva 4, 5 i 6 pročitajte moj članak Uvod u selenij s Pythonom 3 na Linuxhintu.com.
Na LinuxHintu možete pronaći mnogo članaka o ostalim temama.com. Svakako ih pregledajte ako trebate pomoć.
Postavljanje direktorija projekta:
Da biste sve organizirali, stvorite novi direktorij projekata selenium-css-selektor / kako slijedi:
$ mkdir -pv selenium-css-selektor / upravljački programi
Idite na selenium-css-selektor / direktorij projekta kako slijedi:
$ cd selenium-css-selektor /
Stvorite Python virtualno okruženje u direktoriju projekta kako slijedi:
$ virtualenv .venv
Aktivirajte virtualno okruženje na sljedeći način:
$ izvor .venv / bin / aktivirati
Instalirajte biblioteku Selenium Python koristeći PIP3 kako slijedi:
$ pip3 instaliraj selen
Preuzmite i instalirajte sve potrebne upravljačke programe u vozači / direktorij projekta. U svom sam članku objasnio postupak preuzimanja i instaliranja web upravljačkih programa Uvod u selenij s Pythonom 3. Ako trebate pomoć, potražite LinuxHint.com za taj članak.
Nabavite CSS Selector pomoću Chrome Developer Tool:
U ovom odjeljku pokazat ću vam kako pronaći CSS selektor elementa web stranice koji želite odabrati pomoću Selenium pomoću ugrađenog alata za programere web preglednika Google Chrome.
Da biste dobili CSS selektor pomoću web preglednika Google Chrome, otvorite Google Chrome i posjetite web mjesto s kojeg želite izvući podatke. Zatim pritisnite desnu tipku miša (RMB) na prazno područje stranice i kliknite na Pregledati otvoriti Alat za razvojne programere Chrome.
Također možete pritisnuti
Alat za razvojne programere Chrome treba otvoriti.
Da biste pronašli HTML prikaz željenog elementa web stranice, kliknite na Pregledati() kao što je označeno na snimci zaslona u nastavku.
Zatim zadržite pokazivač iznad željenog elementa web stranice i pritisnite lijevu tipku miša (LMB) da biste ga odabrali.
HTML prikaz web elementa koji ste odabrali bit će istaknut u Elementi karticu Alat za razvojne programere Chrome kao što možete vidjeti na donjoj snimci zaslona.
Da biste dobili CSS selektor željenog elementa, odaberite element iz Elementi karticu Alat za razvojne programere Chrome i desnom tipkom miša kliknite (RMB) na njemu. Zatim odaberite Kopirati > Birač kopiranja kako je označeno na snimci zaslona u nastavku.
Zalijepio sam CSS selektor u uređivač teksta. CSS selektor izgleda kao što je prikazano na snimci zaslona u nastavku.
Nabavite CSS Selector koristeći Firefox Developer Tool:
U ovom odjeljku pokazat ću vam kako pronaći CSS selektor elementa web stranice koji želite odabrati pomoću Selenium pomoću ugrađenog alata za programere web preglednika Mozilla Firefox.
Da biste dobili CSS selektor pomoću web preglednika Firefox, otvorite Firefox i posjetite web mjesto s kojeg želite izvući podatke. Zatim pritisnite desnu tipku miša (RMB) na prazno područje stranice i kliknite na Pregledaj element (Q) otvoriti Alat za razvojne programere Firefoxa.
Alat za razvojne programere Firefoxa treba otvoriti.
Da biste pronašli HTML prikaz željenog elementa web stranice, kliknite na Pregledati() kao što je označeno na snimci zaslona u nastavku.
Zatim zadržite pokazivač iznad željenog elementa web stranice i pritisnite lijevu tipku miša (LMB) da biste ga odabrali.
HTML prikaz web elementa koji ste odabrali bit će istaknut u Inspektor karticu Alat za razvojne programere Firefoxa kao što možete vidjeti na donjoj snimci zaslona.
Da biste dobili CSS selektor željenog elementa, odaberite element iz Inspektor karticu Alat za razvojne programere Firefoxa i desnom tipkom miša kliknite (RMB) na njemu. Zatim odaberite Kopirati > CSS selektor kako je označeno na snimci zaslona u nastavku.
CSS selektor željenog elementa trebao bi izgledati otprilike ovako.
Izdvajanje podataka pomoću CSS Selektora sa selenom:
U ovom odjeljku pokazat ću vam kako odabrati elemente web stranice i iz njih izvući podatke pomoću CSS selektora s bibliotekom Selenium Python.
Prvo stvorite novu Python skriptu ex00.py i unesite sljedeće retke kodova.
s selena za uvoz webdriveraod selena.mrežni pogonitelj.uobičajen.tipke uvoz ključeva
od selena.mrežni pogonitelj.uobičajen.uvozom By
options = webdriver.ChromeOptions ()
mogućnosti.bez glave = Istina
preglednik = webdriver.Chrome (izvršna_puta = "./ drivers / chromedriver ", options = options)
preglednik.get ("https: // www.unixtimestamp.com / ")
vremenska oznaka = preglednik.find_element_by_css_selector ('h3.opasnost od teksta: n-to dijete (3) ')
print ('Trenutna vremenska oznaka:% s'% (vremenska oznaka.tekst.podijeliti (") [0]))
preglednik.Zatvoriti()
Kad završite, spremite ex00.py Python skripta.
Linija 1-3 uvozi sve potrebne komponente selena.
Redak 5 stvara objekt Chrome Options, a red 6 omogućuje način bez glave za web-preglednik Chrome.
Redak 8 stvara Chrome preglednik objekt pomoću kromedriver binarni iz vozači / direktorij projekta.
Redak 10 govori pregledniku da učita web stranicu unixtimestamp.com.
Redak 12 pronalazi element koji ima podatke o vremenskoj oznaci sa stranice pomoću CSS selektora i pohranjuje ga u vremenska oznaka varijabilna.
Redak 13 analizira podatke vremenske oznake iz elementa i ispisuje ih na konzoli.
To je kako HTML struktura podataka vremenske oznake UNIX u unixtimestamp.com izgleda.
Redak 14 zatvara preglednik.
Pokrenite Python skriptu ex00.py kako slijedi:
$ python3 ex00.py
Kao što vidite, podaci vremenske oznake ispisuju se na zaslonu.
Evo, koristio sam preglednik.find_element (Autor, selektor) metoda.
Kako koristimo CSS selektore, prvi će parametar biti Po.CSS_SELECTOR a drugi će parametar biti sam CSS selektor.
Umjesto preglednik.pronađi_element () metodu, koju također možete koristiti preglednik.find_element_by_css_selector (selektor) metoda. Ovoj metodi potreban je samo CSS selektor za rad. Rezultat će biti isti.
The preglednik.pronađi_element () i preglednik.find_element_by_css_selector () metode se koriste za pronalaženje i odabir pojedinog elementa s web stranice. Ako želite pronaći i odabrati više elemenata pomoću CSS selektora, tada morate koristiti preglednik.pronađi_elemente () i preglednik.find_elements_by_css_selector () metode.
The preglednik.pronađi_elemente () metoda uzima iste argumente kao i preglednik.pronađi_element () metoda.
The preglednik.find_elements_by_css_selector () metoda uzima isti argument kao i preglednik.find_element_by_css_selector () metoda.
Pogledajmo primjer izdvajanja popisa imena pomoću CSS selektora iz generatora slučajnih imena.informacije sa selenom.
Kao što vidite, neuređeni popis ima naziv klase lista imena. Dakle, možemo koristiti CSS selektor .popis popisa li za odabir svih imena s web stranice.
Prođimo kroz primjer odabira više elemenata s web stranice pomoću CSS selektora.
Stvorite novu Python skriptu ex01.py i u njega unesite sljedeće retke kodova.
s selena za uvoz webdriveraod selena.mrežni pogonitelj.uobičajen.tipke uvoz ključeva
od selena.mrežni pogonitelj.uobičajen.uvozom By
options = webdriver.ChromeOptions ()
mogućnosti.bez glave = Istina
preglednik = webdriver.Chrome (izvršna_puta = "./ drivers / chromedriver ", options = options)
preglednik.get ("http: // random-name-generator.info / ")
imena = preglednik.pronađi_elemente (Autor.CSS_SELECTOR, '.Popis imena li ')
za ime u imenima:
Naziv ispisa.tekst)
preglednik.Zatvoriti()
Kad završite, spremite ex01.py Python skripta.
Linija 1-8 ista je kao u ex00.py Python skripta. Dakle, neću ih ovdje više objašnjavati.
Redak 10 govori pregledniku da učita web stranicu generator slučajnih imena.info.
Redak 12 odabire popis imena pomoću preglednik.pronađi_elemente () metoda. Ova metoda koristi CSS selektor .popis popisa li pronaći popis imena. Zatim se popis imena sprema u imena varijabilna.
U redovima 13 i 14, a za petlja se koristi za iteraciju kroz imena popisati i ispisati imena na konzoli.
Redak 16 zatvara preglednik.
Pokrenite Python skriptu ex01.py kako slijedi:
$ python3 ex01.py
Kao što vidite, imena se izdvajaju s web stranice i ispisuju na konzoli.
Umjesto da koristite preglednik.pronađi_elemente () metodu, također možete koristiti preglednik.find_elements_by_css_selector () metoda kao i prije. Ovoj metodi potreban je samo CSS selektor za rad. Rezultat će biti isti.
Osnove CSS selektora:
CSS selektor elementa web stranice uvijek možete pronaći pomoću alata za razvojne programere Firefoxa ili Chrome web preglednika. Ovaj automatski generirani CSS selektor možda nije ono što želite. Ponekad ćete možda morati napisati svoj CSS selektor.
U ovom odjeljku govorit ću o osnovama CSS selektora kako biste mogli razumjeti što određeni CSS selektor odabire na web stranici i po potrebi napisati svoj CSS selektor.
Ako želite odabrati element s web stranice pomoću ID-a poruka, CSS selektor će biti #poruka.
CSS birač .zeleno odabrat će element koristeći naziv klase zeleno.
Ako želite odabrati element (klasa poruka) unutar drugog elementa (klase kontejner), CSS selektor će biti .kontejner .poruka
CSS birač .poruka.uspjeh odabrat će element koji ima dvije CSS klase poruka i uspjeh.
Za odabir svih str oznake, možete koristiti CSS selektor str.
Da biste odabrali samo str oznake unutar div oznake, možete koristiti CSS selektor div str
Za odabir str oznake koje su izravna braća i sestre div oznake, možete koristiti CSS selektor div> str
Za odabir svih raspon i str oznake, možete koristiti CSS selektor p, raspon
Za odabir str oznaka odmah nakon div oznaku, možete koristiti CSS selektor div + str
Za odabir str oznaka nakon div oznaku, možete koristiti CSS selektor div ~ str
Za odabir svih str oznake koje imaju naziv klase poruka, možete koristiti CSS selektor str.poruka
Za odabir svih raspon oznake koje imaju naziv klase poruka, možete koristiti CSS selektor raspon.poruka
Za odabir svih elemenata koji imaju atribut href, možete koristiti CSS selektor [href]
Za odabir elementa koji ima atribut Ime i vrijednost Ime atribut je Korisničko ime, možete koristiti CSS selektor [ime = ”korisničko ime”]
Za odabir svih elemenata koji imaju atribut alt i vrijednost alt atribut koji sadrži podniz vscode, možete koristiti CSS selektor [alt ~ = ”vscode”]
Za odabir svih elemenata koji imaju href atribut i vrijednost href atribut započinje nizom https, možete koristiti CSS selektor [href ^ = ”https”]
Za odabir svih elemenata koji imaju href atribut i vrijednost href atribut koji završava nizom .com, možete koristiti CSS selektor [href $ = ”.com ”]
Za odabir svih elemenata koji imaju href atribut i vrijednost href atribut ima podniz google, možete koristiti CSS selektor [href * = ”google”]
Ako želite odabrati prvu li oznaka unutar ul oznaku, možete koristiti CSS selektor ul li: prvo dijete
Ako želite odabrati prvu li oznaka unutar ul oznaku, možete koristiti i CSS selektor ul li: n-to dijete (1)
Ako želite odabrati posljednju li oznaka unutar ul oznaku, možete koristiti CSS selektor ul li: posljednje dijete
Ako želite odabrati posljednju li oznaka unutar ul oznaku, možete koristiti i CSS selektor ul li: nth-last-child (1)
Ako želite odabrati drugu li oznaka unutar ul oznaka počevši od početka, možete koristiti CSS selektor ul li: n-to dijete (2)
Ako želite odabrati treću li oznaka unutar ul oznaka počevši od početka, možete koristiti CSS selektor ul li: n-to dijete (3)
Ako želite odabrati drugu li oznaka unutar ul oznaku počevši od kraja, možete koristiti CSS selektor ul li: nth-last-child (2)
Ako želite odabrati treću li oznaka unutar ul oznaku počevši od kraja, možete koristiti CSS selektor ul li: nth-last-child (3)
To su najčešći CSS selektori. Otkrit ćete da ih koristite gotovo na svim projektima Selenium. Postoji mnogo više CSS selektora. Popis svih njih možete pronaći u w3schools.com Referenca CSS selektora.
Zaključak:
U ovom sam članku pokazao kako locirati i odabrati elemente web stranica pomoću CSS selektora s Selenijem. Također sam razgovarao o osnovama CSS selektora. Trebali biste biti u mogućnosti koristiti CSS selektore ugodno za svoje Selenium projekte.
