Paggamit ng XPath at Selenium upang Makahanap ng isang Elemento sa Pahina ng HTML

Using Xpath Selenium Find An Element Html Page



Ang XPath, na kilala rin bilang XML Path Language, ay isang wika para sa pagpili ng mga elemento mula sa isang XML na dokumento. Tulad ng pagsunod sa HTML at XML sa parehong istraktura ng dokumento, maaari ring magamit ang XPath upang pumili ng mga elemento mula sa isang web page.

Ang paghahanap at pagpili ng mga elemento mula sa web page ay ang susi sa pag-scrap ng web sa Selenium. Para sa paghanap at pagpili ng mga elemento mula sa web page, maaari mong gamitin ang mga piling XPath sa Selenium.







Sa artikulong ito, ipapakita ko sa iyo kung paano hanapin at pumili ng mga elemento mula sa mga web page na gumagamit ng mga piling XPath sa Selenium kasama ang silid silid ng silid ng Selenium. Kaya, magsimula na tayo.



Mga Pangangailangan:

Upang subukan ang mga utos at halimbawa ng artikulong ito, dapat mayroon ka,



  1. Isang pamamahagi ng Linux (mas mabuti ang Ubuntu) na naka-install sa iyong computer.
  2. Ang Python 3 na naka-install sa iyong computer.
  3. Naka-install ang PIP 3 sa iyong computer.
  4. Sawa virtualenv naka-install na package sa iyong computer.
  5. Ang mga browser ng Mozilla Firefox o Google Chrome na naka-install sa iyong computer.
  6. Dapat malaman kung paano i-install ang Firefox Gecko Driver o Chrome Web Driver.

Para sa pagtupad sa mga kinakailangan 4, 5, at 6, basahin ang aking artikulo Panimula sa Selenium sa Python 3 . Maaari kang makahanap ng maraming mga artikulo sa iba pang mga paksa sa LinuxHint.com . Tiyaking suriin ang mga ito kung kailangan mo ng anumang tulong.





Pagse-set up ng isang Direktoryo ng Proyekto:

Upang panatilihing maayos ang lahat, lumikha ng isang bagong direktoryo ng proyekto siliniyum-xpath / tulad ng sumusunod:

$mkdir -pvsiliniyum-xpath/mga driver



Mag-navigate sa siliniyum-xpath / direktoryo ng proyekto tulad ng sumusunod:

$CDsiliniyum-xpath/

Lumikha ng isang virtual na kapaligiran ng Python sa direktoryo ng proyekto tulad ng sumusunod:

$virtualenv .venv

Isaaktibo ang virtual na kapaligiran tulad ng sumusunod:

$pinagmulan.venv/am/buhayin

I-install ang Selenium Python library gamit ang PIP3 tulad ng sumusunod:

$ pip3 i-install ang siliniyum

I-download at i-install ang lahat ng kinakailangang web driver sa mga driver / direktoryo ng proyekto. Ipinaliwanag ko ang proseso ng pag-download at pag-install ng mga web driver sa aking artikulo Panimula sa Selenium sa Python 3 .

Kunin ang XPath Selector gamit ang Chrome Developer Tool:

Sa seksyong ito, ipapakita ko sa iyo kung paano makahanap ng XPath selector ng elemento ng web page na nais mong piliin sa Selenium gamit ang built-in na Tool ng Developer ng web browser ng Google Chrome.

Upang makuha ang tagapili ng XPath gamit ang web browser ng Google Chrome, buksan ang Google Chrome, at bisitahin ang web site kung saan mo nais kumuha ng data. Pagkatapos, pindutin ang kanang pindutan ng mouse (RMB) sa isang walang laman na lugar ng pahina at mag-click sa Siyasatin upang buksan ang Chrome Developer Tool .

Maaari mo ring pindutin + Shift + Ako upang buksan ang Chrome Developer Tool .

Chrome Developer Tool dapat buksan.

Upang makita ang representasyon ng HTML ng iyong nais na elemento ng web page, mag-click sa Siyasatin (

) icon, tulad ng minarkahan sa screenshot sa ibaba.

Pagkatapos, mag-hover sa iyong nais na elemento ng web page at pindutin ang kaliwang pindutan ng mouse (LMB) upang mapili ito.

Ang representasyon ng HTML ng sangkap ng web na iyong pinili ay mai-highlight sa Mga elemento tab ng Chrome Developer Tool, tulad ng nakikita mo sa screenshot sa ibaba.

