Selector de CSS en Selenium

¿Qué es un selector CSS? Selenium?

A Selector de CSS en Selenium Es un patrón de cadena que identifica un elemento web a través de una combinación de etiqueta HTML, ID, clase y atributos. Los selectores CSS son un poco más avanzados que la localización por ID o nombre, pero son la estrategia más popular entre los expertos. Selenium usuarios porque pueden acceder a elementos que no tienen ningún atributo de ID o Nombre.

Selectores CSS en Selenium vienen en muchas formas, pero esta guía se centra en los cinco patrones más comunes utilizados en Selenium IDE:

• Etiqueta e identificación
• Etiqueta y clase
• Etiqueta y atributo
• Etiqueta, clase y atributo
• Texto interno

Al utilizar esta estrategia en Selenium IDE, siempre anteponga el Target caja con “css=” como se demuestra en cada uno de los ejemplos a continuación.

¿Por qué usar selectores CSS en? Selenium?

Los selectores CSS son la estrategia de localización preferida para muchos Selenium Los ingenieros de automatización buscan equilibrar velocidad, flexibilidad y legibilidad. Las aplicaciones web modernas suelen usar identificadores generados dinámicamente o eliminan por completo los atributos de nombre, lo que deja a los selectores CSS como la única forma fiable de seleccionar un elemento específico en la página.

Las principales ventajas de utilizar selectores CSS incluyen:

• Actuación: Los selectores CSS son procesados ​​por el motor nativo del navegador, por lo que se ejecutan más rápido que las expresiones XPath equivalentes, especialmente en navegadores antiguos como Internet Explorer.
• Flexibilidad: Combinan lógica de etiquetas, clases, atributos y coincidencias parciales, lo que permite a los evaluadores identificar elementos que carecen de un ID estable.
• Legibilidad: La sintaxis reproduce la forma en que los desarrolladores ya escriben reglas CSS, lo que acorta la curva de aprendizaje tanto para los ingenieros de control de calidad como para los equipos de desarrollo front-end.
• Estabilidad en diferentes navegadores: Los selectores CSS se comportan de manera consistente en Chrome, Firefox, Edge y Safari, reduciendo los fallos de prueba inestables.

Etiqueta e ID – Selector CSS

Este ejemplo utiliza el cuadro de texto Correo electrónico en la página de inicio de sesión de Facebook. El elemento tiene un ID de “o enviar un email.“, y ya se había accedido a él en la sección “Localización por ID”. Ahora se apunta al mismo elemento usando un Selenium Selector CSS con el atributo ID.

Sintaxis

css=tag#id

• etiqueta = la etiqueta HTML del elemento al que se accede
• # = el signo de almohadilla, que siempre debe estar presente cuando se utiliza un Selenium Selector CSS con ID
• id = el ID del elemento al que se accede

Tenga en cuenta que el ID siempre va precedido de un signo de almohadilla (#).

Paso 1) Navegue a www.facebook.comUtilizando las herramientas para desarrolladores de tu navegador (o una herramienta más antigua como Firebug), inspecciona el cuadro de texto "Correo electrónico o teléfono".

Observe que la etiqueta HTML es “Las opciones de entrada” y su ID es “o enviar un email.“. Por lo tanto, el selector CSS completo se convierte en “css=entrada#correo electrónico".

Paso 2) Entrar "css=entrada#correo electrónico" en el Target caja de Selenium IDE y haga clic en el botón Buscar. Selenium El IDE resalta el elemento coincidente en la página.

Etiqueta y clase: selector CSS

Un selector CSS en Selenium que utiliza una etiqueta HTML y un nombre de clase sigue la misma idea que etiqueta e ID, pero un punto (.) reemplaza el signo de almohadilla.

Sintaxis

css=tag.class

• etiqueta = la etiqueta HTML del elemento al que se accede
• . = el signo de punto, que siempre debe estar presente cuando se utiliza un selector CSS con clase
• clase = la clase del elemento al que se accede

Paso 1) Abra la página de demostración https://demo.guru99.com/test/facebook.html e inspeccione el cuadro de texto “Correo electrónico o teléfono”. Tenga en cuenta que la etiqueta HTML es “Las opciones de entrada” y su clase es “texto de entrada".

