Selenio

Uso de XPath y Selenium para encontrar un elemento en una página HTML

Uso de XPath y Selenium para encontrar un elemento en una página HTML
XPath, también conocido como XML Path Language, es un lenguaje para seleccionar elementos de un documento XML. Como HTML y XML siguen la misma estructura de documento, XPath también se puede utilizar para seleccionar elementos de una página web.

Ubicar y seleccionar elementos de la página web es la clave para el web scraping con Selenium. Para localizar y seleccionar elementos de la página web, puede utilizar selectores XPath en Selenium.

En este artículo, le mostraré cómo ubicar y seleccionar elementos de páginas web usando selectores XPath en Selenium con la biblioteca de Python de Selenium. Entonces empecemos.

Requisitos previos:

Para probar los comandos y ejemplos de este artículo, debe tener,

  1. Una distribución de Linux (preferiblemente Ubuntu) instalada en su computadora.
  2. Python 3 instalado en su computadora.
  3. PIP 3 instalado en su computadora.
  4. Pitón virtualenv paquete instalado en su computadora.
  5. Navegadores web Mozilla Firefox o Google Chrome instalados en su computadora.
  6. Debe saber cómo instalar el controlador Firefox Gecko o el controlador web de Chrome.

Para cumplir con los requisitos 4, 5 y 6, lea mi artículo Introducción al selenio en Python 3. Puede encontrar muchos artículos sobre otros temas en LinuxHint.com. Asegúrese de revisarlos si necesita ayuda.

Configuración de un directorio de proyectos:

Para mantener todo organizado, cree un nuevo directorio de proyectos selenium-xpath / como sigue:

$ mkdir -pv selenium-xpath / drivers

Navega al selenium-xpath / directorio del proyecto de la siguiente manera:

$ cd selenium-xpath /

Cree un entorno virtual de Python en el directorio del proyecto de la siguiente manera:

$ virtualenv .venv

Active el entorno virtual de la siguiente manera:

$ fuente .venv / bin / activar

Instale la biblioteca Selenium Python usando PIP3 de la siguiente manera:

$ pip3 instalar selenium

Descargue e instale todos los controladores web necesarios en el conductores / directorio del proyecto. He explicado el proceso de descarga e instalación de controladores web en mi artículo Introducción al selenio en Python 3.

Obtenga XPath Selector usando Chrome Developer Tool:

En esta sección, le mostraré cómo encontrar el selector XPath del elemento de la página web que desea seleccionar con Selenium utilizando la herramienta de desarrollo incorporada del navegador web Google Chrome.

Para obtener el selector XPath con el navegador web Google Chrome, abra Google Chrome y visite el sitio web del que desea extraer los datos. Luego, presione el botón derecho del mouse (RMB) en un área vacía de la página y haga clic en Inspeccionar para abrir el Herramienta para desarrolladores de Chrome.

También puede presionar + Cambiar + I para abrir el Herramienta para desarrolladores de Chrome.

Herramienta para desarrolladores de Chrome debe ser abierto.

Para encontrar la representación HTML de su elemento de página web deseado, haga clic en el Inspeccionar(

) icono, como se marca en la captura de pantalla siguiente.

Luego, coloque el cursor sobre el elemento de la página web que desee y presione el botón izquierdo del mouse (LMB) para seleccionarlo.

La representación HTML del elemento web que ha seleccionado se resaltará en el Elementos pestaña de la Herramienta para desarrolladores de Chrome, como puede ver en la captura de pantalla a continuación.

Para obtener el selector XPath de su elemento deseado, seleccione el elemento de la Elementos pestaña de Herramienta para desarrolladores de Chrome y haga clic derecho (RMB) en él. Luego, seleccione Dupdo > Copiar XPath, como se marca en la captura de pantalla a continuación.

He pegado el selector XPath en un editor de texto. El selector XPath se ve como se muestra en la captura de pantalla a continuación.

Obtenga XPath Selector usando Firefox Developer Tool:

En esta sección, le mostraré cómo encontrar el selector XPath del elemento de la página web que desea seleccionar con Selenium utilizando la herramienta de desarrollo incorporada del navegador web Mozilla Firefox.

