Utilitzant XPath i Selenium per trobar un element a la pàgina HTML

Using Xpath Selenium Find An Element Html Page



XPath, també conegut com XML Path Language, és un llenguatge per seleccionar elements d'un document XML. Com que HTML i XML segueixen la mateixa estructura de documents, XPath també es pot utilitzar per seleccionar elements d'una pàgina web.

Localitzar i seleccionar elements de la pàgina web és la clau per al rascat web amb Selenium. Per localitzar i seleccionar elements de la pàgina web, podeu utilitzar selectors XPath a Selenium.







En aquest article, us mostraré com localitzar i seleccionar elements de pàgines web mitjançant selectors XPath a Selenium amb la biblioteca Python Selenium. Per tant, comencem.



Requisits previs:

Per provar les ordres i exemples d’aquest article, heu de tenir:



  1. Una distribució Linux (preferiblement Ubuntu) instal·lada al vostre ordinador.
  2. Python 3 instal·lat al vostre ordinador.
  3. PIP 3 instal·lat al vostre ordinador.
  4. Python virtualenv paquet instal·lat a l'ordinador.
  5. Els navegadors web Mozilla Firefox o Google Chrome instal·lats a l’ordinador.
  6. Heu de saber instal·lar el controlador Firefox Gecko o el controlador web Chrome.

Per complir els requisits 4, 5 i 6, llegiu el meu article Introducció al seleni a Python 3 . Podeu trobar molts articles sobre els altres temes a LinuxHint.com . Comproveu-los si necessiteu ajuda.





Configuració d'un directori de projectes:

Per mantenir-ho tot organitzat, creeu un directori de projectes nou seleni-xpath / com segueix:

$mkdir -pvseleni-xpath/conductors



Aneu a seleni-xpath / directori del projecte de la següent manera:

$cdseleni-xpath/

Creeu un entorn virtual Python al directori del projecte de la manera següent:

$virtualenv .venv

Activeu l'entorn virtual de la següent manera:

$font.venv/sóc/activar

Instal·leu la biblioteca Selenium Python mitjançant PIP3 de la següent manera:

$ pip3 instal·la seleni

Descarregueu i instal·leu tots els controladors web necessaris a conductors / directori del projecte. He explicat el procés de descàrrega i instal·lació de controladors web al meu article Introducció al seleni a Python 3 .

Obteniu el XPath Selector mitjançant l'eina per a desenvolupadors de Chrome:

En aquesta secció, us mostraré com trobar el selector XPath de l'element de pàgina web que voleu seleccionar amb Selenium mitjançant l'eina de desenvolupador integrada del navegador web Google Chrome.

Per obtenir el selector XPath mitjançant el navegador web Google Chrome, obriu Google Chrome i visiteu el lloc web del qual voleu extreure dades. A continuació, premeu el botó dret del ratolí (RMB) en una àrea buida de la pàgina i feu clic a Inspeccioneu per obrir el fitxer Eina per a desenvolupadors de Chrome .

També podeu prémer + Maj + Jo per obrir el fitxer Eina per a desenvolupadors de Chrome .

Eina per a desenvolupadors de Chrome s'hauria d'obrir.

Per trobar la representació HTML de l'element de pàgina web desitjat, feu clic a Inspeccioneu (

), tal com es marca a la captura de pantalla següent.

A continuació, passeu el cursor per sobre de l'element de pàgina web desitjat i premeu el botó esquerre del ratolí (LMB) per seleccionar-lo.

La representació HTML de l'element web que heu seleccionat es ressaltarà al fitxer Elements pestanya del fitxer Eina per a desenvolupadors de Chrome, com podeu veure a la captura de pantalla següent.

Per obtenir el selector XPath de l 'element desitjat, seleccioneu l' element a la llista Elements pestanya de Eina per a desenvolupadors de Chrome i feu-hi clic amb el botó dret (RMB). A continuació, seleccioneu Copia > Copia XPath, tal com es marca a la captura de pantalla següent.

He enganxat el selector XPath en un editor de text. El selector XPath es veu com es mostra a la captura de pantalla següent.

Obteniu el XPath Selector mitjançant l'eina per a desenvolupadors de Firefox:

En aquesta secció, us mostraré com trobar el selector XPath de l’element de pàgina web que voleu seleccionar amb Selenium mitjançant l’eina de desenvolupament integrada del navegador web Mozilla Firefox.

Per obtenir el selector XPath mitjançant el navegador web Firefox, obriu Firefox i visiteu el lloc web del qual voleu extreure dades. A continuació, premeu el botó dret del ratolí (RMB) en una àrea buida de la pàgina i feu clic a Inspecciona l'element (Q) per obrir el fitxer Eina per a desenvolupadors de Firefox .