Paso 2) In Selenium IDE, ingrese “css=entrada.texto de entrada"En el Target cuadro y haga clic en Buscar. Selenium El IDE reconoce el cuadro de texto de correo electrónico o teléfono.

Tenga en cuenta que cuando varios elementos comparten la misma etiqueta HTML y clase, solo se reconoce el primer elemento coincidente en el código fuente. Examine el cuadro de texto Contraseña en la misma página y observe que comparte la misma clase que el cuadro de texto Correo electrónico o Teléfono.

En la ilustración anterior, solo se resaltó el cuadro de texto de correo electrónico o teléfono porque aparece primero en el código fuente de la página.

Etiqueta y atributo – Selector CSS

Esta estrategia combina una etiqueta HTML con un atributo específico perteneciente al elemento al que se desea acceder.

Sintaxis

css=tag[attribute=value]

• etiqueta = la etiqueta HTML del elemento al que se accede
• [ y ] = corchetes que encierran el atributo y su valor correspondiente.
• atributo = el atributo que se utilizará. Elija uno que sea único para el elemento, como nombre o ID.
• valor = el valor correspondiente del atributo elegido.

Paso 1) Navegue a la pestaña Mercury Página de registro para visitas guiadas https://demo.guru99.com/test/newtours/register.php y examine el cuadro de texto “Apellido”. Observe su etiqueta HTML (“input”) y su atributo de nombre (“lastName”).

Paso 2) In Selenium IDE, ingrese “css=entrada[nombre=apellido]"En el Target cuadro y haga clic en Buscar. Selenium El IDE localiza correctamente el campo Apellido.

Cuando varios elementos comparten la misma etiqueta y atributo HTML, solo se reconoce el primero. El comportamiento es idéntico al de localizar elementos con la misma etiqueta y clase.

Etiqueta, clase y atributo: selector CSS

Sintaxis

css=tag.class[attribute=value]

• etiqueta = la etiqueta HTML del elemento al que se accede
• . = el signo de punto, que siempre debe estar presente cuando se utiliza un selector CSS con clase
• clase = la clase del elemento al que se accede
• [ y ] = corchetes que encierran un atributo específico y su valor correspondiente.
• atributo = el atributo que se utilizará. Elija uno que sea único para el elemento, como nombre o ID.
• valor = el valor correspondiente del atributo elegido.

Paso 1) Abra la página de demostración https://demo.guru99.com/test/facebook.html e inspeccione los campos de entrada “Correo electrónico o teléfono” y “Contraseña”. Anote su etiqueta HTML, clase y atributos. Este ejemplo utiliza la “índice de tabulación" atributo.

Paso 2) Acceda primero al cuadro de texto “Correo electrónico o teléfono” utilizando un valor de tabindex de 1. Introduzca “css=entrada.texto de entrada[tabindex=1]" dentro Selenium IDE Target En la casilla, haga clic en Buscar. El campo Correo electrónico o Teléfono se resaltará.

Paso 3) Para seleccionar el cuadro de entrada de contraseña, simplemente reemplace el valor de tabindex. Ingrese “css=entrada.texto de entrada[tabindex=2]"En el Target cuadro y haga clic en Buscar. Selenium El IDE localiza correctamente el cuadro de texto de la contraseña.

Texto interno – Selector CSS

Las etiquetas HTML rara vez reciben atributos de id, nombre o clase. Entonces, ¿cómo se accede a ellos? SeleniumLa respuesta está en su texto interior. Los textos internos son los patrones de cadena reales que la etiqueta HTML muestra en la página.

Sintaxis

css=tag:contains("inner text")

• etiqueta = la etiqueta HTML del elemento al que se accede
• texto interno = el contenido de texto visible del elemento

Paso 1) Navegue a la pestaña Mercury Página de inicio de excursiones https://demo.guru99.com/test/newtours/ y examine la etiqueta “Password”. Observe su etiqueta HTML (“font” en este caso) y compruebe que el elemento no tiene atributos de clase, ID o nombre.