Para obtener el selector XPath con el navegador web Firefox, abra Firefox y visite el sitio web del que desea extraer los datos. Luego, presione el botón derecho del mouse (RMB) en un área vacía de la página y haga clic en Inspeccionar elemento (Q) para abrir el Herramienta de desarrollo de Firefox.

Herramienta de desarrollo de Firefox debe ser abierto.

Para encontrar la representación HTML de su elemento de página web deseado, haga clic en el Inspeccionar(

), como se marca en la captura de pantalla a continuación.

Luego, coloque el cursor sobre el elemento de la página web que desee y presione el botón izquierdo del mouse (LMB) para seleccionarlo.

La representación HTML del elemento web que ha seleccionado se resaltará en el Inspector pestaña de Herramienta de desarrollo de Firefox, como puede ver en la captura de pantalla a continuación.

Para obtener el selector XPath de su elemento deseado, seleccione el elemento de la Inspector pestaña de Herramienta de desarrollo de Firefox y haga clic derecho (RMB) en él. Luego, seleccione Dupdo > XPath como se marca en la captura de pantalla a continuación.

El selector XPath de su elemento deseado debería verse así.

Extracción de datos de páginas web con XPath Selector:

En esta sección, le mostraré cómo seleccionar elementos de la página web y extraer datos de ellos usando selectores XPath con la biblioteca Selenium Python.

Primero, cree una nueva secuencia de comandos de Python ex01.py y escriba las siguientes líneas de códigos.

