Selen

Iskanje elementov s pomočjo izbirnikov CSS s selenom

Iskanje elementov s pomočjo izbirnikov CSS s selenom
Iskanje in izbira elementov na spletni strani je ključnega pomena za strganje po spletu s selenom. Za iskanje in izbiro elementov na spletni strani lahko uporabite izbirnike CSS v programu Selenium.V tem članku vam bom pokazal, kako poiskati in izbrati elemente na spletnih straneh s pomočjo izbirnikov CSS v seleniju s knjižnico python selenium. Torej, začnimo.

Pogoji:

Če želite preizkusiti ukaze in primere tega članka, jih morate imeti,

1) V računalniku nameščena distribucija Linuxa (po možnosti Ubuntu).
2) Python 3, nameščen v vašem računalniku.
3) PIP 3, nameščen v vašem računalniku.
4) Python virtualenv paket, nameščen v računalniku.
5) Spletni brskalniki Mozilla Firefox ali Google Chrome, nameščeni v vašem računalniku.
6) Morate vedeti, kako namestiti gonilnik Firefox Gecko ali spletni gonilnik Chrome.

Za izpolnjevanje zahtev 4, 5 in 6 preberite moj članek Uvod v selen s Pythonom 3 na Linuxhint.com.

V LinuxHintu lahko najdete veliko člankov o drugih temah.com. Ne pozabite jih preveriti, če potrebujete pomoč.

Nastavitev imenika projektov:

Če želite vse organizirati, ustvarite nov imenik projektov selener-css-selektor / kot sledi:

$ mkdir -pv selenium-css-selector / drivers

Pomaknite se do selener-css-selektor / imenik projekta, kot sledi:

$ cd selenium-css-selector /

Ustvarite navidezno okolje Python v imeniku projekta, kot sledi:

$ virtualenv .venv

Aktivirajte navidezno okolje na naslednji način:

$ vir .venv / bin / aktiviraj

Namestite knjižnico Selenium Python s pomočjo PIP3, kot sledi:

$ pip3 namesti selen

Prenesite in namestite ves potrebni spletni gonilnik v vozniki / imenik projekta. V članku sem razložil postopek prenosa in namestitve spletnih gonilnikov Uvod v selen s Pythonom 3. Če potrebujete pomoč, poiščite LinuxHint.com za ta članek.

Pridobite CSS Selector z orodjem za razvijalce Chrome:

V tem razdelku vam bom pokazal, kako z vgrajenim orodjem za razvijalce spletnega brskalnika Google Chrome poiščete izbirnik CSS elementa spletne strani, ki ga želite izbrati s selenijem.

Če želite izbirnik CSS dobiti s spletnim brskalnikom Google Chrome, odprite Google Chrome in obiščite spletno mesto, s katerega želite izvleči podatke. Nato pritisnite desni gumb miške (RMB) na prazno območje strani in kliknite na Preglejte odpreti Orodje za razvijalce za Chrome.

Lahko tudi pritisnete + Shift + jaz odpreti Orodje za razvijalce za Chrome.

Orodje za razvijalce za Chrome je treba odpreti.

Če želite poiskati predstavitev HTML-ja želenega elementa spletne strani, kliknite na Preglejte(), kot je označena na spodnjem posnetku zaslona.

Nato premaknite miškin kazalec nad želeni element spletne strani in pritisnite levi gumb miške (LMB), da ga izberete.

Predstavitev spletnega elementa, ki ste ga izbrali v HTML, bo označena v Elementi zavihek Orodje za razvijalce za Chrome kot lahko vidite na spodnjem posnetku zaslona.

Če želite dobiti izbirnik CSS želenega elementa, ga izberite v Elementi zavihek Orodje za razvijalce za Chrome in z desno miškino tipko kliknite (RMB). Nato izberite Kopirati > Izbirnik kopiranja kot je označeno na spodnjem posnetku zaslona.

Izbirnik CSS sem prilepil v urejevalnik besedil. Izbirnik CSS je videti, kot je prikazano na spodnjem posnetku zaslona.

Pridobite izbirnik CSS z orodjem za razvijalce Firefox:

V tem razdelku vam bom pokazal, kako z vgrajenim orodjem za razvijalce spletnega brskalnika Mozilla Firefox poiščete izbirnik CSS elementa spletne strani, ki ga želite izbrati s selenijem.

Če želite izbirnik CSS dobiti s pomočjo spletnega brskalnika Firefox, odprite Firefox in obiščite spletno mesto, s katerega želite izvleči podatke. Nato pritisnite desni gumb miške (RMB) na prazno območje strani in kliknite na Preglejte element (Q) odpreti Orodje za razvijalce Firefox.

Orodje za razvijalce Firefox je treba odpreti.

Če želite poiskati predstavitev HTML-ja želenega elementa spletne strani, kliknite na Preglejte(), kot je označena na spodnjem posnetku zaslona.

Nato premaknite miškin kazalec nad želeni element spletne strani in pritisnite levi gumb miške (LMB), da ga izberete.

Predstavitev spletnega elementa, ki ste ga izbrali v HTML, bo označena v Inšpektor zavihek Orodje za razvijalce Firefox kot lahko vidite na spodnjem posnetku zaslona.

Če želite dobiti izbirnik CSS želenega elementa, ga izberite v Inšpektor zavihek Orodje za razvijalce Firefox in z desno miškino tipko kliknite (RMB). Nato izberite Kopirati > Izbirnik CSS kot je označeno na spodnjem posnetku zaslona.

Izbirnik CSS želenega elementa bi moral izgledati nekako takole.

Izdvajanje podatkov s pomočjo CSS Selectorja s selenom:

V tem poglavju vam bom pokazal, kako izbrati elemente spletne strani in iz njih izvleči podatke s pomočjo izbirnikov CSS s knjižnico Selenium Python.

Najprej ustvarite nov skript Python ex00.py in vnesite naslednje vrstice kod.

