Selector de CSS en Selenium

¿Qué es un selector CSS?

Selectores CSS en Selenium son patrones de cadenas que se utilizan para identificar un elemento basándose en una combinación de etiqueta HTML, identificación, clase y atributos. Localización mediante selectores CSS en Selenium Es más complicado que los métodos anteriores, pero es la estrategia de localización más común de los avanzados. Selenium usuarios porque puede acceder incluso a aquellos elementos que no tienen ID ni nombre.

Selectores CSS en Selenium Tienen muchos formatos, pero sólo nos centraremos en los más habituales. Los diferentes tipos de localizador CSS en Selenium IDE

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

Cuando utilizamos esta estrategia, siempre anteponemos el Target cuadro con “css=" como se mostrará en los siguientes ejemplos.

etiqueta e identificación – Selector CSS

Nuevamente, utilizaremos el cuadro de texto de correo electrónico de Facebook en este ejemplo. Como recordarás, tiene un ID de "correo electrónico" y ya hemos accedido a él en la sección "Ubicación por ID". Esta vez, utilizaremos un Selenium Selector CSS con ID para acceder a ese mismo elemento.

Sintaxis

css=tag#id

• etiqueta = la etiqueta HTML del elemento al que se accede
• # = el signo almohadilla. Esto 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.comUsando Firebug, examina el cuadro de texto “Correo electrónico o teléfono”.

En este punto, tenga en cuenta que la etiqueta HTML es “input” y su ID es “email”. Por lo tanto, nuestra sintaxis será “css=input#email”.

Paso 2) Introduzca “css=input#email” en el Target caja de Selenium IDE y haga clic en el botón Buscar. Selenium IDE debería poder resaltar ese elemento.

etiqueta y clase – Selector CSS

Selector de CSS en Selenium Usar una etiqueta HTML y un nombre de clase es similar a usar una etiqueta y un ID, pero en este caso, se usa un punto (.) en lugar de un signo de almohadilla.

Sintaxis

css=tag.class

• etiqueta = la etiqueta HTML del elemento al que se accede
• . = el signo del punto. Esto siempre debería estar presente cuando se utiliza un selector CSS con clase
• clase = la clase del elemento al que se accede

Paso 1) Ir a la página de demostración https://demo.guru99.com/test/facebook.html y use Firebug para inspeccionar el cuadro de texto “Correo electrónico o teléfono”. Observe que su etiqueta HTML es “input” y su clase es “inputtext”.

Paso 2) In Selenium IDE, ingrese "css=input.inputtext" en el Target cuadro y haga clic en Buscar. Selenium IDE debería poder reconocer el cuadro de texto de Correo electrónico o Teléfono.

Tenga en cuenta que cuando varios elementos tienen la misma etiqueta HTML y nombre, solo se reconocerá el primer elemento en el código fuente.Usando Firebug, inspecciona el cuadro de texto Contraseña en Facebook y observa que tiene el mismo nombre que el cuadro de texto Correo electrónico o Teléfono.

La razón por la que solo se destacó el cuadro de texto Correo electrónico o Teléfono en la ilustración anterior es que aparece primero en la fuente de la página de Facebook.

etiqueta y atributo – Selector CSS

Esta estrategia utiliza la etiqueta HTML y un atributo específico del elemento al que se accederá.

Sintaxis

css=tag[attribute=value]

• etiqueta = la etiqueta HTML del elemento al que se accede
• [ y ] = corchetes dentro de los cuales se colocará un atributo específico y su valor correspondiente
• atributo = el atributo que se utilizará. Es recomendable utilizar un atributo que sea exclusivo del elemento, como un nombre o ID.
• valor = el valor correspondiente del atributo elegido.

Paso 1) Navegue a Mercury Página de registro de tours https://demo.guru99.com/test/newtours/register.php e inspeccione el cuadro de texto “Apellido”. Tome nota de su etiqueta HTML (“input” en este caso) y su nombre (“lastName”).

Paso 2) In Selenium IDE, ingrese “css=input[nombre=apellido]” en el Target cuadro y haga clic en Buscar. Selenium IDE debería poder acceder al cuadro Apellido correctamente.

Cuando varios elementos tienen la misma etiqueta HTML y atributo, solo se reconocerá el primero.. Este comportamiento es similar a localizar elementos utilizando selectores CSS 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 del punto. Esto siempre debería estar presente cuando se utiliza un selector CSS con clase
• clase = la clase del elemento al que se accede
• [ y ] = corchetes dentro de los cuales se colocará un atributo específico y su valor correspondiente
• atributo = el atributo que se utilizará. Es recomendable utilizar un atributo que sea exclusivo del elemento, como un nombre o ID.
• valor = el valor correspondiente del atributo elegido.

Paso 1) Ir a la página de demostración https://demo.guru99.com/test/facebook.html y use Firebug para inspeccionar los cuadros de entrada "Correo electrónico o teléfono" y "Contraseña". Tome nota de su etiqueta HTML, clase y atributos. Para este ejemplo, seleccionaremos sus atributos "tabindex".

Paso 2) Primero accederemos al cuadro de texto 'Correo electrónico o teléfono'. Por lo tanto, utilizaremos un valor de tabindex de 1. Ingrese "css=input.inputtext[tabindex=1]" en Selenium IDE Target y haga clic en Buscar. El cuadro de entrada "Correo electrónico o teléfono" debe estar resaltado.

Paso 3) Para acceder al cuadro de ingreso de contraseña, simplemente reemplace el valor del atributo tabindex. Ingrese “css=input.inputtext[tabindex=2]” en el campo Target cuadro y haga clic en el botón Buscar. Selenium IDE debe poder identificar el cuadro de texto Contraseña correctamente.

texto interno – Selector CSS

Como habrás notado, las etiquetas HTML rara vez reciben atributos de identificación, nombre o clase. Entonces, ¿cómo accedemos a ellos? La respuesta es mediante el uso de sus textos internos. Los textos internos son los patrones de cadenas 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 texto interno del elemento

Paso 1) Navegue a Mercury Página de inicio de excursiones https://demo.guru99.com/test/newtours/ y use Firebug para investigar la etiqueta "Contraseña". Tome nota de su etiqueta HTML (que es "fuente" en este caso) y observe que no tiene atributos de clase, identificación o nombre.

Paso 2) Tipo css=fuente:contiene(“Contraseña:”) into Selenium IDE Target cuadro y haga clic en Buscar. Selenium El IDE debería poder acceder a la etiqueta de Contraseña como se muestra en la imagen a continuación.

Paso 3) Esta vez, reemplace el texto interior con "Boston" para que su Target Ahora se convertirá en “css=font:contains(“Boston”)”. Haga clic en Buscar. Debería notar que la etiqueta “Boston a San Francisco” se resalta. Esto le muestra que Selenium El IDE puede acceder a una etiqueta larga incluso si acaba de indicar la primera palabra de su texto interno.

Resumen

Sintaxis para localizar mediante el uso del selector CSS

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]