Paso 2) Tipo css=fuente:contiene(“Contraseña:”) cobren Selenium IDE Target cuadro y haga clic en Buscar. Selenium El IDE localiza la etiqueta Contraseña como se muestra a continuación.

Paso 3) Esta vez, reemplace el texto interior con “Boston” para que el Target se convierte en “css=font:contains(“Boston”)“. Haga clic en Buscar. La etiqueta “Boston a San Francisco” está resaltada, lo que demuestra que Selenium El IDE puede localizar una etiqueta larga incluso cuando solo se proporciona la primera palabra de su texto interno.

Selector CSS vs XPath en Selenium

Tanto los selectores CSS como XPath se utilizan para identificar elementos web en SeleniumSin embargo, presentan diferentes fortalezas. La siguiente tabla compara las dos estrategias de localización en dimensiones clave:

Criterios	Selector de CSS	XPath
Velocidad	Más rápido, funciona con el motor nativo del navegador.	Más lento, especialmente en navegadores antiguos.
SENTIDO DE SALIDA:	Solo hacia adelante (de padre a hijo)	Hacia adelante y hacia atrás (del niño al padre)
Sintaxis	Más cortas y similares a las reglas CSS.	Expresiones de ruta más largas y jerárquicas
Coincidencia de texto	Limitado a la pseudoclase :contains()	Funciones Strong text() y contains()
Mejores para	Diseños estáticos y aplicaciones web modernas	Recorrido complejo del DOM y localizadores basados ​​en texto

Mejores prácticas para escribir selectores CSS en Selenium

Escribir selectores CSS confiables va más allá de conocer la sintaxis. Las siguientes prácticas ayudan a los evaluadores a crear selectores CSS estables y mantenibles. Selenium Scripts que se conservan tras los cambios en la interfaz de usuario:

1. Preferir atributos únicos: Siempre seleccione los atributos id, data-test-id o name que se agregan explícitamente para la automatización. Estos se mantienen estables incluso cuando cambia el diseño visual.
2. Evite los selectores excesivamente anidados: Cadenas largas como div > div > ul > li > a Se rompen fácilmente cuando los desarrolladores refactorizan el marcado. Mantén los selectores lo más cortos posible.
3. Utilice las coincidencias parciales con prudencia: Patrones como [class*="btn-primary"] Toleran pequeños cambios en los nombres de las clases, pero también pueden coincidir con elementos no deseados.
4. Evite los localizadores basados ​​en índices: Selectores como nth-child(3) son frágiles porque al añadir un elemento hermano se desplaza cada posición.
5. Validar selectores en DevTools: Antes de ejecutar un Selenium script, pegue el selector en la consola de herramientas para desarrolladores de Chrome usando document.querySelector() para confirmar que devuelve exactamente un elemento.
6. Combina atributos para lograr un producto único: Cuando una clase es compartida por muchos elementos, agregue un filtro de atributo como por ejemplo: input.form-control[name="email"] para desambiguar el objetivo.
7. Documentar y reutilizar: Centraliza los selectores dentro de una clase Page Object para que una sola actualización corrija todas las pruebas que hagan referencia al mismo elemento.

Seguir estas pautas reduce la inestabilidad, mejora la velocidad de ejecución de las pruebas y hace que... Selenium suites más fáciles de mantener con el tiempo.

Resumen: Guía rápida de sintaxis de selectores CSS

La tabla a continuación consolida todos Selenium Patrón de selector CSS que se trata en esta guía:

Método	Target Sintaxis	Ejemplo
Etiqueta e identificación	css=etiqueta#id	css=entrada#correo electrónico
Etiqueta y clase	css=etiqueta.clase	css=entrada.texto de entrada
Etiqueta y atributo	css=etiqueta[atributo=valor]	css=entrada[nombre=apellido]
Etiqueta, clase y atributo	css=etiqueta.clase[atributo=valor]	css=entrada.texto de entrada[tabindex=1]
Texto interno	css=tag:contains(“text”)	css=fuente:contiene(“Contraseña:”)

Preguntas Frecuentes