Eina per a desenvolupadors de Firefox s'hauria d'obrir.

Per trobar la representació HTML de l'element de pàgina web desitjat, feu clic a Inspeccioneu (

), tal com es marca a la captura de pantalla següent.

A continuació, passeu el cursor per sobre de l'element de pàgina web desitjat i premeu el botó esquerre del ratolí (LMB) per seleccionar-lo.

La representació HTML de l'element web que heu seleccionat es ressaltarà al fitxer Inspector pestanya de Eina per a desenvolupadors de Firefox, com podeu veure a la captura de pantalla següent.

Per obtenir el selector XPath de l 'element desitjat, seleccioneu l' element a la llista Inspector pestanya de Eina per a desenvolupadors de Firefox i feu-hi clic amb el botó dret (RMB). A continuació, seleccioneu Copia > XPath tal com es marca a la captura de pantalla següent.

El selector XPath de l'element desitjat hauria de ser semblant a això.

Extracció de dades de pàgines web mitjançant XPath Selector:

En aquesta secció, us mostraré com seleccionar elements de la pàgina web i extreure’n dades mitjançant selectors XPath amb la biblioteca Selenium Python.

En primer lloc, creeu un nou script Python ex01.py i escriviu les línies de codis següents.

des deseleniimportaciócontrolador web
des deseleni.controlador web.comú.claus importacióClaus
des deseleni.controlador web.comú.per importacióPer
opcions=controlador web.Opcions de Chrome()
opcions.sense cap = És cert
navegador=controlador web.Chrome(ruta_executable='./drivers/chromedriver',
opcions=opcions)
navegador.aconseguir('Https://www.unixtimestamp.com/')
marca de temps=navegador.find_element_by_xpath('/ html / body / div [1] / div [1]
/ div [2] / div [1] / div / div / h3 [2] '
)
imprimir('Marca de temps actual:% s'%(marca de temps.text.dividir('')[0]))
navegador.Tanca()

Un cop hàgiu acabat, deseu el fitxer ex01.py Script Python.

La línia 1-3 importa tots els components de seleni necessaris.

La línia 5 crea un objecte Opcions de Chrome i la línia 6 habilita el mode sense cap per al navegador web Chrome.

La línia 8 crea un Chrome navegador objecte mitjançant el fitxer riu cromat binari des de conductors / directori del projecte.

La línia 10 indica al navegador que carregui el lloc web unixtimestamp.com.

La línia 12 troba l'element que conté les dades de marca de temps de la pàgina mitjançant el selector XPath i les emmagatzema a marca de temps variable.

La línia 13 analitza les dades de marca de temps de l'element i les imprimeix a la consola.

He copiat el selector XPath del marcat h2 element de unixtimestamp.com mitjançant l'eina per a desenvolupadors de Chrome.

La línia 14 tanca el navegador.

Executeu l'script Python ex01.py com segueix:

$ python3 ex01.py

Com podeu veure, les dades de la marca de temps s’imprimeixen a la pantalla.

Aquí he utilitzat el fitxer browser.find_element_by_xpath (selector) mètode. L'únic paràmetre d'aquest mètode és el selector, que és el selector XPath de l'element.

En lloc de browser.find_element_by_xpath () , també podeu utilitzar-lo browser.find_element (Per, selector) mètode. Aquest mètode necessita dos paràmetres. El primer paràmetre Per serà Per.XPATH ja que utilitzarem el selector XPath i el segon paràmetre selector serà el propi selector XPath. El resultat serà el mateix.

A veure com browser.find_element () el mètode funciona per al selector XPath, creeu un nou script Python ex02.py , copieu i enganxeu totes les línies de ex01.py a ex02.py i canviar línia 12 tal com es marca a la captura de pantalla següent.

Com podeu veure, l’escriptura Python ex02.py dóna el mateix resultat que ex01.py .

$ python3 ex02.py

El browser.find_element_by_xpath () i browser.find_element () s’utilitzen mètodes per trobar i seleccionar un sol element de les pàgines web. Si voleu trobar i seleccionar diversos elements mitjançant selectors XPath, haureu d'utilitzar-los browser.find_elements_by_xpath () o bé browser.find_elements () mètodes.

El browser.find_elements_by_xpath () el mètode adopta el mateix argument que el browser.find_element_by_xpath () mètode.

El browser.find_elements () adopta els mateixos arguments que el mètode browser.find_element () mètode.

