Uso de XPath y Selenium para encontrar un elemento en la página HTML
Localizar y seleccionar elementos de la página web es la clave para rasparse web con Selenium. Para localizar y seleccionar elementos de la página web, puede usar SELECTORS XPATH en Selenium.
En este artículo, le mostraré cómo localizar y seleccionar elementos de las páginas web utilizando selectores XPath en Selenium con la Biblioteca de Selenium Python. Entonces empecemos.
Prerrequisitos:
Para probar los comandos y ejemplos de este artículo, debe tener,
- Una distribución de Linux (preferiblemente Ubuntu) instalada en su computadora.
- Python 3 instalado en su computadora.
- PIP 3 instalado en su computadora.
- Pitón virtualenv Paquete instalado en su computadora.
- Los navegadores web de Mozilla Firefox o Google Chrome instalados en su computadora.
- Debe saber cómo instalar el controlador Gecko Firefox o el controlador web 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 los otros temas en Linuxhint.comunicarse. Asegúrese de consultarlos si necesita alguna ayuda.
Configuración de un directorio de proyecto:
Para mantener todo organizado, cree un nuevo directorio de proyectos selenio-xpath/ como sigue:
$ mkdir -pv selenium -xpath/conductores
Navegar al selenio-xpath/ Directorio de proyectos de la siguiente manera:
$ CD Selenium-XPath/
Cree un entorno virtual de Python en el directorio del proyecto de la siguiente manera:
$ virtualenv .venado
Active el entorno virtual de la siguiente manera:
$ fuente .venv/bin/activar
Instale la biblioteca de Selenium Python usando PIP3 de la siguiente manera:
$ PIP3 Instalar selenioDescargue e instale todo el controlador web requerido 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 el selector XPath con la herramienta de desarrollador de Chrome:
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 desarrollador incorporada del navegador web Google Chrome.
Para obtener el selector XPath utilizando el navegador web Google Chrome, abra Google Chrome y visite el sitio web desde el cual desea extraer 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 de desarrollador de Chrome.
También puedes presionar + Cambio + I Para abrir el Herramienta de desarrollador de Chrome.
Herramienta de desarrollador de Chrome debe abrirse.
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 a continuación.
Luego, pasee sobre el elemento de la página web deseado y presione el botón del mouse izquierdo (LMB) para seleccionarlo.
La representación HTML del elemento web que ha seleccionado se resaltará en el Elementos pestaña del Herramienta de desarrollador 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 del Elementos pestaña Herramienta de desarrollador de Chrome y haga clic derecho (RMB) en él. Entonces, seleccione Copiar > 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 el selector XPath con la herramienta de desarrollador de Firefox:
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 desarrollador incorporada del navegador web Mozilla Firefox.
Para obtener el selector XPath utilizando el navegador web Firefox, abra Firefox y visite el sitio web desde el que desea extraer 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 desarrollador de Firefox.
Herramienta de desarrollador de Firefox debe abrirse.
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 a continuación.
Luego, pasee sobre el elemento de la página web deseado y presione el botón del mouse izquierdo (LMB) para seleccionarlo.
La representación HTML del elemento web que ha seleccionado se resaltará en el Inspector pestaña Herramienta de desarrollador 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 del Inspector pestaña Herramienta de desarrollador de Firefox y haga clic derecho (RMB) en él. Entonces, seleccione Copiar > Xpath como se marca en la captura de pantalla a continuación.
El selector XPath de su elemento deseado debería verse algo así.
Extracción de datos de las páginas web utilizando el selector XPATH:
En esta sección, le mostraré cómo seleccionar elementos de la página web y extraer datos de ellos utilizando selectores XPath con la biblioteca de Selenium Python.
Primero, crea un nuevo script de Python ex01.py y escriba las siguientes líneas de códigos.
Desde Selenium Import WebDriverde Selenium.webdriver.común.llaves de importación de teclas
de Selenium.webdriver.común.por importación por
opciones = webdriver.ChromeOptions ()
opción.Sin cabeza = verdadero
navegador = webdriver.Chrome (ejecutable_path = "./controladores/cromedriver ",
opciones = opciones)
navegador.Get ("https: // www.uniptimestamp.com/")
marca de tiempo = navegador.find_element_by_xpath ('/html/body/div [1]/div [1]
/div [2]/div [1]/div/div/h3 [2] ')
Imprimir ('Actual marca de tiempo: % S' % (marca de tiempo.texto.dividir (") [0]))
navegador.cerca()
Una vez que haya terminado, guarde el ex01.py Guión de pitón.
Línea 1-3 Importa todos los componentes de selenio requeridos.
La línea 5 crea un objeto de opciones de Chrome, y la línea 6 habilita el modo sin cabeza para el navegador web Chrome.
La línea 8 crea un cromo navegador objeto usando el cromedríguico binario del conductores/ directorio del proyecto.
La línea 10 le dice al navegador que cargue el sitio web unixMestamp.comunicarse.
La línea 12 encuentra el elemento que tiene los datos de la marca de tiempo de la página utilizando 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 uniptimestamp.comunicarse Uso de la herramienta de desarrollador de Chrome.
La línea 14 cierra el navegador.
Ejecute el guión de Python ex01.py como sigue:
$ python3 ex01.pyComo 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, ¿Cuál es el selector XPath del elemento?.
En lugar de navegador.find_element_by_xpath () método, también puedes usar navegador.find_element (por, selector) método. Este método necesita dos parámetros. El primer parámetro Por será Por.Xpath Como usaremos el selector XPath y el segundo parámetro selector será el selector de XPath en sí. El resultado será el mismo.
Para ver como navegador.find_element () El método funciona para el selector XPath, cree un nuevo script 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 puedes ver, el guión de Python ex02.py da el mismo resultado que ex01.py.
$ python3 ex02.pyEl navegador.find_element_by_xpath () y navegador.find_element () Los métodos se utilizan para encontrar y seleccionar un solo elemento de las páginas web. Si desea encontrar y seleccionar múltiples elementos usando SELECTORS XPATH, entonces debe usar navegador.find_elements_by_xpath () o navegador.find_elements () métodos.
El navegador.find_elements_by_xpath () El método toma el mismo argumento que el navegador.find_element_by_xpath () método.
El navegador.find_elements () El método toma los mismos argumentos que el navegador.find_element () método.
Veamos un ejemplo de extraer una lista de nombres usando el selector XPath de generador de nombre aleatorio.información con la biblioteca de Selenium Python.
La lista desordenada (olio etiqueta) tiene un 10 li Etiquetas dentro de cada una que contiene un nombre aleatorio. El xpath para seleccionar todo el li Etiquetas dentro del olio La etiqueta en este caso es //*[@id = "main"]/div [3]/div [2]/ol // li
Pasemos por un ejemplo de selección de múltiples elementos de la página web utilizando SELECTORS XPATH.
Crea un nuevo script de Python ex03.py y escriba las siguientes líneas de códigos en él.
Desde Selenium Import WebDriverde Selenium.webdriver.común.llaves de importación de teclas
de Selenium.webdriver.común.por importación por
opciones = webdriver.ChromeOptions ()
opción.Sin cabeza = verdadero
navegador = webdriver.Chrome (ejecutable_path = "./controladores/cromedriver ",
opciones = opciones)
navegador.Get ("http: // generador de nombre aleatorio.info/")
nombres = navegador.find_elements_by_xpath ('
//*[@id = "main"]/div [3]/div [2]/ol // li ')
Para el nombre en los nombres:
Imprimir (nombre.texto)
navegador.cerca()
Una vez que haya terminado, guarde el ex03.py Guión de pitón.
La línea 1-8 es la misma que en ex01.py Guión de pitón. Entonces, no los voy a explicar aquí de nuevo.
La línea 10 le dice al navegador que cargue el sitio web Generador de nombre aleatorio.información.
La línea 12 selecciona la lista de nombres utilizando el navegador.find_elements_by_xpath () método. Este método utiliza el selector XPath //*[@id = "main"]/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 para el bucle se usa para iterar a través del nombres Lista e imprima los nombres en la consola.
La línea 16 cierra el navegador.
Ejecute el guión de Python ex03.py como sigue:
$ python3 ex03.pyComo puede ver, los nombres se extraen de la página web e imprimen en la consola.
En lugar de usar el navegador.find_elements_by_xpath () método, también puedes usar 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 de xpath.
Para experimentar con navegador.find_elements () Método, cree un nuevo script de Python ex04.py, Copiar todos los códigos de ex03.py a ex04.py, y cambiar la línea 12 como se marca en la captura de pantalla a continuación.
Debe obtener el mismo resultado que antes.
$ python3 ex04.pyConceptos básicos del selector XPath:
La herramienta de desarrollador de Firefox o Google Chrome Web Browser genera 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 de XPath para construir su selector XPath. En esta sección, les voy a mostrar los conceptos básicos de los selectores de XPath. Entonces, deberías poder construir tu propio selector XPath.
Crear un nuevo directorio www/ En el directorio de su proyecto de la siguiente manera:
$ mkdir -v www
Crea un nuevo archivo Web01.html en el www/ directorio y escriba las siguientes líneas en ese archivo.
Hola Mundo
Una vez que haya terminado, guarde el Web01.html archivo.
Ejecute un servidor HTTP simple en el puerto 8080 usando el siguiente comando:
$ python3 -m http.servidor -directorio www/ 8080El servidor HTTP debe iniciar.
Deberías poder acceder al Web01.html Archivo utilizando la URL http: // localhost: 8080/web01.html, como puede ver en la captura de pantalla a continuación.
Mientras se abre la herramienta Firefox o Chrome Developer, 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 usar esta herramienta en esta sección.
Un selector de XPath comienza con un barra inclinada (/) la mayor parte del tiempo. Es como un árbol de directorio de Linux. El / es la raíz de todos los elementos en la página web.
El primer elemento es el html. Entonces, el selector XPath /html selecciona todo html etiqueta.
Dentro de html etiqueta, tenemos un cuerpo etiqueta. El cuerpo La etiqueta se puede seleccionar con el selector XPath /html/cuerpo
El H1 el encabezado está dentro del cuerpo etiqueta. El H1 El encabezado se puede seleccionar con el selector XPath /html/cuerpo/h1
Este tipo de selector XPath se llama 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 absoluto es que incluso un ligero cambio en la estructura de la página web puede hacer que su selector XPath sea inválido. 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.
Hola Mundo
Este es un mensaje
Hola Mundo
Una vez que haya terminado, guarde el Web02.html Archivo y cargándolo en su navegador web.
Como puede ver, el selector XPath // div/p selecciona el pag etiqueta dentro del div etiqueta. Este es un ejemplo de un selector relativo de XPath.
El selector relativo de XPath 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 ocurra antes.
También puede seleccionar elementos de diferentes atributos como identificación, clase, tipo, etc. Usando el selector de XPath. Veamos cómo hacer eso.
Crea un nuevo archivo Web03.html en el www/ directorio y escriba las siguientes líneas de códigos en él.
Hola Mundo
Este es un mensaje
Este es otro mensaje
encabezado 2
Lorem ipsum dolor sit amet consectetur, adipising elit. Quibusdam
Eligendi doloribus sapiente, molestias quos quos no nam incidunt quis delectus
facilis magni officiis alias neque atque fuga? UNde, Aut Natus?
Este es un pie de página
Una vez que haya terminado, guarde el Web03.html Archivo y cargándolo en su navegador web.
Digamos que desea seleccionar todo el div elementos que tienen el clase nombre contenedor1. Para hacer eso, puedes usar el selector XPath // div [@class = 'Container1']
Como puede ver, tengo 2 elementos que coinciden con el selector de XPath // div [@class = 'Container1']
Para seleccionar el primero div elemento con el clase nombre contenedor1, agregar [1] Al final de la selección de 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 = 'Container1'] [2]
Puede seleccionar elementos por identificación también.
Por ejemplo, para seleccionar el elemento que tiene el identificación de footer-msg, Puedes usar el selector XPath //*[@id = 'Footer-msg']
Aquí el * antes [@id = 'pie-msg'] se usa 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 encontrar y seleccionar elementos de las páginas web utilizando el selector XPath con la biblioteca de Selenium Python. También he discutido los selectores XPath más comunes. Después de leer este artículo, debe sentirse bastante seguro de seleccionar elementos de las páginas web utilizando el selector XPath con la biblioteca de Selenium Python.