Localización de elementos por selectores CSS con Selenium
Prerrequisitos:
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) Python virtualenv Paquete instalado en su computadora.
5) Mozilla Firefox o Google Chrome Browsers instalados en su computadora.
6) 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 con Python 3 en Linuxhint.comunicarse.
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-CSS-selector/ como sigue:
$ mkdir -pv selenio-CSS-selector/conductoresNavegar al selenio-CSS-selector/ Directorio de proyectos de la siguiente manera:
$ CD Selenium-CSS-selector/Cree un entorno virtual de Python en el directorio del proyecto de la siguiente manera:
$ virtualenv .venadoActive el entorno virtual de la siguiente manera:
$ fuente .venv/bin/activarInstale 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 con Python 3. Si necesita ayuda, busque Linuxhint.comunicarse para ese artículo.
Obtenga el selector CSS con la herramienta de desarrollador de Chrome:
En esta sección, le mostraré cómo encontrar el selector CSS 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 CSS utilizando el navegador web Google Chrome, abra Google Chrome y visite el sitio web del 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 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 Herramienta de desarrollador de Chrome Como puede ver en la captura de pantalla a continuación.
Para obtener el selector CSS 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 > Selector de copias como se marca en la captura de pantalla a continuación.
He pegado el selector CSS en un editor de texto. El selector CSS se ve como se muestra en la captura de pantalla a continuación.
Obtenga el selector CSS con la herramienta de desarrollador de Firefox:
En esta sección, le mostraré cómo encontrar el selector CSS 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 CSS 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 CSS 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 > Selector de CSS como se marca en la captura de pantalla a continuación.
El selector CSS de su elemento deseado debería verse algo así.
Extracción de datos utilizando el selector CSS con selenio:
En esta sección, le mostraré cómo seleccionar elementos de la página web y extraer datos de ellos utilizando selectores CSS con Selenium Python Library.
Primero, crea un nuevo script de Python ex00.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/chromedriver ", opciones = opciones)
navegador.Get ("https: // www.uniptimestamp.com/")
marca de tiempo = navegador.find_element_by_css_selector ('H3.Text-Danger: Nth-Child (3) ')
Imprimir ('Actual marca de tiempo: % S' % (marca de tiempo.texto.dividir (") [0]))
navegador.cerca()
Una vez que haya terminado, guarde el ex00.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 CSS y los 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.
Así es como la estructura HTML de los datos de la marca de tiempo UNIX en unixTimestamp.com se ve como.
La línea 14 cierra el navegador.
Ejecute el guión de Python ex00.py como sigue:
$ python3 ex00.pyComo puede ver, los datos de la marca de tiempo se imprimen en la pantalla.
Aquí, he usado el navegador.find_element (por, selector) método.
Como estamos utilizando selectores CSS, el primer parámetro será Por.Css_selector y el segundo parámetro será el selector CSS en sí.
En lugar de navegador.find_element () método, también puedes usar navegador.find_element_by_css_selector (selector) método. Este método solo necesita un selector CSS para funcionar. El resultado será el mismo.
El navegador.find_element () y navegador.find_element_by_css_selector () Los métodos se utilizan para encontrar y seleccionar un solo elemento en la página web. Si desea encontrar y seleccionar varios elementos utilizando los selectores CSS, entonces debe usar navegador.find_elements () y navegador.find_elements_by_css_selector () métodos.
El navegador.find_elements () El método toma los mismos argumentos que el navegador.find_element () método.
El navegador.find_elements_by_css_selector () El método toma el mismo argumento que el navegador.find_element_by_css_selector () método.
Veamos un ejemplo de extraer una lista de nombres utilizando selectores CSS del generador de nombre aleatorio.Información con Selenium.
Como puede ver, la lista desordenada tiene el nombre de la clase lista de nombres. Entonces, podemos usar el selector CSS .namelista li Para seleccionar todos los nombres de la página web.
Pasemos por un ejemplo de selección de múltiples elementos de la página web utilizando selectores CSS.
Crea un nuevo script de Python ex01.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/chromedriver ", opciones = opciones)
navegador.Get ("http: // generador de nombre aleatorio.info/")
nombres = navegador.find_elements (por.Css_selector, '.Namelist li ')
Para el nombre en los nombres:
Imprimir (nombre.texto)
navegador.cerca()
Una vez que haya terminado, guarde el ex01.py Guión de pitón.
La línea 1-8 es la misma que en ex00.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 () método. Este método utiliza el selector CSS .namelista 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 ex01.py como sigue:
$ python3 ex01.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 () método, también puedes usar el navegador.find_elements_by_css_selector () el método como antes. Este método solo necesita un selector CSS para funcionar. El resultado será el mismo.
Conceptos básicos de los selectores de CSS:
Siempre puede encontrar el selector CSS de un elemento de página web utilizando la herramienta de desarrollador de Firefox o Chrome Webser. Este selector CSS generado automáticamente puede no ser lo que desea. A veces puede que tenga que escribir su selector CSS.
En esta sección, voy a hablar sobre los conceptos básicos de los selectores CSS para que pueda comprender qué seleccione un determinado selector de CSS desde una página web y escriba su selector CSS personalizado si es necesario.
Si desea seleccionar un elemento de la página web usando la identificación mensaje, El selector de CSS será #mensaje.
El selector de CSS .verde seleccionará un elemento usando un nombre de clase verde.
Si desea seleccionar un elemento (clase machista) dentro de otro elemento (clase envase), el selector CSS será .envase .machista
El selector de CSS .machista.éxito seleccionará el elemento que tiene dos clases de CSS machista y éxito.
Para seleccionar todo el pag Etiquetas, puede usar el selector CSS pag.
Para seleccionar solo el pag Etiquetas dentro del div Etiquetas, puede usar el selector CSS Div P
Para seleccionar el pag Etiquetas que son los hermanos directos del div Etiquetas, puede usar el selector CSS div> p
Para seleccionar todo el durar y pag Etiquetas, puede usar el selector CSS P, tramo
Para seleccionar el pag etiqueta inmediatamente después del div Etiqueta, puede usar el selector CSS Div + P
Para seleccionar el pag etiqueta después del div Etiqueta, puede usar el selector CSS div ~ p
Para seleccionar todo el pag Etiquetas que tienen el nombre de la clase machista, puedes usar el selector CSS pag.machista
Para seleccionar todo el durar Etiquetas que tienen el nombre de la clase machista, puedes usar el selector CSS durar.machista
Para seleccionar todos los elementos que tienen el atributo href, puedes usar el selector CSS [href]
Para seleccionar el elemento que tiene el atributo nombre y el valor del nombre El atributo es nombre de usuario, puedes usar el selector CSS [nombre = "nombre de usuario"]
Para seleccionar todos los elementos que tienen el atributo alternativo y el valor del alternativo atributo que contiene la subcadena VCODE, puedes usar el selector CSS [alt ~ = "vscode"]
Para seleccionar todos los elementos que tienen el href atributo y el valor del href El atributo comienza con la cadena https, puedes usar el selector CSS [href^= "https"]
Para seleccionar todos los elementos que tienen el href atributo y el valor del href Atributo finalización con la cadena .comunicarse, puedes usar el selector CSS [href $ = ".com ”]
Para seleccionar todos los elementos que tienen el href atributo y el valor del href El atributo tiene la subcadena Google, puedes usar el selector CSS [href*= "google"]
Si desea seleccionar el primero li etiqueta dentro del ul Etiqueta, puede usar el selector CSS UL Li: Primer hijo
Si desea seleccionar el primero li etiqueta dentro del ul Etiqueta, también puede usar el selector CSS UL Li: enésimo hijo (1)
Si desea seleccionar el último li etiqueta dentro del ul Etiqueta, puede usar el selector CSS UL Li: último hijo
Si desea seleccionar el último li etiqueta dentro del ul Etiqueta, también puede usar el selector CSS UL Li: enésimo child (1)
Si desea seleccionar el segundo li etiqueta dentro del ul Etiqueta que comienza desde el principio, puede usar el selector CSS UL Li: enésimo hijo (2)
Si desea seleccionar el tercero li etiqueta dentro del ul Etiqueta que comienza desde el principio, puede usar el selector CSS UL Li: enésimo hijo (3)
Si desea seleccionar el segundo li etiqueta dentro del ul Etiqueta A partir del final, puede usar el selector CSS UL Li: Nth-Last-Child (2)
Si desea seleccionar el tercero li etiqueta dentro del ul Etiqueta A partir del final, puede usar el selector CSS UL Li: enésimo child (3)
Estos son los selectores CSS más comunes. Te encontrarás usando casi en todos los proyectos de selenio. Hay muchos más selectores CSS. Puedes encontrar una lista de todos en las escuelas W3S.Referencia de selectores de com CSS.
Cnclusion:
En este artículo, he mostrado cómo localizar y seleccionar elementos de la página web utilizando selectores CSS con Selenium. También he discutido los conceptos básicos de los selectores CSS. Debería poder usar selectores CSS cómodamente para sus proyectos de selenio.