Použitie XPath a selénu na nájdenie prvku na stránke HTML

Using Xpath Selenium Find An Element Html Page



XPath, známy tiež ako XML Path Language, je jazyk na výber prvkov z dokumentu XML. Pretože HTML a XML majú rovnakú štruktúru dokumentov, XPath je možné použiť aj na výber prvkov z webovej stránky.

Umiestnenie a výber prvkov z webovej stránky je kľúčom k zoškrabaniu webu pomocou selénu. Na vyhľadanie a výber prvkov z webovej stránky môžete v programe Selenium použiť selektory XPath.







V tomto článku vám ukážem, ako vyhľadávať a vyberať prvky z webových stránok pomocou selektorov XPath v programe Selenium s knižnicou Selenium python. Začnime teda.



Predpoklady:

Na vyskúšanie príkazov a príkladov tohto článku musíte mať:



  1. Vo vašom počítači je nainštalovaná distribúcia Linuxu (najlepšie Ubuntu).
  2. Na vašom počítači je nainštalovaný Python 3.
  3. PIP 3 nainštalovaný vo vašom počítači.
  4. Python virtualenv balík nainštalovaný vo vašom počítači.
  5. Vo vašom počítači sú nainštalované webové prehliadače Mozilla Firefox alebo Google Chrome.
  6. Musíte vedieť, ako nainštalovať ovládač Firefox Gecko alebo Chrome Web Driver.

Ak chcete splniť požiadavky 4, 5 a 6, prečítajte si môj článok Úvod do selénu v Pythone 3 . Môžete nájsť mnoho článkov na ďalšie témy LinuxHint.com . Nezabudnite ich skontrolovať, ak potrebujete pomoc.





Nastavenie adresára projektu:

Aby bolo všetko v poriadku, vytvorte nový adresár projektu selén-xpath/ nasledovne:

$mkdir -pvselén-xpath/vodiči



Prejdite na selén-xpath/ adresár projektu takto:

$CDselén-xpath/

Vytvorte virtuálne prostredie Python v adresári projektu nasledovne:

$virtualenv .venv

Virtuálne prostredie aktivujte nasledovne:

$zdroj.venv/dopoludnia/Aktivovať

Nainštalujte knižnicu Selenium Python pomocou PIP3 nasledovne:

$ pip3 nainštalujte selén

Stiahnite a nainštalujte si požadovaný webový ovládač do súboru vodiči/ adresár projektu. V článku som vysvetlil proces sťahovania a inštalácie webových ovládačov Úvod do selénu v Pythone 3 .

Získajte nástroj XPath Selector pomocou Nástroja pre vývojárov prehliadača Chrome:

V tejto časti vám ukážem, ako nájsť selektor XPath prvku webovej stránky, ktorý chcete vybrať pomocou programu Selenium, pomocou vstavaného Nástroja pre vývojárov vo webovom prehliadači Google Chrome.

Ak chcete získať volič XPath pomocou webového prehliadača Google Chrome, otvorte prehliadač Google Chrome a navštívte webovú stránku, z ktorej chcete extrahovať údaje. Potom kliknite pravým tlačidlom myši (RMB) na prázdnu oblasť stránky a kliknite na Skontrolovať otvoriť Chrome Developer Tool .

Môžete tiež stlačiť + Smena + Ja otvoriť Chrome Developer Tool .

Chrome Developer Tool by mala byť otvorená.

Ak chcete nájsť HTML reprezentáciu požadovaného prvku webovej stránky, kliknite na Skontrolovať (

), ako je označené na obrázku nižšie.

Potom umiestnite kurzor myši na požadovaný prvok webovej stránky a vyberte ho stlačením ľavého tlačidla myši (LMB).

HTML reprezentácia webového prvku, ktorý ste vybrali, bude zvýraznená v Prvky karta karty Chrome Developer Tool, ako vidíte na obrázku nižšie.

Ak chcete získať volič XPath požadovaného prvku, vyberte prvok z Prvky záložka z Chrome Developer Tool a kliknite naň pravým tlačidlom myši (RMB). Potom vyberte Kopírovať > Skopírujte XPath, ako je vyznačené na obrázku nižšie.

Volič XPath som vložil do textového editora. Selektor XPath vyzerá ako na obrázku nižšie.

Stiahnite si XPath Selector pomocou Firefox Developer Tool:

V tejto časti vám ukážem, ako nájsť selektor XPath prvku webovej stránky, ktorý chcete vybrať pomocou programu Selenium, pomocou vstavaného Nástroja pre vývojárov webového prehliadača Mozilla Firefox.