Upang makuha ang tagapili ng XPath ng iyong nais na elemento, piliin ang elemento mula sa Mga elemento tab ng Chrome Developer Tool at pag-right click (RMB) dito. Pagkatapos, piliin Kopya > Kopyahin ang XPath, tulad ng minarkahan sa screenshot sa ibaba.

Na-paste ko ang XPath selector sa isang text editor. Ang tagapili ng XPath ay nakikita tulad ng ipinapakita sa screenshot sa ibaba.

Kunin ang XPath Selector gamit ang Firefox Developer Tool:

Sa seksyong ito, ipapakita ko sa iyo kung paano makahanap ng XPath selector ng elemento ng web page na nais mong piliin sa Selenium gamit ang built-in na Tool ng Developer ng web browser ng Mozilla Firefox.

Upang makuha ang tagapili ng XPath gamit ang Firefox web browser, buksan ang Firefox at bisitahin ang web site kung saan mo nais kumuha ng data. Pagkatapos, pindutin ang kanang pindutan ng mouse (RMB) sa isang walang laman na lugar ng pahina at mag-click sa Suriin ang Elemento (Q) upang buksan ang Firefox Developer Tool .

Firefox Developer Tool dapat buksan.

Upang makita ang representasyon ng HTML ng iyong nais na elemento ng web page, mag-click sa Siyasatin (

) icon, tulad ng minarkahan sa screenshot sa ibaba.

Pagkatapos, mag-hover sa iyong nais na elemento ng web page at pindutin ang kaliwang pindutan ng mouse (LMB) upang mapili ito.

Ang representasyon ng HTML ng sangkap ng web na iyong pinili ay mai-highlight sa Inspektor tab ng Firefox Developer Tool, tulad ng nakikita mo sa screenshot sa ibaba.

Upang makuha ang tagapili ng XPath ng iyong nais na elemento, piliin ang elemento mula sa Inspektor tab ng Firefox Developer Tool at pag-right click (RMB) dito. Pagkatapos, piliin Kopya > XPath tulad ng minarkahan sa screenshot sa ibaba.

Ang tagapili ng XPath ng iyong nais na elemento ay dapat magmukhang ganito.

Kinukuha ang Data mula sa Mga Pahina sa Web gamit ang XPath Selector:

Sa seksyong ito, ipapakita ko sa iyo kung paano pumili ng mga elemento ng web page at kumuha ng data mula sa kanila gamit ang mga piling XPath sa silid ng silid ng Selenium Python.

Una, lumikha ng isang bagong script ng Python ex01.py at i-type ang mga sumusunod na linya ng mga code.

