Phenquestions
Předpoklady:
Chcete-li vyzkoušet příkazy a příklady tohoto článku, musíte mít,
1) Ve vašem počítači je nainstalována distribuce Linuxu (nejlépe Ubuntu).
2) Python 3 nainstalovaný ve vašem počítači.
3) PIP 3 nainstalovaný ve vašem počítači.
4) Python virtuální balíček nainstalovaný v počítači.
5) Ve vašem počítači jsou nainstalovány webové prohlížeče Mozilla Firefox nebo Google Chrome.
6) Musíte vědět, jak nainstalovat ovladač Firefox Gecko nebo webový ovladač Chrome.
Pro splnění požadavků 4, 5 a 6 si přečtěte můj článek Úvod do selenu v Pythonu 3 ve službě Linuxhint.com.
Na LinuxHint najdete mnoho článků o dalších tématech.com. Nezapomeňte je zkontrolovat, pokud potřebujete pomoc.
Nastavení adresáře projektu:
Chcete-li mít vše uspořádané, vytvořte nový adresář projektu selen-css-selector / jak následuje:
$ mkdir -pv selenium-css-selector / ovladače
Přejděte na selen-css-selector / adresář projektu takto:
$ cd selenium-css-selector /
Vytvořte virtuální prostředí Pythonu v adresáři projektu následujícím způsobem:
$ virtualenv .venv
Aktivujte virtuální prostředí následujícím způsobem:
$ zdroj .venv / bin / aktivovat
Nainstalujte knihovnu Selenium Python pomocí PIP3 následujícím způsobem:
$ pip3 nainstalujte selen
Stáhněte a nainstalujte všechny požadované webové ovladače v Řidiči/ adresář projektu. Proces stahování a instalace webových ovladačů jsem vysvětlil ve svém článku Úvod do selenu v Pythonu 3. Pokud potřebujete pomoc, hledejte na LinuxTip.com pro tento článek.
Získejte CSS Selector pomocí nástroje pro vývojáře Chrome:
V této části vám ukážu, jak najít selektor CSS prvku webové stránky, který chcete vybrat, pomocí selenu pomocí integrovaného vývojářského nástroje webového prohlížeče Google Chrome.
Chcete-li získat selektor CSS pomocí webového prohlížeče Google Chrome, otevřete Google Chrome a navštivte web, ze kterého chcete extrahovat data. Poté stiskněte pravé tlačítko myši (RMB) na prázdné ploše stránky a klikněte na Kontrolovat otevřít Chrome Developer Tool.
Můžete také stisknout
Chrome Developer Tool by měl být otevřen.
Chcete-li najít reprezentaci HTML požadovaného prvku webové stránky, klikněte na ikonu Kontrolovatikona () označená na snímku obrazovky níže.
Poté umístěte kurzor na požadovaný prvek webové stránky a vyberte jej levým tlačítkem myši (LMB).
Reprezentace HTML vybraného webového prvku bude zvýrazněna v Elementy záložka Chrome Developer Tool jak vidíte na snímku obrazovky níže.
Chcete-li získat selektor CSS požadovaného prvku, vyberte prvek z Elementy záložka Chrome Developer Tool a klikněte na něj pravým tlačítkem (RMB). Poté vyberte kopírovat > Výběr kopírování jak je uvedeno na snímku obrazovky níže.
Vložil jsem selektor CSS do textového editoru. Selektor CSS vypadá, jak je znázorněno na následujícím obrázku.
Získejte CSS Selector pomocí vývojářského nástroje Firefoxu:
V této části vám ukážu, jak pomocí selenu pomocí volitelného vývojového nástroje webového prohlížeče Mozilla Firefox najít selektor CSS prvku webové stránky, který chcete vybrat.
Chcete-li získat selektor CSS pomocí webového prohlížeče Firefox, otevřete Firefox a navštivte web, ze kterého chcete extrahovat data. Poté stiskněte pravé tlačítko myši (RMB) na prázdné ploše stránky a klikněte na Zkontrolovat prvek (Q) otevřít Nástroj pro vývojáře Firefoxu.
Nástroj pro vývojáře Firefoxu by měl být otevřen.
Chcete-li najít reprezentaci HTML požadovaného prvku webové stránky, klikněte na ikonu Kontrolovat() ikona označená na snímku obrazovky níže.
Poté umístěte kurzor na požadovaný prvek webové stránky a vyberte jej levým tlačítkem myši (LMB).
Reprezentace HTML vybraného webového prvku bude zvýrazněna v Inspektor záložka Nástroj pro vývojáře Firefoxu jak vidíte na snímku obrazovky níže.
Chcete-li získat selektor CSS požadovaného prvku, vyberte prvek z Inspektor záložka Nástroj pro vývojáře Firefoxu a klikněte na něj pravým tlačítkem (RMB). Poté vyberte kopírovat > Selektor CSS jak je uvedeno na snímku obrazovky níže.
Selektor CSS požadovaného prvku by měl vypadat asi takto.
Extrakce dat pomocí CSS Selector se selenem:
V této části vám ukážu, jak vybrat prvky webových stránek a extrahovat z nich data pomocí selektorů CSS s knihovnou Selenium Python.
Nejprve vytvořte nový skript v Pythonu ex00.py a zadejte následující řádky kódů.
z webového ovladače pro import selenuze selenu.webdriver.běžný.klíče importovat klíče
ze selenu.webdriver.běžný.podle importu
options = webdriver.ChromeOptions ()
možnosti.bezhlavý = pravda
prohlížeč = webdriver.Chrome (executable_path = "./ drivers / chromedriver ", options = options)
prohlížeč.get ("https: // www.unixtimestamp.com / ")
timestamp = prohlížeč.find_element_by_css_selector ('h3.text-danger: nth-child (3) ')
print ('Aktuální časové razítko:% s'% (časové razítko.text.split (") [0]))
prohlížeč.zavřít()
Až budete hotovi, uložte ex00.py Skript v Pythonu.
Řádek 1-3 importuje všechny požadované komponenty selenu.
Řádek 5 vytváří objekt Možnosti Chrome a řádek 6 umožňuje bezhlavý režim pro webový prohlížeč Chrome.
Řádek 8 vytváří Chrome prohlížeč objekt pomocí chromedriver binární z Řidiči/ adresář projektu.
Řádek 10 říká prohlížeči, aby načetl unixtimestamp webové stránky.com.
Řádek 12 vyhledá prvek, který má data časové značky ze stránky, pomocí voliče CSS a uloží jej do časové razítko proměnná.
Řádek 13 analyzuje data časových razítek z prvku a vytiskne je na konzole.
Takto vypadá struktura HTML dat časového razítka UNIX v unixtimestamp.com vypadá.
Řádek 14 zavře prohlížeč.
Spusťte skript Pythonu ex00.py jak následuje:
$ python3 ex00.py
Jak vidíte, data časového razítka se vytisknou na obrazovku.
Zde jsem použil prohlížeč.find_element (podle, selektor) metoda.
Protože používáme selektory CSS, bude první parametr Podle.CSS_SELECTOR a druhým parametrem bude samotný selektor CSS.
Namísto prohlížeč.find_element () metodu, můžete také použít prohlížeč.find_element_by_css_selector (selektor) metoda. Tato metoda k fungování potřebuje pouze selektor CSS. Výsledek bude stejný.
The prohlížeč.find_element () a prohlížeč.find_element_by_css_selector () metody se používají k vyhledání a výběru jediného prvku z webové stránky. Pokud chcete najít a vybrat více prvků pomocí selektorů CSS, musíte použít prohlížeč.find_elements () a prohlížeč.find_elements_by_css_selector () metody.
The prohlížeč.find_elements () metoda bere stejné argumenty jako prohlížeč.find_element () metoda.
The prohlížeč.find_elements_by_css_selector () metoda má stejný argument jako prohlížeč.find_element_by_css_selector () metoda.
Podívejme se na příklad extrakce seznamu jmen pomocí selektorů CSS z generátoru náhodných jmen.informace se selenem.
Jak vidíte, neuspořádaný seznam má název třídy jmenný seznam. Můžeme tedy použít selektor CSS .nameList li vyberte všechna jména z webové stránky.
Pojďme si projít příklad výběru více prvků z webové stránky pomocí selektorů CSS.
Vytvořte nový skript v Pythonu ex01.py a zadejte do něj následující řádky kódů.
z webového ovladače pro import selenuze selenu.webdriver.běžný.klíče importovat klíče
ze selenu.webdriver.běžný.podle importu
options = webdriver.ChromeOptions ()
možnosti.bezhlavý = pravda
prohlížeč = webdriver.Chrome (executable_path = "./ drivers / chromedriver ", options = options)
prohlížeč.get ("http: // generátor náhodných jmen.informace / ")
names = prohlížeč.find_elements (podle.CSS_SELECTOR, '.nameList li ')
pro jméno v jménech:
tisk (jméno.text)
prohlížeč.zavřít()
Až budete hotovi, uložte ex01.py Skript v Pythonu.
Řádek 1-8 je stejný jako v ex00.py Skript v Pythonu. Takže je zde nebudu znovu vysvětlovat.
Řádek 10 říká prohlížeči, aby načetl generátor náhodných jmen webových stránek.informace.
Řádek 12 vybírá seznam jmen pomocí prohlížeč.find_elements () metoda. Tato metoda používá selektor CSS .nameList li vyhledejte seznam jmen. Poté se seznam jmen uloží do složky jména proměnná.
V řádcích 13 a 14, a pro smyčka se používá k iteraci přes jména seznam a tisk názvů na konzole.
Řádek 16 zavře prohlížeč.
Spusťte skript Pythonu ex01.py jak následuje:
$ python3 ex01.py
Jak vidíte, jména jsou extrahována z webové stránky a vytištěna na konzole.
Místo použití prohlížeč.find_elements () metoda, můžete také použít prohlížeč.find_elements_by_css_selector () metoda jako dříve. Tato metoda k fungování potřebuje pouze selektor CSS. Výsledek bude stejný.
Základy selektorů CSS:
Selektor CSS prvku webové stránky můžete kdykoli najít pomocí Nástroje pro vývojáře ve Firefoxu nebo ve webovém prohlížeči Chrome. Tento automaticky generovaný selektor CSS nemusí být tím, co chcete. Někdy budete možná muset napsat selektor CSS.
V této části budu hovořit o základech selektorů CSS, abyste pochopili, co určitý selektor CSS vybírá z webové stránky, a v případě potřeby napište svůj vlastní selektor CSS.
Pokud chcete vybrat prvek z webové stránky pomocí ID zpráva, selektor CSS bude #zpráva.
Selektor CSS .zelená vybere prvek pomocí názvu třídy zelená.
Pokud chcete vybrat prvek (třídu zpráva) uvnitř jiného prvku (třída kontejner), bude výběr CSS .kontejner .zpráva
Selektor CSS .zpráva.úspěch vybere prvek, který má dvě třídy CSS zpráva a úspěch.
Chcete-li vybrat všechny p značky, můžete použít selektor CSS p.
Chcete-li vybrat pouze p značky uvnitř div tagy, můžete použít selektor CSS div p
Chcete-li vybrat p tagy, které jsou přímými sourozenci souboru div značky, můžete použít selektor CSS div> str
Chcete-li vybrat všechny rozpětí a p značky, můžete použít selektor CSS p, rozpětí
Chcete-li vybrat p značka bezprostředně za div tag, můžete použít selektor CSS div + str
Chcete-li vybrat p značka po div tag, můžete použít selektor CSS div ~ str
Chcete-li vybrat všechny p značky, které mají název třídy zpráva, můžete použít selektor CSS p.zpráva
Chcete-li vybrat všechny rozpětí značky, které mají název třídy zpráva, můžete použít selektor CSS rozpětí.zpráva
Chcete-li vybrat všechny prvky, které mají atribut href, můžete použít selektor CSS [href]
Chcete-li vybrat prvek, který má atribut název a hodnota název atribut je uživatelské jméno, můžete použít selektor CSS [name = ”uživatelské jméno”]
Chcete-li vybrat všechny prvky, které mají atribut alt a hodnota alt atribut obsahující podřetězec vscode, můžete použít selektor CSS [alt ~ = ”vscode”]
Chcete-li vybrat všechny prvky, které mají href atribut a hodnota href atribut začíná řetězcem https, můžete použít selektor CSS [href ^ = ”https”]
Chcete-li vybrat všechny prvky, které mají href atribut a hodnota href atribut končící řetězcem .com, můžete použít selektor CSS [href $ = ”.com “]
Chcete-li vybrat všechny prvky, které mají href atribut a hodnota href atribut má podřetězec Google, můžete použít selektor CSS [href * = ”google”]
Pokud chcete vybrat první li značka uvnitř ul tag, můžete použít selektor CSS ul li: první dítě
Pokud chcete vybrat první li značka uvnitř ul tag, můžete také použít selektor CSS ul li: nth-child (1)
Pokud chcete vybrat poslední li značka uvnitř ul tag, můžete použít selektor CSS ul li: poslední dítě
Pokud chcete vybrat poslední li značka uvnitř ul tag, můžete také použít selektor CSS ul li: nth-last-child (1)
Pokud chcete vybrat druhý li značka uvnitř ul od začátku můžete použít selektor CSS ul li: nth-child (2)
Pokud chcete vybrat třetí li značka uvnitř ul od začátku můžete použít selektor CSS ul li: nth-child (3)
Pokud chcete vybrat druhý li značka uvnitř ul od začátku, můžete použít selektor CSS ul li: nth-last-child (2)
Pokud chcete vybrat třetí li značka uvnitř ul od začátku, můžete použít selektor CSS ul li: nth-last-child (3)
Toto jsou nejběžnější selektory CSS. Zjistíte, že je používáte téměř na všech selenových projektech. Existuje mnohem více selektorů CSS. Seznam všech najdete ve w3schools.com CSS Selectors Reference.
Závěr:
V tomto článku jsem ukázal, jak vyhledat a vybrat prvky webových stránek pomocí selektorů CSS se selenem. Také jsem diskutoval o základech selektorů CSS. Měli byste být schopni pohodlně používat selektory CSS pro své projekty selenu.