iz spletnega pogona za uvoz selena
iz selena.spletni pogon.običajni.tipke za uvoz ključev
iz selena.spletni pogon.običajni.z uvozom Avtor
options = spletni pogon.Možnosti Chrome ()
opcije.brezglava = Res
brskalnik = spletni voznik.Chrome (izvršljiva_pot = "./ drivers / chromedriver ", options = options)
brskalnik.get ("https: // www.unixtimestamp.com / ")
timestamp = brskalnik.find_element_by_css_selector ('h3.besedilo-nevarnost: n-ti otrok (3) ')
print ('Trenutni časovni žig:% s'% (časovni žig.besedilo.split (") [0]))
brskalnik.zapri ()

Ko končate, shranite ex00.py Python skript.

Vrstica 1-3 uvozi vse zahtevane komponente selena.

Vrstica 5 ustvari objekt z možnostmi Chroma, vrstica 6 pa omogoča brezglavi način za spletni brskalnik Chrome.

Vrstica 8 ustvari Chrome brskalnik predmet z uporabo kromedriver binarni iz vozniki / imenik projekta.

Vrstica 10 brskalniku pove, naj naloži spletno mesto unixtimestamp.com.

Vrstica 12 z izbirnikom CSS poišče element, ki vsebuje podatke o časovnem žigu s strani, in ga shrani v časovni žig spremenljivka.

Vrstica 13 razčleni podatke o časovnem žigu iz elementa in jih natisne na konzolo.

Tako deluje struktura HTML podatkov časovnega žiga UNIX v unixtimestamp.com izgleda tako.

Vrstica 14 zapre brskalnik.

Zaženite skript Python ex00.py kot sledi:

$ python3 ex00.py

Kot vidite, se podatki o časovnem žigu natisnejo na zaslon.

Tukaj sem uporabil brskalnik.find_element (avtor, izbirnik) metoda.

Ker uporabljamo izbirnike CSS, bo prvi parameter Avtor.CSS_SELECTOR drugi parameter pa bo sam izbirnik CSS.

Namesto brskalnik.najdi_element () lahko uporabite tudi brskalnik.find_element_by_css_selector (izbirnik) metoda. Ta metoda za delovanje potrebuje le izbirnik CSS. Rezultat bo enak.

The brskalnik.najdi_element () in brskalnik.find_element_by_css_selector () metode se uporabljajo za iskanje in izbiro posameznega elementa na spletni strani. Če želite poiskati in izbrati več elementov s pomočjo izbirnikov CSS, morate to uporabiti brskalnik.najdi_elementi () in brskalnik.find_elements_by_css_selector () metode.

The brskalnik.najdi_elementi () metoda zavzame enake argumente kot brskalnik.najdi_element () metoda.

The brskalnik.find_elements_by_css_selector () metoda zavzame enak argument kot brskalnik.find_element_by_css_selector () metoda.

Oglejmo si primer pridobivanja seznama imen s pomočjo izbirnikov CSS iz generatorja naključnih imen.informacije s selenom.

Kot lahko vidite, ima neurejeni seznam ime razreda nameList. Torej, lahko uporabimo izbirnik CSS .seznam imen li , da izberete vsa imena na spletni strani.

Poglejmo si primer izbire več elementov s spletne strani s pomočjo izbirnikov CSS.

Ustvarite nov skript Python ex01.py in vanj vnesite naslednje vrstice kod.

iz spletnega pogona za uvoz selena
iz selena.spletni pogon.običajni.tipke za uvoz ključev
iz selena.spletni pogon.običajni.z uvozom Avtor
options = spletni pogon.Možnosti Chrome ()
opcije.brezglava = Res
brskalnik = spletni voznik.Chrome (izvršljiva_pot = "./ drivers / chromedriver ", možnosti = možnosti)
brskalnik.get ("http: // generator naključnih imen.info / ")
names = brskalnik.find_elements (avtor.CSS_SELECTOR, '.nameList li ')
za ime v imenih:
natisni (ime.besedilo)
brskalnik.zapri ()

Ko končate, shranite ex01.py Python skript.

Vrstica 1-8 je enaka kot v ex00.py Python skript. Torej jih ne bom več razlagal tukaj.

Vrstica 10 brskalniku pove, naj naloži spletno mesto generator naključnih imen.info.

Vrstica 12 izbere seznam imen s pomočjo brskalnik.najdi_elementi () metoda. Ta metoda uporablja izbirnik CSS .seznam imen li da poiščete seznam imen. Nato je seznam imen shranjen v imena spremenljivka.

V vrsticah 13 in 14 je a za zanka se uporablja za iteracijo skozi imena seznam in natisnite imena na konzoli.

Vrstica 16 zapre brskalnik.

Zaženite skript Python ex01.py kot sledi:

$ python3 ex01.py

Kot lahko vidite, so imena povzeta s spletne strani in natisnjena na konzoli.

Namesto uporabe brskalnik.najdi_elementi () lahko uporabite tudi brskalnik.find_elements_by_css_selector () metoda kot prej. Ta metoda za delovanje potrebuje le izbirnik CSS. Rezultat bo enak.

Osnove izbirnikov CSS:

Z orodjem za razvijalce Firefox ali spletnim brskalnikom Chrome lahko vedno najdete izbirnik CSS elementa spletne strani. Ta samodejno ustvarjeni izbirnik CSS morda ni tisto, kar želite. Včasih boste morda morali napisati izbirnik CSS.

V tem poglavju bom govoril o osnovah izbirnikov CSS, tako da boste na spletni strani razumeli, kaj določen izbirnik CSS izbira, in po potrebi napisali svoj izbirnik CSS po meri.

Če želite s pomočjo ID-ja izbrati element na spletni strani sporočilo, izbirnik CSS bo #message.

Izbirnik CSS .zelena bo izbral element z imenom razreda zelena.

Če želite izbrati element (class sporočilo) znotraj drugega elementa (class posoda), bo izbirnik CSS .posoda .sporočilo

Izbirnik CSS .sporočilo.uspeh bo izbral element, ki ima dva razreda CSS sporočilo in uspeh.

Če želite izbrati vse str oznake, lahko uporabite izbirnik CSS str.

Če želite izbrati samo str oznake znotraj div oznake, lahko uporabite izbirnik CSS div str

Če želite izbrati str oznake, ki so neposredni bratje in sestre div oznake, lahko uporabite izbirnik CSS div> str

Če želite izbrati vse razpon in str oznake, lahko uporabite izbirnik CSS p, razpon

Če želite izbrati str oznako takoj za div tag, lahko uporabite izbirnik CSS div + str

Če želite izbrati str oznaka po div tag, lahko uporabite izbirnik CSS div ~ str

Če želite izbrati vse str oznake, ki imajo ime razreda sporočilo, lahko uporabite izbirnik CSS str.sporočilo

Če želite izbrati vse razpon oznake, ki imajo ime razreda sporočilo, lahko uporabite izbirnik CSS razpon.sporočilo

Če želite izbrati vse elemente, ki imajo atribut href, lahko uporabite izbirnik CSS [href]

Če želite izbrati element, ki ima atribut ime in vrednost ime atribut je uporabniško ime, lahko uporabite izbirnik CSS [ime = ”uporabniško ime”]

Če želite izbrati vse elemente, ki imajo atribut višina in vrednost višina atribut, ki vsebuje podniz vscode, lahko uporabite izbirnik CSS [alt ~ = ”vscode”]

Če želite izbrati vse elemente, ki imajo href atribut in vrednost href atribut se začne z nizom https, lahko uporabite izbirnik CSS [href ^ = ”https”]

Če želite izbrati vse elemente, ki imajo href atribut in vrednost href atribut, ki se konča z nizom .com, lahko uporabite izbirnik CSS [href $ = ”.com ”]

Če želite izbrati vse elemente, ki imajo href atribut in vrednost href atribut ima podniz google, lahko uporabite izbirnik CSS [href * = ”google”]

Če želite izbrati prvo li oznaka znotraj ul tag, lahko uporabite izbirnik CSS ul li: prvi otrok

Če želite izbrati prvo li oznaka znotraj ul tag, lahko uporabite tudi izbirnik CSS ul li: n-ti otrok (1)

Če želite izbrati zadnjega li oznaka znotraj ul tag, lahko uporabite izbirnik CSS ul li: zadnji otrok

Če želite izbrati zadnjega li oznaka znotraj ul tag, lahko uporabite tudi izbirnik CSS ul li: nth-zadnji-otrok (1)

Če želite izbrati drugo li oznaka znotraj ul od začetka lahko uporabite izbirnik CSS ul li: nth-otrok (2)

Če želite izbrati tretjega li oznaka znotraj ul od začetka lahko uporabite izbirnik CSS ul li: n-ti otrok (3)

Če želite izbrati drugo li oznaka znotraj ul oznako, ki se začne od konca, lahko uporabite izbirnik CSS ul li: nth-zadnji-otrok (2)

Če želite izbrati tretjega li oznaka znotraj ul oznako, ki se začne od konca, lahko uporabite izbirnik CSS ul li: nth-zadnji-otrok (3)

To so najpogostejši izbirniki CSS. Uporabili jih boste skoraj pri vseh projektih Selenium. Obstaja veliko več izbirnikov CSS. Seznam vseh jih najdete v w3schools.com Referenca CSS izbirnikov.

Sklep:

V tem članku sem pokazal, kako poiskati in izbrati elemente spletne strani s pomočjo izbirnikov CSS s selenom. Prav tako sem razpravljal o osnovah izbirnikov CSS. Za svoje projekte Selenium bi morali imeti možnost udobne uporabe izbirnikov CSS.

Top 5 kartic za zajemanje iger
Vsi smo v YouTubu videli in oboževali pretakanje iger. PewDiePie, Jakesepticye in Markiplier so le nekateri izmed najboljših igralcev, ki so zaslužili...
Kako razviti igro na Linuxu
Pred desetletjem le malo uporabnikov Linuxa napoveduje, da bo njihov najljubši operacijski sistem nekoč priljubljena igralna platforma za komercialne ...
Odprtokodna vrata komercialnih igralnih sistemov
Brezplačne, odprtokodne in medplatformacijske igre, ki jih lahko uporabite za igranje starih, pa tudi nekaterih dokaj nedavnih naslovov iger. V tem čl...