mula sasiliniyumangkatwebdriver
mula sasiliniyumwebdriver.pangkaraniwan.mga susi angkatMga susi
mula sasiliniyumwebdriver.pangkaraniwan.ni angkatNi
mga pagpipilian=webdriver.Mga Opsyon ng Chrome()
mga pagpipilianwalang ulo = Totoo
browser=webdriver.Chrome(maipapatupad na_path='./drivers/chromedriver',
mga pagpipilian=mga pagpipilian)
browserkumuha ka('https://www.unixtimestamp.com/')
timestamp=browserfind_element_by_xpath('/ html / body / div [1] / div [1]
/ div [2] / div [1] / div / div / h3 [2] '
)
mag-print('Kasalukuyang timestamp:% s'%(timestamp.text.nahati(')[0]))
browsermalapit na()

Kapag tapos ka na, i-save ang ex01.py Python script.

Na-import ng linya 1-3 ang lahat ng kinakailangang mga sangkap ng Selenium.

Lumilikha ang Line 5 ng isang object ng Mga Pagpipilian ng Chrome, at ang linya 6 ay nagbibigay-daan sa mode na walang ulo para sa web browser ng Chrome.

Lumilikha ang Line 8 ng isang Chrome browser bagay gamit ang chromedriver binary mula sa mga driver / direktoryo ng proyekto.

Sinasabi ng linya 10 sa browser na mai-load ang website unixtimestamp.com.

Nahanap ng linya 12 ang elemento na mayroong data ng timestamp mula sa pahina gamit ang tagapili ng XPath at iniimbak ito sa timestamp variable.

Pinag-parse ng linya 13 ang data ng timestamp mula sa elemento at i-print ito sa console.

Kinopya ko ang tagapili ng XPath ng minarkahan h2 elemento mula sa unixtimestamp.com gamit ang Chrome Developer Tool.

Isinasara ng linya 14 ang browser.

Patakbuhin ang script ng Python ex01.py tulad ng sumusunod:

$ python3 ex01.py

Tulad ng nakikita mo, ang data ng timestamp ay nakalimbag sa screen.

Dito, ginamit ko na ang browser.find_element_by_xpath (selector) pamamaraan Ang tanging parameter ng pamamaraang ito ay ang tagapili, na kung saan ay ang XPath selector ng elemento.

Sa halip na browser.find_element_by_xpath () paraan, maaari mo ring gamitin browser.find_element (Ni, tagapili) pamamaraan Ang pamamaraang ito ay nangangailangan ng dalawang mga parameter. Ang unang parameter Ni magiging Ni.XPATH dahil gagamitin namin ang tagapili ng XPath, at ang pangalawang parameter tagapili ay ang pipili ng XPath mismo. Ang resulta ay magiging pareho.

Upang makita kung paano browser.find_element () gumagana ang pamamaraan para sa XPath selector, lumikha ng isang bagong script ng Python ex02.py , kopyahin at i-paste ang lahat ng mga linya mula sa ex01.py sa ex02.py at pagbabago linya 12 tulad ng minarkahan sa screenshot sa ibaba.

Tulad ng nakikita mo, ang script ng Python ex02.py nagbibigay ng parehong resulta bilang ex01.py .

$ python3 ex02.py

Ang browser.find_element_by_xpath () at browser.find_element () ginagamit ang mga pamamaraan upang maghanap at pumili ng isang solong elemento mula sa mga web page. Kung nais mong hanapin at pumili ng maraming elemento gamit ang mga XPath selectors, kailangan mong gamitin browser.find_elements_by_xpath () o browser.find_elements () paraan.

Ang browser.find_elements_by_xpath () ang pamamaraan ay tumatagal ng parehong argumento bilang ang browser.find_element_by_xpath () pamamaraan

Ang browser.find_elements () ang pamamaraan ay tumatagal ng parehong mga argumento bilang ang browser.find_element () pamamaraan

Tingnan natin ang isang halimbawa ng pagkuha ng isang listahan ng mga pangalan na gumagamit ng XPath selector mula sa random-name-generator.info kasama ang silid-aklatan ng Selenium Python.

Ang hindi naayos na listahan ( mamatay tag) ay mayroong 10 sa mga tag sa loob ng bawat naglalaman ng isang random na pangalan. Ang XPath upang piliin ang lahat ng sa mga tag sa loob ng mamatay ang tag sa kasong ito ay // * [@ id = main] / div [3] / div [2] / ol // li

Dumaan tayo sa isang halimbawa ng pagpili ng maraming elemento mula sa web page gamit ang mga piling XPath.

Lumikha ng isang bagong script sa Python ex03.py at i-type ang mga sumusunod na linya ng mga code dito.

mula sasiliniyumangkatwebdriver
mula sasiliniyumwebdriver.pangkaraniwan.mga susi angkatMga susi
mula sasiliniyumwebdriver.pangkaraniwan.ni angkatNi
mga pagpipilian=webdriver.Mga Opsyon ng Chrome()
mga pagpipilianwalang ulo = Totoo
browser=webdriver.Chrome(maipapatupad na_path='./drivers/chromedriver',
mga pagpipilian=mga pagpipilian)
browserkumuha ka('http://random-name-generator.info/')
mga pangalan=browserfind_elements_by_xpath('
// * [@ id = 'main'] / div [3] / div [2] / ol // li '
)
para sapangalansamga pangalan:
mag-print(pangalantext)
browsermalapit na()

Kapag tapos ka na, i-save ang ex03.py Python script.

Ang linya 1-8 ay kapareho ng sa ex01.py Python script. Kaya, hindi ko na ipapaliwanag muli ang mga ito dito.

Sinasabi ng linya 10 sa browser na mai-load ang website na random-name-generator.info.

Pinipili ng linya 12 ang listahan ng pangalan gamit ang browser.find_elements_by_xpath () pamamaraan Ang pamamaraang ito ay gumagamit ng tagapili ng XPath // * [@ id = main] / div [3] / div [2] / ol // li upang hanapin ang listahan ng pangalan. Pagkatapos, ang listahan ng pangalan ay nakaimbak sa mga pangalan variable.

Sa linya 13 at 14, a para sa loop ay ginagamit upang umulit sa pamamagitan ng mga pangalan ilista at i-print ang mga pangalan sa console.

Isinasara ng linya 16 ang browser.

Patakbuhin ang script ng Python ex03.py tulad ng sumusunod:

$ python3 ex03.py

Tulad ng nakikita mo, ang mga pangalan ay nakuha mula sa web page at naka-print sa console.

Sa halip na gamitin ang browser.find_elements_by_xpath () paraan, maaari mo ring gamitin ang browser.find_elements () pamamaraan tulad ng dati. Ang unang argumento ng pamamaraang ito ay Ni.XPATH, at ang pangalawang argumento ay ang XPath selector.

Upang mag-eksperimento sa browser.find_elements () pamamaraan, lumikha ng isang bagong script ng Python ex04.py , kopyahin ang lahat ng mga code mula sa ex03.py sa ex04.py , at palitan ang linya 12 na minarkahan sa screenshot sa ibaba.

Dapat kang makakuha ng parehong resulta tulad ng dati.

$ python3 ex04.py

Mga Pangunahing Kaalaman sa XPath Selector:

Ang Developer Tool ng Firefox o web browser ng Google Chrome ay awtomatikong bumubuo ng XPath selector. Ngunit ang mga tagapili ng XPath na ito kung minsan ay hindi sapat para sa iyong proyekto. Sa kasong iyon, dapat mong malaman kung ano ang ginagawa ng isang tiyak na tagapili ng XPath upang maitayo ang iyong tagapili ng XPath. Sa seksyong ito, ipapakita ko sa iyo ang mga pangunahing kaalaman sa mga piling XPath. Pagkatapos, dapat mong bumuo ng iyong sariling tagapili ng XPath.

Lumikha ng isang bagong direktoryo www / sa iyong direktoryo ng proyekto tulad ng sumusunod:

$mkdir -vwww

Lumikha ng isang bagong file web01.html nasa www / direktoryo at i-type ang mga sumusunod na linya sa file na iyon.


< html lang='sa'>
< ulo >
< meta charset='UTF-8'>
< meta pangalan='viewport' nilalaman='lapad = lapad ng aparato, paunang iskala = 1.0'>
< pamagat >Pangunahing Dokumento ng HTML</ pamagat >
</ ulo >
< katawan >
< h1 >Kamusta Mundo</ h1 >
</ katawan >
</ html >

Kapag tapos ka na, i-save ang web01.html file

Patakbuhin ang isang simpleng server ng HTTP sa port 8080 gamit ang sumusunod na utos:

$ python3 -m http.server--directory www /8080

Dapat magsimula ang HTTP server.

Dapat mong ma-access ang web01.html file gamit ang URL http: // localhost: 8080 / web01.html , tulad ng nakikita mo sa screenshot sa ibaba.

Habang binubuksan ang Firefox o Chrome Developer Tool, pindutin ang + F upang buksan ang search box. Maaari kang mag-type sa iyong XPath selector dito at makita kung ano ang napili nito nang napakadali. Gagamitin ko ang tool na ito sa buong seksyong ito.

Ang isang tagapili ng XPath ay nagsisimula sa a forward slash (/) madalas. Ito ay tulad ng isang puno ng direktoryo ng Linux. Ang / ang ugat ng lahat ng mga elemento sa web page.

Ang unang elemento ay ang html . Kaya, ang XPath selector / html pipili ng kabuuan html tag

Sa loob ng html tag, meron tayong katawan tag Ang katawan maaaring mapili ang tag sa tagapili ng XPath / html / katawan

Ang h1 ang header ay nasa loob ng katawan tag Ang h1 Maaaring mapili ang header gamit ang tagapili ng XPath / html / katawan / h1

Ang ganitong uri ng tagapili ng XPath ay tinatawag na isang ganap na tagapili ng landas. Sa ganap na tagapili ng landas, dapat mong daanan ang web page mula sa root (/) ng pahina. Ang kawalan ng isang ganap na tagapili ng landas ay kahit na isang bahagyang pagbabago sa istraktura ng web page ay maaaring gawing hindi wasto ang iyong tagapili ng XPath. Ang solusyon sa problemang ito ay isang kamag-anak o bahagyang tagapili ng XPath.

Upang makita kung paano gumagana ang kamag-anak na landas o bahagyang landas, lumikha ng isang bagong file web02.html nasa www / direktoryo at i-type ang mga sumusunod na linya ng mga code dito.


< html lang='sa'>
< ulo >
< meta charset='UTF-8'>
< meta pangalan='viewport' nilalaman='lapad = lapad ng aparato, paunang iskala = 1.0'>
< pamagat >Pangunahing Dokumento ng HTML</ pamagat >
</ ulo >
< katawan >
< h1 >Kamusta Mundo</ h1 >

< div >
< p >ito ay mensahe</ p >
</ div >

< div >
< span >hello mundo</ span >
</ div >
</ katawan >
</ html >

Kapag tapos ka na, i-save ang web02.html i-file at i-load ito sa iyong web browser.

Tulad ng nakikita mo, ang XPath selector // div / p pipili ng p tag sa loob ng div tag Ito ay isang halimbawa ng isang kamag-anak na XPath selector.

Nagsisimula ang tagapili ng kamag-anak na XPath sa // . Pagkatapos ay tinukoy mo ang istraktura ng elemento na nais mong piliin. Sa kasong ito, div / p .

Kaya, // div / p nangangahulugang piliin ang p elemento sa loob ng a div elemento, ay hindi mahalaga kung ano ang mauna bago ito.

Maaari ka ring pumili ng mga elemento ayon sa iba't ibang mga katangian tulad id , klase , uri, atbp gamit ang tagapili ng XPath. Tingnan natin kung paano ito gawin.

Lumikha ng isang bagong file web03.html nasa www / direktoryo at i-type ang mga sumusunod na linya ng mga code dito.


< html lang='sa'>
< ulo >
< meta charset='UTF-8'>
< meta pangalan='viewport' nilalaman='lapad = lapad ng aparato, paunang iskala = 1.0'>
< pamagat > Pangunahing Dokumento ng HTML</ pamagat >
</ ulo >
< katawan >
< h1 > Kamusta Mundo</ h1 >
< div klase='container1'>
< p > ito ang mensahe</ p >
< span > ito ay isa pang mensahe</ span >
</ div >
< div klase='container1'>
< h2 > heading2</ h2 >
< p > Ang ilang mga tao
matalino upang piliin ang mga sakit, ang mga problema, at ang mga hindi nahulog para sa isang pinili
hindi madaling flight at iba pang mahusay na mga serbisyo? Saan o saan siya ipinanganak?</ p >
</ div >

< span id='footer-msg'> ito ay isang footer</ span >
</footer>
</ katawan >
</ html >

Kapag tapos ka na, i-save ang web03.html i-file at i-load ito sa iyong web browser.

Sabihin nating nais mong piliin ang lahat ng div mga elemento na mayroong klase pangalan lalagyan1 . Upang magawa iyon, maaari mong gamitin ang tagapili ng XPath // div [@ class = ’container1 ′]

Tulad ng nakikita mo, mayroon akong 2 elemento na tumutugma sa tagapili ng XPath // div [@ class = ’container1 ′]

Upang piliin ang una div elemento kasama ang klase pangalan lalagyan1 , idagdag [1] sa dulo ng XPath select, tulad ng ipinakita sa screenshot sa ibaba.

Sa parehong paraan, maaari mong piliin ang pangalawa div elemento kasama ang klase pangalan lalagyan1 gamit ang tagapili ng XPath // div [@ class = ’container1 ′] [2]

Maaari kang pumili ng mga elemento ayon sa id din.

Halimbawa, upang piliin ang elemento na mayroong id ng footer-msg , maaari mong gamitin ang XPath selector // * [@ id = ’footer-msg’]

Narito, ang * dati pa [@ id = ’footer-msg’] ay ginagamit upang pumili ng anumang elemento anuman ang kanilang tag.

Iyon ang mga pangunahing kaalaman sa tagapili ng XPath. Ngayon, dapat kang lumikha ng iyong sariling tagapili ng XPath para sa iyong mga proyekto sa Selenium.

Konklusyon:

Sa artikulong ito, ipinakita ko sa iyo kung paano makahanap at pumili ng mga elemento mula sa mga web page gamit ang tagapili ng XPath gamit ang silid silid ng Selenium Python. Tinalakay ko rin ang pinakakaraniwang mga tagapili ng XPath. Matapos basahin ang artikulong ito, dapat mong pakiramdam na medyo may kumpiyansa sa pagpili ng mga elemento mula sa mga web page gamit ang tagapili ng XPath sa silid-aklatan ng Selenium Python.