Ak chcete získať volič XPath pomocou webového prehliadača Firefox, otvorte Firefox a navštívte webovú stránku, z ktorej chcete extrahovať údaje. Potom kliknite pravým tlačidlom myši (RMB) na prázdnu oblasť stránky a kliknite na Skontrolovať prvok (Q) otvoriť Firefox Developer Tool .

Firefox Developer Tool by mala byť otvorená.

Ak chcete nájsť HTML reprezentáciu požadovaného prvku webovej stránky, kliknite na Skontrolovať (

), ako je označené na obrázku nižšie.

Potom umiestnite kurzor myši na požadovaný prvok webovej stránky a vyberte ho stlačením ľavého tlačidla myši (LMB).

HTML reprezentácia webového prvku, ktorý ste vybrali, bude zvýraznená v Inšpektor záložka z Firefox Developer Tool, ako vidíte na obrázku nižšie.

Ak chcete získať volič XPath požadovaného prvku, vyberte prvok z Inšpektor záložka z Firefox Developer Tool a kliknite naň pravým tlačidlom myši (RMB). Potom vyberte Kopírovať > XPath ako je vyznačené na obrázku nižšie.

Selektor XPath požadovaného prvku by mal vyzerať asi takto.

Extrahovanie údajov z webových stránok pomocou programu XPath Selector:

V tejto časti vám ukážem, ako vyberať prvky webových stránok a extrahovať z nich údaje pomocou selektorov XPath s knižnicou Selenium Python.

Najprv vytvorte nový skript Python ex01.py a zadajte nasledujúce riadky kódov.