desde el controlador web de importación de selenio
de selenio.webdriver.común.claves importar claves
de selenio.webdriver.común.por importación Por
opciones = webdriver.ChromeOptions ()
opciones.headless = Verdadero
browser = webdriver.Chrome (ruta_ejecutable = "./ drivers / chromedriver ",
opciones = opciones)
navegador.get ("https: // www.unixtimestamp.com / ")
timestamp = navegador.find_element_by_xpath ('/ html / body / div [1] / div [1]
/ div [2] / div [1] / div / div / h3 [2] ')
print ('Marca de tiempo actual:% s'% (marca de tiempo.texto.dividir (") [0]))
navegador.cerca()

Una vez que haya terminado, guarde el ex01.py Secuencia de comandos de Python.

La línea 1-3 importa todos los componentes de selenio necesarios.

La línea 5 crea un objeto Opciones de Chrome y la línea 6 habilita el modo sin cabeza para el navegador web Chrome.

Line 8 crea un Chrome navegador objeto usando el conductor cromado binario del conductores / directorio del proyecto.

La línea 10 le dice al navegador que cargue el sitio web unixtimestamp.com.

La línea 12 busca el elemento que tiene los datos de la marca de tiempo de la página usando el selector XPath y lo almacena en el marca de tiempo variable.

La línea 13 analiza los datos de la marca de tiempo del elemento y los imprime en la consola.

He copiado el selector XPath del marcado h2 elemento de unixtimestamp.com usando la herramienta para desarrolladores de Chrome.

La línea 14 cierra el navegador.

Ejecute la secuencia de comandos de Python ex01.py como sigue:

$ python3 ex01.py

Como puede ver, los datos de la marca de tiempo se imprimen en la pantalla.

Aquí, he usado el navegador.find_element_by_xpath (selector) método. El único parámetro de este método es el selector, que es el selector XPath del elemento.

En vez de navegador.find_element_by_xpath () método, también puede utilizar navegador.find_element (Por, selector) método. Este método necesita dos parámetros. El primer parámetro Por estarán Por.XPATH ya que usaremos el selector XPath, y el segundo parámetro selector será el propio selector XPath. El resultado será el mismo.

Para ver como navegador.find_element () El método funciona para el selector XPath, cree una nueva secuencia de comandos de Python ex02.py, copiar y pegar todas las líneas de ex01.py a ex02.py y cambio línea 12 como se marca en la captura de pantalla a continuación.

Como puede ver, la secuencia de comandos de Python ex02.py da el mismo resultado que ex01.py.

$ python3 ex02.py

La navegador.find_element_by_xpath () y navegador.find_element () Los métodos se utilizan para buscar y seleccionar un solo elemento de las páginas web. Si desea buscar y seleccionar varios elementos usando selectores XPath, entonces debe usar navegador.find_elements_by_xpath () o navegador.find_elements () métodos.

La navegador.find_elements_by_xpath () El método toma el mismo argumento que el navegador.find_element_by_xpath () método.

La navegador.find_elements () El método toma los mismos argumentos que el navegador.find_element () método.

Veamos un ejemplo de extracción de una lista de nombres usando el selector XPath de generador-de-nombres-aleatorios.info con la biblioteca Selenium Python.

La lista desordenada (ol etiqueta) tiene un 10 li etiquetas dentro de cada una que contienen un nombre aleatorio. El XPath para seleccionar todos los li etiquetas dentro del ol etiqueta en este caso es // * [@ id = ”principal”] / div [3] / div [2] / ol // li

Veamos un ejemplo de selección de varios elementos de la página web usando selectores XPath.

Crea una nueva secuencia de comandos de Python ex03.py y escriba las siguientes líneas de códigos en él.

desde el controlador web de importación de selenio
de selenio.webdriver.común.claves importar claves
de selenio.webdriver.común.por importación Por
opciones = webdriver.ChromeOptions ()
opciones.headless = Verdadero
browser = webdriver.Chrome (ruta_ejecutable = "./ drivers / chromedriver ",
opciones = opciones)
navegador.get ("http: // generador-de-nombres-aleatorios.info / ")
nombres = navegador.find_elements_by_xpath ('
// * [@ id = "principal"] / div [3] / div [2] / ol // li ')
por nombre en nombres:
imprimir (nombre.texto)
navegador.cerca()

Una vez que haya terminado, guarde el ex03.py Secuencia de comandos de Python.

La línea 1-8 es la misma que en ex01.py Secuencia de comandos de Python. Entonces, no voy a volver a explicarlos aquí.

La línea 10 le dice al navegador que cargue el generador de nombres aleatorios del sitio web.info.

La línea 12 selecciona la lista de nombres usando el navegador.find_elements_by_xpath () método. Este método usa el selector XPath // * [@ id = ”principal”] / div [3] / div [2] / ol // li para encontrar la lista de nombres. Luego, la lista de nombres se almacena en el nombres variable.

En las líneas 13 y 14, un por El bucle se usa para iterar a través del nombres enumerar e imprimir los nombres en la consola.

La línea 16 cierra el navegador.

Ejecute la secuencia de comandos de Python ex03.py como sigue:

$ python3 ex03.py

Como puede ver, los nombres se extraen de la página web y se imprimen en la consola.

En lugar de usar el navegador.find_elements_by_xpath () método, también puede utilizar el navegador.find_elements () método como antes. El primer argumento de este método es Por.XPATH, y el segundo argumento es el selector XPath.

Para experimentar con navegador.find_elements () método, crea una nueva secuencia de comandos de Python ex04.py, copiar todos los códigos de ex03.py a ex04.py, y cambie la línea 12 como se marca en la captura de pantalla a continuación.

Debería obtener el mismo resultado que antes.

$ python3 ex04.py

Conceptos básicos de XPath Selector:

La herramienta de desarrollo del navegador web Firefox o Google Chrome genera el selector XPath automáticamente. Pero estos selectores XPath a veces no son suficientes para su proyecto. En ese caso, debe saber qué hace un determinado selector XPath para construir su selector XPath. En esta sección, le mostraré los conceptos básicos de los selectores XPath. Entonces, debería poder construir su propio selector XPath.

Crea un directorio nuevo www/ en el directorio de su proyecto de la siguiente manera:

$ mkdir -v www

Crea un archivo nuevo web01.html en el www/ directorio y escriba las siguientes líneas en ese archivo.






Documento HTML básico


Hola Mundo



Una vez que haya terminado, guarde el web01.html expediente.

Ejecute un servidor HTTP simple en el puerto 8080 con el siguiente comando:

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

El servidor HTTP debería iniciarse.

Debería poder acceder al web01.html archivo usando la URL http: // localhost: 8080 / web01.html, como puede ver en la captura de pantalla a continuación.

Mientras se abre Firefox o Chrome Developer Tool, presione + F para abrir el cuadro de búsqueda. Puede escribir su selector XPath aquí y ver lo que selecciona muy fácilmente. Voy a utilizar esta herramienta a lo largo de esta sección.

Un selector XPath comienza con un barra inclinada (/) la mayor parte del tiempo. Es como un árbol de directorios de Linux. La / es la raíz de todos los elementos de la página web.

El primer elemento es el html. Entonces, el selector XPath / html selecciona todo html etiqueta.

Dentro de html etiqueta, tenemos una cuerpo etiqueta. La cuerpo la etiqueta se puede seleccionar con el selector XPath / html / cuerpo

La h1 el encabezado está dentro del cuerpo etiqueta. La h1 El encabezado se puede seleccionar con el selector XPath / html / cuerpo / h1

Este tipo de selector XPath se denomina selector de ruta absoluta. En el selector de ruta absoluta, debe atravesar la página web desde la raíz (/) de la página. La desventaja de un selector de ruta absoluta es que incluso un pequeño cambio en la estructura de la página web puede invalidar su selector XPath. La solución a este problema es un selector XPath relativo o parcial.

Para ver cómo funciona la ruta relativa o la ruta parcial, cree un nuevo archivo web02.html en el www/ directorio y escriba las siguientes líneas de códigos en él.






Documento HTML básico


Hola Mundo



este es un mensaje




Hola Mundo


Una vez que haya terminado, guarde el web02.html archivo y cárguelo en su navegador web.

Como puede ver, el selector XPath // div / p selecciona el pag etiqueta dentro de la div etiqueta. Este es un ejemplo de un selector XPath relativo.

El selector de XPath relativo comienza con //. Luego, especifica la estructura del elemento que desea seleccionar. En este caso, div / p.

Entonces, // div / p significa seleccionar el pag elemento dentro de un div elemento, no importa lo que venga antes.

También puede seleccionar elementos por diferentes atributos como identificación, clase, tipo, etc. usando el selector XPath. Veamos como hacer eso.

Crea un archivo nuevo web03.html en el www/ directorio y escriba las siguientes líneas de códigos en él.






Documento HTML básico


Hola Mundo



este es un mensaje


este es otro mensaje


título 2


Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam
eligendi doloribus sapiente, molestias quos quae non nam incidunt quis delectus
facilis magni officiis alias neque atque fuga? Unde, aut natus?




esto es un pie de página


Una vez que haya terminado, guarde el web03.html archivo y cárguelo en su navegador web.

Digamos que desea seleccionar todos los div elementos que tienen el clase nombre contenedor1. Para hacer eso, puede usar el selector XPath // div [@ class = 'contenedor1']

Como puede ver, tengo 2 elementos que coinciden con el selector XPath // div [@ class = 'contenedor1']

Para seleccionar el primero div elemento con el clase nombre contenedor1, agregar [1] al final de la selección XPath, como se muestra en la captura de pantalla a continuación.

De la misma manera, puede seleccionar el segundo div elemento con el clase nombre contenedor1 usando el selector XPath // div [@ class = 'contenedor1'] [2]

Puede seleccionar elementos por identificación también.

Por ejemplo, para seleccionar el elemento que tiene la identificación de pie de página-msg, puedes usar el selector XPath // * [@ id = 'footer-msg']

Aquí el * antes de [@ id = 'footer-msg'] se utiliza para seleccionar cualquier elemento independientemente de su etiqueta.

Eso es lo básico del selector XPath. Ahora, debería poder crear su propio selector XPath para sus proyectos de Selenium.

Conclusión:

En este artículo, le he mostrado cómo buscar y seleccionar elementos de páginas web usando el selector XPath con la biblioteca Selenium Python. También he hablado de los selectores XPath más comunes. Después de leer este artículo, debería sentirse bastante seguro al seleccionar elementos de páginas web utilizando el selector XPath con la biblioteca Selenium Python.

Batalla por Wesnoth 1.13.6 Desarrollo liberado
Batalla por Wesnoth 1.13.6 lanzado el mes pasado, es el sexto lanzamiento de desarrollo en el 1.13.x y ofrece una serie de mejoras, sobre todo en la i...
Cómo instalar League Of Legends en Ubuntu 14.04
Si eres fanático de League of Legends, esta es una oportunidad para que pruebes League of Legends. Tenga en cuenta que LOL es compatible con PlayOnLin...
Instale el último juego de estrategia de OpenRA en Ubuntu Linux
OpenRA es un motor de juego de estrategia en tiempo real libre / gratuito que recrea los primeros juegos de Westwood como el clásico Command & Conquer...