Vegem un exemple d’extreure una llista de noms mitjançant el selector XPath de random-name-generator.info amb la biblioteca Selenium Python.

La llista no ordenada ( morir etiqueta) té un 10 al etiquetes dins de cadascuna que contenen un nom aleatori. El XPath per seleccionar tots els fitxers al etiquetes dins del fitxer morir etiqueta en aquest cas és // * [@ id = main] / div [3] / div [2] / ol // li

Vegem un exemple de selecció de diversos elements de la pàgina web mitjançant selectors XPath.

Creeu un nou script Python ex03.py i escriviu-hi les línies de codis següents.

des deseleniimportaciócontrolador web
des deseleni.controlador web.comú.claus importacióClaus
des deseleni.controlador web.comú.per importacióPer
opcions=controlador web.Opcions de Chrome()
opcions.sense cap = És cert
navegador=controlador web.Chrome(ruta_executable='./drivers/chromedriver',
opcions=opcions)
navegador.aconseguir('Http://random-name-generator.info/')
noms=navegador.find_elements_by_xpath('
// * [@ id = 'main'] / div [3] / div [2] / ol // li '
)
pernomdinsnoms:
imprimir(nom.text)
navegador.Tanca()

Un cop hàgiu acabat, deseu el fitxer ex03.py Script Python.

La línia 1-8 és la mateixa que a ex01.py Script Python. Per tant, no els tornaré a explicar aquí.

La línia 10 indica al navegador que carregui el lloc web random-name-generator.info.

La línia 12 selecciona la llista de noms mitjançant el botó browser.find_elements_by_xpath () mètode. Aquest mètode utilitza el selector XPath // * [@ id = main] / div [3] / div [2] / ol // li per trobar la llista de noms. A continuació, la llista de noms s'emmagatzema al fitxer noms variable.

A les línies 13 i 14, a per loop s'utilitza per iterar a través del fitxer noms llistar i imprimir els noms a la consola.

La línia 16 tanca el navegador.

Executeu l'script Python ex03.py com segueix:

$ python3 ex03.py

Com podeu veure, els noms s’extreuen de la pàgina web i s’imprimeixen a la consola.

En lloc d’utilitzar el fitxer browser.find_elements_by_xpath () , també podeu utilitzar el mètode browser.find_elements () mètode com abans. El primer argument d’aquest mètode és Per .XPATH, i el segon argument és el selector XPath.

Per experimentar browser.find_elements () mètode, creeu un nou script Python ex04.py , copieu tots els codis de ex03.py a ex04.py i canvieu la línia 12 tal i com es marca a la captura de pantalla següent.

Hauríeu d’obtenir el mateix resultat que abans.

$ python3 ex04.py

Conceptes bàsics del XPath Selector:

L'eina per a desenvolupadors del navegador web Firefox o Google Chrome genera automàticament el selector XPath. Però aquests selectors XPath de vegades no són suficients per al vostre projecte. En aquest cas, heu de saber què fa un determinat selector XPath per construir el selector XPath. En aquesta secció, us mostraré els conceptes bàsics dels selectors XPath. Aleshores, hauríeu de ser capaç de construir el vostre propi selector XPath.

Creeu un directori nou www / al directori del vostre projecte de la següent manera:

$mkdir -vwww

Creeu un fitxer nou web01.html al www / directori i escriviu les línies següents en aquest fitxer.


< html lang='A'>
< cap >
< meta joc de caràcters='UTF-8'>
< meta nom='finestra gràfica' contingut='ample = amplada del dispositiu, escala inicial = 1,0'>
< títol >Document HTML bàsic</ títol >
</ cap >
< cos >
< h1 >Hola món</ h1 >
</ cos >
</ html >

Un cop hàgiu acabat, deseu el fitxer web01.html dossier.

Executeu un servidor HTTP senzill al port 8080 mitjançant l'ordre següent:

$ python3 -m http.servidor--directori www /8080

El servidor HTTP s’hauria d’iniciar.

Hauríeu de poder accedir al fitxer web01.html mitjançant l’URL http: // localhost: 8080 / web01.html , com podeu veure a la captura de pantalla següent.

Mentre s’obri l’eina per a desenvolupadors de Firefox o Chrome, premeu + F per obrir el quadre de cerca. Podeu escriure el selector XPath aquí i veure què selecciona molt fàcilment. Vaig a utilitzar aquesta eina en tota aquesta secció.

Un selector XPath comença per un barra inclinada (/) la major part del temps. És com un arbre de directoris de Linux. El / és l'arrel de tots els elements de la pàgina web.

El primer element és el html . Per tant, el selector XPath / html selecciona la totalitat html etiqueta.