odselénimportwebdriver
odselén.webdriver.spoločný.kľúče importKľúče
odselén.webdriver.spoločný.od importOd
možnosti=webdriver.Možnosti Chrome()
možnosti.bezhlavý = Pravda
prehliadač=webdriver.Chrome(spustiteľná_cesta=„./drivers/chromedriver“,
možnosti=možnosti)
prehliadač.dostať(„https://www.unixtimestamp.com/“)
časová značka=prehliadač.find_element_by_xpath('/html/body/div [1]/div [1]
/div [2]/div [1]/div/div/h3 [2] '
)
vytlačiť('Aktuálna časová pečiatka: %s'%(časová značka.text.rozdeliť('')[0]))
prehliadač.Zavrieť()

Keď skončíte, uložte súbor ex01.py Skript Python.

Riadok 1-3 dováža všetky požadované zložky selénu.

Riadok 5 vytvára objekt Možnosti prehliadača Chrome a riadok 6 umožňuje režim bez hlavy pre webový prehliadač Chrome.

Riadok 8 vytvára prehliadač Chrome prehliadač objekt pomocou chromedriver binárne z vodiči/ adresár projektu.

Riadok 10 hovorí prehliadaču, aby načítal webovú stránku unixtimestamp.com.

Riadok 12 vyhľadá prvok, ktorý má údaje časovej pečiatky zo stránky, pomocou voliča XPath a uloží ho do súboru časová značka premenná.

Riadok 13 analyzuje údaje časovej pečiatky z prvku a vytlačí ich na konzolu.

Skopíroval som volič XPath označených h2 prvok z unixtimestamp.com pomocou Nástroja pre vývojárov Chrome.

Riadok 14 zatvorí prehliadač.

Spustite skript Python ex01.py nasledovne:

$ python3 ex01.py

Ako vidíte, údaje o časovej pečiatke sa vytlačia na obrazovku.

Tu som použil browser.find_element_by_xpath (selektor) metóda. Jediným parametrom tejto metódy je volič, ktorý je selektor prvku XPath pre prvok.

Namiesto browser.find_element_by_xpath () metódu, môžete tiež použiť browser.find_element (Podľa, selektor) metóda. Táto metóda potrebuje dva parametre. Prvý parameter Od bude By.XPATH pretože budeme používať selektor XPath a druhý parameter volič bude samotný volič XPath. Výsledok bude rovnaký.

Ak chcete vidieť, ako browser.find_element () metóda funguje pre selektor XPath, vytvorte nový skript Python ex02.py , skopírujte a prilepte všetky riadky z ex01.py do ex02.py a zmeniť riadok 12 ako je vyznačené na obrázku nižšie.

Ako vidíte, skript Python ex02.py dáva rovnaký výsledok ako ex01.py .

$ python3 ex02.py

The browser.find_element_by_xpath () a browser.find_element () Na nájdenie a výber jedného prvku z webových stránok sa používajú metódy. Ak chcete nájsť a vybrať viac prvkov pomocou voličov XPath, musíte použiť browser.find_elements_by_xpath () alebo browser.find_elements () metódy.

The browser.find_elements_by_xpath () metóda má rovnaký argument ako browser.find_element_by_xpath () metóda.

The browser.find_elements () metóda používa rovnaké argumenty ako browser.find_element () metóda.

Pozrime sa na príklad extrahovania zoznamu mien pomocou selektora XPath z random-name-generator.info s knižnicou Selenium Python.

Neusporiadaný zoznam ( zomrieť tag) má 10 na tagy vo vnútri obsahujúce náhodný názov. XPath na výber všetkých na štítky vo vnútri zomrieť tag v tomto prípade je //*[@id = main]/div [3]/div [2]/ol // li

Pozrime sa na príklad výberu viacerých prvkov z webovej stránky pomocou selektorov XPath.

Vytvorte nový skript Python ex03.py a zadajte doň nasledujúce riadky kódov.

odselénimportwebdriver
odselén.webdriver.spoločný.kľúče importKľúče
odselén.webdriver.spoločný.od importOd
možnosti=webdriver.Možnosti Chrome()
možnosti.bezhlavý = Pravda
prehliadač=webdriver.Chrome(spustiteľná_cesta=„./drivers/chromedriver“,
možnosti=možnosti)
prehliadač.dostať('http://random-name-generator.info/')
mená=prehliadač.find_elements_by_xpath('
//*[@id = 'main']/div [3]/div [2]/ol // li '
)
prenázovvmená:
vytlačiť(názov.text)
prehliadač.Zavrieť()

Keď skončíte, uložte súbor ex03.py Skript Python.

Riadok 1-8 je rovnaký ako v ex01.py Skript Python. Nebudem ich tu teda znova vysvetľovať.

Riadok 10 hovorí prehliadaču, aby načítal webovú stránku random-name-generator.info.

Riadok 12 vyberie zoznam mien pomocou browser.find_elements_by_xpath () metóda. Táto metóda používa selektor XPath //*[@id = main]/div [3]/div [2]/ol // li nájsť zoznam mien. Potom sa zoznam mien uloží do súboru mená premenná.

V riadkoch 13 a 14 a pre slučka sa používa na iteráciu cez mená zoznam a vytlačte si mená na konzolu.

Riadok 16 zatvorí prehliadač.

Spustite skript Python ex03.py nasledovne:

$ python3 ex03.py

Ako vidíte, názvy sú extrahované z webovej stránky a vytlačené na konzole.

Namiesto použitia browser.find_elements_by_xpath () metódu, môžete tiež použiť browser.find_elements () metóda ako predtým. Prvým argumentom tejto metódy je Autor: XPATH, a druhý argument je selektor XPath.

Experimentovať s browser.find_elements () metóda, vytvorte nový skript Python ex04.py , skopírujte všetky kódy z ex03.py do ex04.py , a zmeňte riadok 12 tak, ako je to znázornené na obrázku nižšie.

Mali by ste dosiahnuť rovnaký výsledok ako predtým.

$ python3 ex04.py

Základy programu XPath Selector:

Nástroj pre vývojárov webového prehliadača Firefox alebo Google Chrome generuje selektor XPath automaticky. Tieto selektory XPath však niekedy pre váš projekt nepostačujú. V takom prípade musíte vedieť, čo určitý selektor XPath robí na zostavenie vášho voliča XPath. V tejto časti vám ukážem základy selektorov XPath. Potom by ste mali byť schopní vytvoriť si vlastný volič XPath.

Vytvorte nový adresár www/ v adresári projektu nasledovne:

$mkdir -vwww

Vytvorte nový súbor web01.html v www/ adresára a do tohto súboru napíšte nasledujúce riadky.


< html lang='na'>
< hlava >
< meta znaková sada=„UTF-8“>
< meta názov='výrez' obsah='width = device-width, initial-scale = 1.0'>
< titul >Základný dokument HTML</ titul >
</ hlava >
< telo >
< h1 >Ahoj Svet</ h1 >
</ telo >
</ html >

Keď skončíte, uložte súbor web01.html súbor.

Spustite jednoduchý server HTTP na porte 8080 pomocou nasledujúceho príkazu:

$ python3 -m http.server--adresár www/8080

Server HTTP by sa mal spustiť.

Mali by ste mať prístup k web01.html súbor pomocou adresy URL http: // localhost: 8080/web01.html , ako vidíte na obrázku nižšie.

Keď je otvorený Firefox alebo Chrome Developer Tool, stlačte + F otvorte vyhľadávacie pole. Tu môžete zadať svoj volič XPath a veľmi ľahko zistiť, čo vyberá. Tento nástroj použijem v celej tejto časti.

Selektor XPath začína na a lomka (/) väčšinu času. Je to ako adresárový strom Linuxu. The / je koreňom všetkých prvkov na webovej stránke.

Prvým prvkom je html . Takže selektor XPath /html vyberie celý html tag.

Vnútri html tag, máme a telo tag. The telo značku je možné vybrať pomocou voliča XPath /html/body

The h1 hlavička je vo vnútri telo tag. The h1 hlavičku je možné zvoliť pomocou voliča XPath /html/body/h1

Tento typ selektora XPath sa nazýva selektor absolútnej cesty. V programe na výber absolútnej cesty musíte webovú stránku prejsť z koreňa (/) stránky. Nevýhodou selektora absolútnej cesty je, že aj malá zmena štruktúry webovej stránky môže spôsobiť, že váš volič XPath bude neplatný. Riešením tohto problému je relatívny alebo čiastočný volič XPath.

Ak chcete zistiť, ako funguje relatívna alebo čiastočná cesta, vytvorte nový súbor web02.html v www/ adresár a zadajte doň nasledujúce riadky kódov.


< html lang='na'>
< hlava >
< meta znaková sada=„UTF-8“>
< meta názov='výrez' obsah='width = device-width, initial-scale = 1.0'>
< titul >Základný dokument HTML</ titul >
</ hlava >
< telo >
< h1 >Ahoj Svet</ h1 >

< div >
< p >toto je správa</ p >
</ div >

< div >
< rozpätie >ahoj svet</ rozpätie >
</ div >
</ telo >
</ html >

Keď skončíte, uložte súbor web02.html súbor a načítajte ho do webového prehliadača.

Ako vidíte, volič XPath // div/p vyberie p štítok vo vnútri div tag. Toto je príklad relatívneho selektora XPath.

Relatívny volič XPath začína na // . Potom zadáte štruktúru prvku, ktorý chcete vybrať. V tomto prípade, div/p .

Takže, // div/p znamená vybrať p prvok vo vnútri a div prvok, nezáleží na tom, čo pred ním stojí.

Môžete tiež vybrať prvky podľa rôznych atribútov, ako sú id , trieda , typ, atď. pomocou voliča XPath. Pozrime sa, ako to urobiť.

Vytvorte nový súbor web03.html v www/ adresár a zadajte doň nasledujúce riadky kódov.


< html lang='na'>
< hlava >
< meta znaková sada=„UTF-8“>
< meta názov='výrez' obsah='width = device-width, initial-scale = 1.0'>
< titul > Základný dokument HTML</ titul >
</ hlava >
< telo >
< h1 > Ahoj svet</ h1 >
< div trieda='container1'>
< p > toto je správa</ p >
< rozpätie > toto je ďalšia správa</ rozpätie >
</ div >
< div trieda='container1'>
< h2 > nadpis2</ h2 >
< p > Nejakí ľudia
múdre je vybrať si bolesti, starosti a tie, ktoré nespadajú do vyvoleného
nemáte ľahké lety a ďalšie skvelé služby? Odkiaľ alebo odkiaľ sa narodil?</ p >
</ div >

< rozpätie id='footer-msg'> toto je päta</ rozpätie >
</päta>
</ telo >
</ html >

Keď skončíte, uložte súbor web03.html súbor a načítajte ho do webového prehliadača.

Povedzme, že chcete vybrať všetky div prvky, ktoré majú trieda názov kontajner1 . Na to môžete použiť volič XPath // div [@class = ‘container1 ′]

Ako vidíte, mám 2 prvky, ktoré zodpovedajú voliču XPath // div [@class = ‘container1 ′]

Na výber prvého div prvok s trieda názov kontajner1 , pridať [1] na konci cesty XPath vyberte, ako je to znázornené na obrázku nižšie.

Rovnakým spôsobom môžete vybrať druhý div prvok s trieda názov kontajner1 pomocou voliča XPath // div [@class = ‘container1 ′] [2]

Prvky môžete vybrať pomocou id tiež.

Ak chcete napríklad vybrať prvok, ktorý má príponu id z správa päty , môžete použiť volič XPath //*[@id = ‘footer-msg’]

Tu, * predtým [@id = ‘footer-msg’] sa používa na výber akéhokoľvek prvku bez ohľadu na jeho značku.

To sú základy selektora XPath. Teraz by ste mali byť schopní vytvoriť si vlastný volič XPath pre svoje projekty selénu.

Záver:

V tomto článku som vám ukázal, ako nájsť a vybrať prvky z webových stránok pomocou selektora XPath s knižnicou Selenium Python. Tiež som diskutoval o najbežnejších selektoroch XPath. Po prečítaní tohto článku by ste sa mali cítiť celkom sebavedomo pri výbere prvkov z webových stránok pomocou selektora XPath s knižnicou Selenium Python.