Phenquestions
Predpoklady:
Ak chcete vyskúšať príkazy a príklady tohto článku, musíte mať,
1) Vo vašom počítači je nainštalovaná distribúcia Linuxu (najlepšie Ubuntu).
2) Vo vašom počítači je nainštalovaný Python 3.
3) Vo vašom počítači je nainštalovaný program PIP 3.
4) Python virtualenv balík nainštalovaný vo vašom počítači.
5) Vo vašom počítači sú nainštalované webové prehľadávače Mozilla Firefox alebo Google Chrome.
6) Musíte vedieť, ako nainštalovať ovládač Firefox Gecko alebo webový ovládač Chrome.
Pre splnenie požiadaviek 4, 5 a 6 si prečítajte môj článok Úvod do selénu v Pythone 3 v Linuxhint.com.
Mnoho článkov o ďalších témach nájdete na stránkach LinuxHint.com. Ak potrebujete pomoc, nezabudnite ich skontrolovať.
Nastavenie adresára projektu:
Ak chcete mať všetko usporiadané, vytvorte nový adresár projektu selén-css-selektor / nasledovne:
$ mkdir -pv selén-css-selektor / ovládače
Prejdite na ikonu selén-css-selektor / adresár projektu nasledovne:
$ cd selén-css-selektor /
Vytvorte virtuálne prostredie Pythonu v adresári projektu takto:
$ virtualenv .venv
Aktivujte virtuálne prostredie nasledovne:
$ zdroj .venv / bin / aktivovať
Nainštalujte knižnicu selénu Python pomocou PIP3 nasledovne:
$ pip3 nainštalujte selén
Stiahnite a nainštalujte všetky požadované webové ovládače v vodiči / adresár projektu. V mojom článku som vysvetlil proces sťahovania a inštalácie webových ovládačov Úvod do selénu v Pythone 3. Ak potrebujete pomoc, hľadajte ďalej LinuxHint.com pre ten clanok.
Získajte výber CSS pomocou nástroja pre vývojárov prehliadača Chrome:
V tejto časti vám ukážem, ako pomocou selénu nájsť selektor CSS elementu webovej stránky, ktorý chcete vybrať, pomocou zabudovaného vývojárskeho nástroja webového prehliadača Google Chrome.
Ak chcete získať selektor CSS pomocou webového prehliadača Google Chrome, otvorte prehliadač Google Chrome a navštívte web, z ktorého chcete extrahovať údaje. Potom stlačte pravé tlačidlo myši (RMB) na prázdnej časti stránky a kliknite na Skontrolujte otvoriť Chrome Developer Tool.
Môžete tiež stlačiť
Chrome Developer Tool by mali byť otvorené.
Ak chcete nájsť zastúpenie HTML požadovaného prvku webovej stránky, kliknite na ikonu Skontrolujteikona () vyznačená na snímke obrazovky nižšie.
Potom umiestnite kurzor myši nad požadovaný prvok webovej stránky a vyberte ho ľavým tlačidlom myši (LMB).
HTML reprezentácia webového prvku, ktorý ste vybrali, bude zvýraznená v Prvky záložka Chrome Developer Tool ako vidíte na snímke obrazovky nižšie.
Ak chcete získať selektor CSS požadovaného prvku, vyberte ho v zozname Prvky záložka Chrome Developer Tool a kliknite na ňu pravým tlačidlom myši (RMB). Potom vyberte Kópia > Selektor kopírovania ako je vyznačené na snímke obrazovky nižšie.
Vložil som selektor CSS do textového editora. Selektor CSS vyzerá tak, ako je to znázornené na snímke obrazovky nižšie.
Získajte CSS Selector pomocou vývojového nástroja pre Firefox:
V tejto časti vám ukážem, ako pomocou selénu nájsť selektor CSS elementu webovej stránky, ktorý chcete vybrať, pomocou zabudovaného vývojárskeho nástroja webového prehliadača Mozilla Firefox.
Ak chcete získať selektor CSS pomocou webového prehliadača Firefox, otvorte Firefox a navštívte webovú stránku, z ktorej chcete extrahovať údaje. Potom stlačte pravé tlačidlo myši (RMB) na prázdnej časti stránky a kliknite na Skontrolujte prvok (Q) otvoriť Nástroj pre vývojárov Firefoxu.
Nástroj pre vývojárov Firefoxu by mali byť otvorené.
Ak chcete nájsť zastúpenie HTML požadovaného prvku webovej stránky, kliknite na ikonu Skontrolujteikona () vyznačená na snímke obrazovky nižšie.
Potom umiestnite kurzor myši nad požadovaný prvok webovej stránky a vyberte ho ľavým tlačidlom myši (LMB).
HTML reprezentácia webového prvku, ktorý ste vybrali, bude zvýraznená v Inšpektor záložka Nástroj pre vývojárov Firefoxu ako vidíte na snímke obrazovky nižšie.
Ak chcete získať selektor CSS požadovaného prvku, vyberte ho v zozname Inšpektor záložka Nástroj pre vývojárov Firefoxu a kliknite na ňu pravým tlačidlom myši (RMB). Potom vyberte Kópia > Selektor CSS ako je vyznačené na snímke obrazovky nižšie.
Selektor CSS požadovaného prvku by mal vyzerať asi takto.
Extrahovanie údajov pomocou selektora CSS so selénom:
V tejto časti vám ukážem, ako vyberať prvky webových stránok a extrahovať z nich údaje pomocou selektorov CSS s knižnicou Selenium Python.
Najskôr vytvorte nový skript v jazyku Python ex00.py a zadajte nasledujúce riadky kódov.
z webového ovládača na selén na importzo selénu.webdriver.bežné.kľúče na import kľúčov
zo selénu.webdriver.bežné.importom do
options = webdriver.ChromeOptions ()
možnosti.bezhlavý = Pravda
prehliadač = webdriver.Chrome (executable_path = "./ drivers / chromedriver ", možnosti = možnosti)
prehliadač.get ("https: // www.unixtimestamp.com / ")
timestamp = prehliadač.find_element_by_css_selector ('h3.text-danger: nth-child (3) ')
print ('Aktuálna časová známka:% s'% (časová známka.text.split (") [0]))
prehliadač.Zavrieť()
Po dokončení uložte súbor ex00.py Skript v jazyku Python.
Riadok 1-3 importuje všetky požadované komponenty selénu.
Riadok 5 vytvára objekt Možnosti prehliadača Chrome a riadok 6 umožňuje bezhlavý režim webového prehliadača Chrome.
Riadok 8 vytvára Chrome prehliadač objekt pomocou chromedriver binárne z vodiči / adresár projektu.
Riadok 10 informuje prehliadač, aby načítal webovú stránku unixtimestamp.com.
Riadok 12 vyhľadá prvok, ktorý má zo stránky údaje časových značiek, pomocou selektora CSS a uloží ich do súboru časová značka premenná.
Riadok 13 analyzuje údaje časovej pečiatky z prvku a vytlačí ich na konzolu.
Takto vyzerá štruktúra HTML dát časovej pečiatky UNIX v unixtimestamp.com vyzerá ako.
Riadok 14 zavrie prehliadač.
Spustite skript v jazyku Python ex00.py nasledovne:
$ python3 ex00.py
Ako vidíte, údaje o časovej pečiatke sa tlačia na obrazovku.
Tu som použil prehliadač.find_element (podľa, selektor) metóda.
Pretože používame selektory CSS, bude prvý parameter Autor:.CSS_SELECTOR a druhým parametrom bude samotný selektor CSS.
Namiesto prehliadač.find_element () metódu, môžete tiež použiť prehliadač.find_element_by_css_selector (selektor) metóda. Táto metóda vyžaduje iba selektor CSS. Výsledok bude rovnaký.
The prehliadač.find_element () a prehliadač.find_element_by_css_selector () Na vyhľadanie a výber jedného prvku z webovej stránky sa používajú metódy. Ak chcete nájsť a vybrať viac prvkov pomocou selektorov CSS, musíte použiť prehliadač.find_elements () a prehliadač.find_elements_by_css_selector () metódy.
The prehliadač.find_elements () metóda má rovnaké argumenty ako prehliadač.find_element () metóda.
The prehliadač.find_elements_by_css_selector () metóda má rovnaký argument ako prehliadač.find_element_by_css_selector () metóda.
Pozrime sa na príklad extrakcie zoznamu mien pomocou selektorov CSS z generátora náhodných mien.info so selénom.
Ako vidíte, neusporiadaný zoznam má názov triedy zoznam mien. Môžeme teda použiť selektor CSS .nameList li vyberte všetky mená z webovej stránky.
Prejdime si príklad výberu viacerých prvkov z webovej stránky pomocou selektorov CSS.
Vytvorte nový skript v jazyku Python ex01.py a zadajte do neho nasledujúce riadky kódov.
z webového ovládača na selén na importzo selénu.webdriver.bežné.kľúče na import kľúčov
zo selénu.webdriver.bežné.importom do
options = webdriver.ChromeOptions ()
možnosti.bezhlavý = Pravda
prehliadač = webdriver.Chrome (executable_path = "./ drivers / chromedriver ", možnosti = možnosti)
prehliadač.get ("http: // generátor náhodných mien.Info/")
mená = prehliadač.find_elements (podľa.CSS_SELECTOR, “.nameList li ')
pre meno v menách:
tlač (meno.text)
prehliadač.Zavrieť()
Po dokončení uložte súbor ex01.py Skript v jazyku Python.
Riadok 1-8 je rovnaký ako v ex00.py Skript v jazyku Python. Takže ich tu už nebudem vysvetľovať.
Riadok 10 informuje prehliadač, aby načítal generátor náhodných mien webových stránok.Info.
Riadok 12 vyberie zoznam mien pomocou prehliadač.find_elements () metóda. Táto metóda využíva selektor CSS .nameList li vyhľadať zoznam mien. Potom sa zoznam mien uloží do priečinka mien premenná.
V riadkoch 13 a 14 sa a pre slučka sa používa na iteráciu cez mien zoznam a vytlačte mená na konzolu.
Riadok 16 zavrie prehliadač.
Spustite skript v jazyku Python ex01.py nasledovne:
$ python3 ex01.py
Ako vidíte, mená sú extrahované z webovej stránky a vytlačené na konzole.
Namiesto použitia prehliadač.find_elements () metódou, môžete použiť aj prehliadač.find_elements_by_css_selector () metóda ako predtým. Táto metóda vyžaduje iba selektor CSS. Výsledok bude rovnaký.
Základy selektorov CSS:
Selektor CSS prvku webovej stránky môžete kedykoľvek nájsť pomocou nástroja pre vývojárov vo Firefoxe alebo vo webovom prehliadači Chrome. Tento automaticky generovaný selektor CSS nemusí byť to, čo chcete. Možno budete musieť niekedy napísať svoj selektor CSS.
V tejto časti budem hovoriť o základoch selektorov CSS, aby ste pochopili, čo určitý selektor CSS vyberá z webovej stránky, a v prípade potreby napíšte svoj vlastný selektor CSS.
Ak chcete vybrať prvok z webovej stránky pomocou ID správa, selektor CSS bude # správa.
Selektor CSS .zelená vyberie prvok pomocou názvu triedy zelená.
Ak chcete vybrať prvok (trieda správa) vo vnútri iného prvku (trieda kontajner), bude výber CSS .kontajner .správa
Selektor CSS .správa.úspech vyberie prvok, ktorý má dve triedy CSS správa a úspech.
Ak chcete vybrať všetky p značiek, môžete použiť selektor CSS p.
Vyberte iba ikonu p značky vo vnútri div značiek, môžete použiť selektor CSS div p
Ak chcete vybrať p značky, ktoré sú priamymi súrodencami značky div značiek, môžete použiť selektor CSS div> str
Ak chcete vybrať všetky rozpätie a p značiek, môžete použiť selektor CSS p, rozpätie
Ak chcete vybrať p značka ihneď po div tag, môžete použiť selektor CSS div + str
Ak chcete vybrať p značka po div tag, môžete použiť selektor CSS div ~ str
Ak chcete vybrať všetky p značky, ktoré majú názov triedy správa, môžete použiť selektor CSS p.správa
Ak chcete vybrať všetky rozpätie značky, ktoré majú názov triedy správa, môžete použiť selektor CSS rozpätie.správa
Ak chcete vybrať všetky prvky, ktoré majú tento atribút href, môžete použiť selektor CSS [href]
Ak chcete vybrať prvok, ktorý má atribút názov a hodnota názov atribút je používateľské meno, môžete použiť selektor CSS [name = ”používateľské meno”]
Ak chcete vybrať všetky prvky, ktoré majú tento atribút alt a hodnota alt atribút obsahujúci podreťazec vscode, môžete použiť selektor CSS [alt ~ = ”vscode”]
Ak chcete vybrať všetky prvky, ktoré majú href atribút a hodnota href atribút začína reťazcom https, môžete použiť selektor CSS [href ^ = ”https”]
Ak chcete vybrať všetky prvky, ktoré majú href atribút a hodnota href atribút končiaci reťazcom .com, môžete použiť selektor CSS [href $ = ”.com “]
Ak chcete vybrať všetky prvky, ktoré majú href atribút a hodnota href atribút má podreťazec google, môžete použiť selektor CSS [href * = ”google”]
Ak chcete vybrať prvý li značka vo vnútri ul tag, môžete použiť selektor CSS ul li: prvé dieťa
Ak chcete vybrať prvý li značka vo vnútri ul tag, môžete tiež použiť selektor CSS ul li: n -te dieťa (1)
Ak chcete vybrať posledný li značka vo vnútri ul tag, môžete použiť selektor CSS ul li: posledné dieťa
Ak chcete vybrať posledný li značka vo vnútri ul tag, môžete použiť aj selektor CSS ul li: n-posledné dieťa (1)
Ak chcete vybrať druhú li značka vo vnútri ul od začiatku môžete použiť selektor CSS ul li: n-dieťa (2)
Ak chcete zvoliť tretí li značka vo vnútri ul od začiatku môžete použiť selektor CSS ul li: n-dieťa (3)
Ak chcete vybrať druhú li značka vo vnútri ul od konca, môžete použiť selektor CSS ul li: n-posledné dieťa (2)
Ak chcete zvoliť tretí li značka vo vnútri ul od konca, môžete použiť selektor CSS ul li: n-posledné dieťa (3)
Toto sú najbežnejšie selektory CSS. Nájdete ich takmer pri všetkých selénových projektoch. Selektorov CSS je oveľa viac. Zoznam všetkých nájdete v serveri w3schools.com Referencia výberu CSS.
Záver:
V tomto článku som ukázal, ako vyhľadať a vybrať prvky webových stránok pomocou selektorov CSS so selénom. Diskutoval som tiež o základoch selektorov CSS. Mali by ste byť schopní pohodlne používať selektory CSS pre svoje selénové projekty.