Dins del html etiqueta, tenim un cos etiqueta. El cos es pot seleccionar amb el selector XPath / html / body

El h1 la capçalera es troba dins de cos etiqueta. El h1 La capçalera es pot seleccionar amb el selector XPath / html / body / h1

Aquest tipus de selector XPath s’anomena selector de camí absolut. Al selector de camins absolut, heu de recórrer la pàgina web des de l'arrel (/) de la pàgina. L’inconvenient d’un selector de camins absolut és que fins i tot un lleuger canvi a l’estructura de la pàgina web pot fer que el selector XPath no sigui vàlid. La solució a aquest problema és un selector XPath relatiu o parcial.

Per veure com funciona el camí d'accés relatiu o parcial, creeu un fitxer nou web02.html al www / directori i escriviu-hi les línies de codis següents.


< html lang='A'>
< cap >
< meta joc de caràcters='UTF-8'>
< meta nom='finestra gràfica' contingut='ample = amplada del dispositiu, escala inicial = 1,0'>
< títol >Document HTML bàsic</ títol >
</ cap >
< cos >
< h1 >Hola món</ h1 >

< div >
< pàg >aquest és un missatge</ pàg >
</ div >

< div >
< span >Hola món</ span >
</ div >
</ cos >
</ html >

Un cop hàgiu acabat, deseu el fitxer web02.html arxiu-lo i carregueu-lo al navegador web.

Com podeu veure, el selector XPath // div / pàg selecciona el fitxer pàg etiqueta dins del fitxer div etiqueta. Aquest és un exemple de selector XPath relatiu.

El selector XPath relatiu comença per // . A continuació, especifiqueu l'estructura de l'element que voleu seleccionar. En aquest cas, div / pàg .

Tan, // div / pàg significa seleccionar el fitxer pàg element dins d'un div element, no importa el que passi abans.

També podeu seleccionar elements per atributs diferents, com ara identificador , classe , tipus, etc. mitjançant el selector XPath. Vegem com fer-ho.

Creeu un fitxer nou web03.html al www / directori i escriviu-hi les línies de codis següents.


< html lang='A'>
< cap >
< meta joc de caràcters='UTF-8'>
< meta nom='finestra gràfica' contingut='ample = amplada del dispositiu, escala inicial = 1,0'>
< títol > Document HTML bàsic</ títol >
</ cap >
< cos >
< h1 > Hola món</ h1 >
< div classe='contenidor1'>
< pàg > aquest és un missatge</ pàg >
< span > aquest és un altre missatge</ span >
</ div >
< div classe='contenidor1'>
< h2 > encapçalament2</ h2 >
< pàg > Algunes persones
és savi escollir els dolors, els problemes i els que no cauen en l’escollit
vols fàcils i altres serveis fantàstics? D’on o d’on va néixer?</ pàg >
</ div >

< span identificador='footer-msg'> aquest és un peu de pàgina</ span >
</peu de pàgina>
</ cos >
</ html >

Un cop hàgiu acabat, deseu el fitxer web03.html arxiu-lo i carregueu-lo al navegador web.

Suposem que voleu seleccionar tots els fitxers div elements que tenen classe nom contenidor1 . Per fer-ho, podeu utilitzar el selector XPath // div [@ class = ’container1 ′]

Com podeu veure, tinc 2 elements que coincideixen amb el selector XPath // div [@ class = ’container1 ′]

Per seleccionar la primera div element amb el fitxer classe nom contenidor1 , afegir [1] al final de la selecció XPath, tal com es mostra a la captura de pantalla següent.

De la mateixa manera, podeu seleccionar el segon div element amb el fitxer classe nom contenidor1 mitjançant el selector XPath // div [@ class = ’container1 ′] [2]

Podeu seleccionar elements per identificador també.

Per exemple, per seleccionar l'element que té el fitxer identificador de peu de pàgina-msg , podeu utilitzar el selector XPath // * [@ id = ’footer-msg’]

Aquí, el * abans [@ id = ’footer-msg’] s'utilitza per seleccionar qualsevol element independentment de la seva etiqueta.

Aquesta és la base del selector XPath. Ara hauríeu de ser capaç de crear el vostre propi selector XPath per als vostres projectes Selenium.

Conclusió:

En aquest article, us he mostrat com trobar i seleccionar elements de pàgines web mitjançant el selector XPath amb la biblioteca Selenium Python. També he comentat els selectors XPath més comuns. Després de llegir aquest article, us hauríeu de sentir força segurs seleccionant elements de les pàgines web mitjançant el selector XPath amb la biblioteca Selenium Python.