Los selectores de CSS son una herramienta poderosa para ubicar elementos en una página web al automatizar las pruebas del navegador con Selenium. El uso de selectores CSS le permite apuntar a elementos de una manera precisa y flexible. En esta guía completa, cubriremos todo lo que necesita saber para convertirse en un profesional en la búsqueda de elementos mediante el selector CSS en Selenium.
Una introducción a los selectores CSS
Los selectores CSS le permiten seleccionar elementos HTML según su identificación, clase, atributo, posición en el árbol DOM y más. Estos son algunos de los selectores CSS más utilizados:
Selector de ID – Selecciona un elemento en función de su ID único. Por ejemplo
#main-headerseleccionará el elemento con id="main-header".Selector de clase – Selecciona elementos según el nombre de la clase. Por ejemplo
.articleseleccionará todos los elementos con class="article".Selector de atributos – Selecciona elementos en función de un determinado atributo o valor de atributo. Por ejemplo
input[type="text"]seleccionará todos los elementos de entrada con type="text".Selector de descendientes – Selecciona elementos que son descendientes de otro elemento especificado. Por ejemplo
div pseleccionará todos los elementos p dentro de los elementos div.Selector de niños – Selecciona elementos que son hijos directos de otro elemento especificado. Por ejemplo
div > pseleccionará p elementos que sean hijos directos de div.Selector de hermanos adyacentes – Selecciona el elemento hermano que sigue inmediatamente a otro elemento. Por ejemplo
h2 + pseleccionará el elemento p que viene inmediatamente después de un elemento h2.Selector general de hermanos – Selecciona todos los elementos hermanos que siguen a otro elemento. Por ejemplo
h2 ~ pseleccionará todos los elementos p que vienen después de un elemento h2.
Estos son sólo algunos ejemplos de los muchos tipos de selectores de CSS. Puede combinar varios selectores para apuntar a elementos de una manera muy específica.
Encontrar elementos mediante el selector CSS en Selenium
Selenium proporciona dos métodos principales para encontrar elementos usando selectores CSS:
controlador.find_element_by_css_selector()
Este método devolverá el primer elemento coincidente.
element = driver.find_element_by_css_selector(‘#main-header‘)controlador.find_elements_by_css_selector()
Este método devolverá una lista de todos los elementos coincidentes.
elements = driver.find_elements_by_css_selector(‘.article‘)Cuando utiliza estos métodos, pasa el selector CSS como una cadena. Aquí hay algunos ejemplos de cómo ubicaría elementos con diferentes selectores:
Por ID:
driver.find_element_by_css_selector(‘#signup-form‘)Por clase:
driver.find_element_by_css_selector(‘.footer-links‘)Por atributo:
driver.find_element_by_css_selector(‘input[name="first_name"]‘)Descendiente:
driver.find_element_by_css_selector(‘div#content p.summary‘)Niño:
driver.find_element_by_css_selector(‘ul.menu > li.active‘) Hermano adyacente:
driver.find_element_by_css_selector(‘h1 + p.intro‘)Hermano general:
driver.find_element_by_css_selector(‘h2 ~ p.related-posts‘)Como puede ver, los selectores de CSS le brindan muchas opciones para apuntar a elementos de diferentes maneras.
Consejos para escribir selectores CSS eficaces
A continuación se ofrecen algunos consejos a seguir al escribir selectores CSS para encontrar elementos en Selenium:
Sea lo más específico posible: utilice id, clase, atributos y múltiples selectores juntos para apuntar con precisión a los elementos. Esto evita coincidencias de falsos positivos.
Prefiera la clase al nombre de la etiqueta: los nombres de etiquetas como div, p, a, etc. no son muy distintivos. Las clases permiten una orientación más específica.
Utilice atributos únicos como nombre o título: los atributos de nombre y título suelen tener valores únicos que pueden identificar un solo elemento.
Utilice los selectores de hermanos con cuidado: los selectores de hermanos adyacentes y generales pueden coincidir con más elementos de los previstos si no se escriben correctamente.
Evite selectores anidados complejos: encadenar muchos selectores descendientes puede hacer que los selectores sean propensos a romperse. Intente limitar cada selector a 3-4 niveles encadenados.
Divida los selectores largos en varias líneas: los selectores CSS no tienen que ser de una sola línea. Dividirlos en varias líneas puede mejorar la legibilidad.
Seguir estos consejos le ayudará a escribir selectores CSS sólidos y fáciles de mantener para automatizar pruebas web.
Ejemplos comunes y casos de uso
Ahora veamos algunos ejemplos comunes de cómo se utilizan los selectores de CSS para el web scraping y las pruebas de navegador con Selenium:
Seleccionar enlaces de navegación
Para seleccionar los enlaces de navegación principales, podemos usar un selector de clases:
nav_links = driver.find_elements_by_css_selector(‘ul.main-nav > li > a‘)Seleccionar campos de formulario
Podemos seleccionar campos de entrada del formulario según la etiqueta de entrada y el atributo de tipo:
username = driver.find_element_by_css_selector(‘input[type="text"][name="username"]‘)
password = driver.find_element_by_css_selector(‘input[type="password"]‘)Seleccionar filas y columnas de la tabla
Los selectores de CSS facilitan la selección de filas y celdas específicas en una tabla HTML:
# Get second row
row = driver.find_element_by_css_selector(‘#data-table tr:nth-child(2)‘)
# Get cell in specific row/column
cell = driver.find_element_by_css_selector(‘#data-table tr:nth-child(2) td:nth-child(3)‘)Seleccionar elementos secundarios
Para seleccionar solo hijos div directos de un contenedor, podemos usar el selector de hijos:
children = driver.find_elements_by_css_selector(‘#container > div‘)Seleccionar elementos basados en texto
Podemos hacer coincidir parcialmente el texto del enlace usando el selector *:
contact_link = driver.find_element_by_css_selector(‘a[href*="contact"]‘]Estos ejemplos demuestran cómo se pueden utilizar los selectores de CSS en escenarios de automatización de pruebas del mundo real.
Uso de selectores CSS en otros idiomas
Los ejemplos hasta ahora han usado Python, pero los selectores CSS se pueden usar en cualquier enlace de idioma para Selenium:
Java
// By.cssSelector
WebElement element = driver.findElement(By.cssSelector("div.main #login-form"));C#
// FindElement
IWebElement element = driver.FindElement(By.CssSelector("div.main #login-form"));JavaScript
// $
const element = await driver.$(‘div.main #login-form‘);No importa qué idioma esté utilizando, los selectores de CSS proporcionan una forma poderosa y flexible de apuntar a elementos.
Localizar elementos por nombre de clase
Un caso de uso común es localizar elementos por nombre de clase. A continuación se ofrecen algunos consejos para seleccionar por clase en Selenium:
Coincide con el nombre exacto de la clase –
driver.find_element_by_class_name(‘primary-btn‘)Utilice un selector de clases CSS –
driver.find_element_by_css_selector(‘.primary-btn‘)Coincidencia parcial de múltiples clases –
driver.find_element_by_css_selector(‘.primary.btn‘)Emparejar descendiente con clase –
driver.find_element_by_css_selector(‘div .primary-btn‘)Utilice varias clases para lograr singularidad:
driver.find_element_by_css_selector(‘.primary-btn.large‘)
Hacer coincidir por nombre de clase es muy útil, pero asegúrese de apuntar a clases que sean únicas en la página.
Encontrar elementos por nombre de etiqueta
Ubicar elementos por nombre de etiqueta HTML es otra tarea común de Selenium. Aquí hay unos ejemplos:
Encuentre la primera instancia del nombre de la etiqueta:
element = driver.find_element_by_tag_name(‘button‘) Encuentre todas las instancias del nombre de la etiqueta:
buttons = driver.find_elements_by_tag_name(‘button‘)Combinar con el selector CSS:
submit_btn = driver.find_element_by_css_selector(‘form button[type="submit"]‘)Desde nombres de etiquetas como <div> y <span> son comunes, intente utilizar también ID, clases o atributos para identificar de forma única el elemento.
Encontrar elementos por nombre o ID
Si los elementos tienen atributos id o nombre, la opción más sencilla es localizar por nombre o ID.
Buscar por ID precisa:
element = driver.find_element_by_id(‘signup-form‘)Buscar por nombre exacto:
element = driver.find_element_by_name(‘email‘) Los localizadores de ID y nombre solo coincidirán con los valores exactos de los atributos. Esto los hace muy específicos pero también propensos a romperse si cambian las identificaciones o los nombres.
Encontrar elementos mediante XPath frente a selector de CSS
XPath es la otra estrategia de ubicación de elementos común en Selenium. Entonces, ¿cuándo debería utilizar selectores XPath frente a CSS?
A continuación se muestran algunas diferencias:
legibilidad – Los selectores de CSS son más legibles y fáciles de entender para la mayoría de los desarrolladores.
Mantenimiento – Los selectores de CSS son menos frágiles y propensos a cambios importantes en comparación con los XPath largos y complejos.
Capacidades – XPath puede acceder a algunas propiedades de elementos que los selectores CSS no pueden, como el contenido de texto.
Rendimiento – Los selectores de CSS son más rápidos para que los navegadores coincidan en comparación con los XPath complejos.
En general, prefiera los selectores CSS por su mantenibilidad y rendimiento. Utilice XPath únicamente cuando sea necesario para acceder a algo que no es posible con CSS.
Mejores prácticas al utilizar selectores CSS
Estas son algunas de las mejores prácticas a seguir al ubicar elementos con selectores CSS:
Favorezca la unicidad sobre la complejidad: evite largas cadenas de selectores anidados si es posible.
Utilice ID y clases sobre nombres de etiquetas y anidamiento.
Intenta hacer coincidir 3 o menos niveles encadenados: más niveles aumentan la fragilidad.
Evite selectores universales como
*– Estos son propensos a coincidencias falsas positivas.Divida los selectores largos en varias líneas: mejora la legibilidad.
Caché de selectores de uso común: guarda búsquedas repetidas de selectores.
Utilice nombres de selectores descriptivos: ayuda a aclarar la intención y evita hilos mágicos.
Seguir estas mejores prácticas ayudará a escribir selectores CSS sólidos, legibles y confiables para la automatización de Selenium.
Consejos para depurar selectores CSS
La depuración de selectores de CSS es una habilidad esencial para la automatización de pruebas. A continuación se ofrecen algunos consejos para solucionar problemas:
Utilice las herramientas de desarrollo de su navegador para probar los selectores: Chrome DevTools proporciona un inspector de elementos conveniente.
Imprima e inspeccione elementos coincidentes: después de ejecutar
find_elements(), imprima los resultados para ver qué coincidió.lucha
NoSuchElementException– Envuelve los hallazgos en un bloque try/except para detectar cuando no se encuentra un elemento.Generar XPath a partir del elemento de destino: muchos navegadores le permiten copiar el XPath, lo que puede ayudar a crear el selector de CSS.
Simplifique los selectores complejos: intente eliminar atributos/clases/anidamiento hasta que el selector funcione.
Utilice esperas explícitas si es necesario: las páginas dinámicas pueden requerir esperas para que los selectores estén disponibles.
Validar la precisión del selector: asegúrese de que el selector realmente encuentre el elemento deseado, no cualquier elemento.
Tomarse el tiempo para depurar cuidadosamente los selectores dará sus frutos mediante pruebas más estables.
Conclusión
Esta guía cubrió todos los aspectos clave de la localización de elementos mediante el selector CSS en Selenium:
- Sintaxis y tipos del selector CSS
- Uso con selenio
find_elementmétodos - Escribir selectores precisos y mantenibles
- Casos de uso comunes y ejemplos
- Comparación con XPath
- Depuración y mejores prácticas
Los selectores de CSS proporcionan una forma potente y flexible de seleccionar elementos para el web scraping y la automatización de pruebas. Si domina las técnicas que se muestran aquí, podrá escribir scripts de automatización sólidos que sean resistentes a los cambios en la interfaz de usuario de la aplicación. El uso adecuado de los selectores CSS es una habilidad imprescindible para cualquier ingeniero experimentado de Selenium.
