how use css selector
En nuestro tutorial anterior de Selenium , aprendimos diferentes tipos de localizadores. También aprendimos a usar: ID, ClassName, Name, Link Text y localizadores XPath para identificar elementos web en una página web.
Continuando con eso, hoy aprenderemos cómo usar CSS Selector como localizador . Este es nuestro sexto tutorial en nuestro serie gratuita de entrenamiento de selenio .
Usando CSS Selector como localizador:
CSS Selector es la combinación de un selector de elementos y un valor de selector que identifica el elemento web dentro de una página web. La composición de un selector de elemento y un valor de selector se conoce como patrón de selector.
El patrón de selección se construye utilizando etiquetas HTML, atributos y sus valores. El tema central detrás del procedimiento para crear CSS Selector y Xpath es muy similar subyacente a la única diferencia en su protocolo de construcción.
Al igual que Xpath, el selector de CSS también puede localizar elementos web que no tengan ID, clase o nombre.
mejor software de recuperación de datos para disco duro externo
Así que ahora avanzando, analicemos los tipos primitivos de selectores CSS:
Lo que vas a aprender:
- Selector de CSS: ID
- Selector de CSS: Clase
- Selector de CSS: atributo
- Selector de CSS: ID / Clase y atributo
- Selector de CSS: subcadena
- Selector de CSS: texto interior
- Lectura recomendada
Selector de CSS: ID
En esta muestra, accederíamos al cuadro de texto 'Correo electrónico' presente en el formulario de inicio de sesión en Gmail.com.
El cuadro de texto Correo electrónico tiene un atributo de ID cuyo valor se define como 'Correo electrónico'. Por lo tanto, el atributo de ID y su valor se pueden usar para crear un selector de CSS para acceder al cuadro de texto del correo electrónico.
Creando CSS Selector para elemento web
Paso 1 : Localice / inspeccione el elemento web (cuadro de texto 'Correo electrónico' en nuestro caso) y observe que la etiqueta HTML es 'entrada' y el valor del atributo ID es 'Correo electrónico' y ambos colectivamente hacen una referencia al 'Cuadro de texto del correo electrónico'. Por lo tanto, los datos anteriores se usarían para crear CSS Selector.
Verificar el valor del localizador
Paso 1 : Escriba 'css = input # Email', es decir, el valor del localizador en el cuadro de destino en el IDE de Selenium y haga clic en el botón Buscar. Observe que el cuadro de texto del correo electrónico estará resaltado.
Sintaxis
css =
- Etiqueta HTML - Es la etiqueta que se utiliza para denotar el elemento web al que queremos acceder.
- # - El signo de almohadilla se utiliza para simbolizar el atributo de ID. Es obligatorio utilizar el signo de almohadilla si se utiliza el atributo de ID para crear el selector de CSS.
- Valor del atributo ID - Es el valor de un atributo de ID al que se accede.
- El valor de ID siempre está precedido por un signo de almohadilla.
Nota: También aplicable para otros tipos de selectores CSS
- Mientras especifica el Selector de CSS en el cuadro de texto de destino de Selenium IDE, recuerde siempre anteponerlo con “css =”.
- La secuencia de los artefactos anteriores es inalterable.
- Si dos o más elementos web tienen la misma etiqueta HTML y el mismo valor de atributo, se identificará el primer elemento marcado en la fuente de la página.
Selector de CSS: Clase
En esta muestra, accederíamos a la casilla de verificación 'No cerrar sesión' presente debajo del formulario de inicio de sesión en gmail.com.
La casilla de verificación 'No cerrar sesión' tiene un atributo de clase cuyo valor se define como 'recordar'. Por lo tanto, el atributo Class y su valor se pueden usar para crear un selector CSS para acceder al elemento web designado.
Ubicar un elemento usando Class como CSS Selector es muy similar a usar ID, la única diferencia radica en su formación de sintaxis.
Crear un selector de CSS para un elemento web
Paso 1 : Localice / inspeccione el elemento web (casilla de verificación 'Mantener la sesión iniciada' en nuestro caso) y observe que la etiqueta HTML es 'etiqueta' y el valor del atributo de ID es 'recordar' y ambos colectivamente hacen una referencia a 'Permanecer firmado en casilla de verificación ”.
Verificar el valor del localizador
Paso 1 : Escriba 'css = label.remember', es decir, el valor del localizador en el cuadro de destino en el IDE de Selenium y haga clic en el botón Buscar. Observe que la casilla de verificación 'No cerrar sesión' estaría resaltada.
Sintaxis
css =
- . - El signo de punto se utiliza para simbolizar el atributo de clase. Es obligatorio utilizar el signo de punto si se utiliza un atributo de clase para crear un selector de CSS.
- El valor de Clase siempre está precedido por un signo de punto.
Selector de CSS: atributo
En esta muestra, accederíamos al botón 'Iniciar sesión' que se encuentra debajo del formulario de inicio de sesión en gmail.com.
El botón 'Iniciar sesión' tiene un atributo de tipo cuyo valor se define como 'enviar'. Por lo tanto, el tipo de atributo y su valor se pueden usar para crear un selector de CSS para acceder al elemento web designado.
Crear un selector de CSS para un elemento web
Paso 1 : Localice / inspeccione el elemento web (botón 'Iniciar sesión' en nuestro caso) y observe que la etiqueta HTML es 'entrada', el atributo es tipo y el valor del atributo tipo son 'enviar' y todos juntos hacen una referencia a el botón 'Iniciar sesión'.
Verificar el valor del localizador
Paso 1 : Escriba 'css = input (type =’ submit ’)', es decir, el valor del localizador en el cuadro de destino en el IDE de Selenium y haga clic en el botón Buscar. Observe que el botón 'Iniciar sesión' estaría resaltado.
Sintaxis
css =
- Atributo - Es el atributo que queremos usar para crear CSS Selector. Puede valorar, escribir, nombrar, etc. Se recomienda elegir un atributo cuyo valor identifique unívocamente el elemento web.
- Valor del atributo - Es el valor de un atributo al que se accede.
Selector de CSS: ID / Clase y atributo
En esta muestra, accederíamos al cuadro de texto 'Contraseña' presente en el formulario de inicio de sesión en gmail.com.
El cuadro de texto 'Contraseña' tiene un atributo de ID cuyo valor se define como 'Contraseña', atributo de tipo cuyo valor se define como 'contraseña'. Por lo tanto, el atributo de ID, el atributo de tipo y sus valores se pueden usar para crear un selector de CSS para acceder al elemento web designado.
¿Cuál es el mejor limpiador de computadoras gratis?
Crear un selector de CSS para un elemento web
Paso 1 : Localice / inspeccione el elemento web (cuadro de texto 'Contraseña' en nuestro caso) y observe que la etiqueta HTML es 'entrada', los atributos son ID y tipo y sus valores correspondientes son 'Contraseña' y 'contraseña' y todos juntos haga una referencia al cuadro de texto 'Contraseña'.
Verificar el valor del localizador
Paso 1 : Escriba “css = input # Passwd (name =’ Passwd ’)”, es decir, el valor del localizador en el cuadro de destino en el IDE de Selenium y haga clic en el botón Buscar. Observe que el cuadro de texto 'Contraseña' estaría resaltado.
Sintaxis
css =
También se pueden proporcionar dos o más atributos en la sintaxis.Por ejemplo, “Css = input # Passwd (type =’ password ’) (name =’ Passwd ’)”.
Selector de CSS: subcadena
CSS en Selenium permite hacer coincidir una cadena parcial y así derivar una característica muy interesante para crear selectores de CSS usando subcadenas. Hay tres formas en las que se pueden crear selectores de CSS en función del mecanismo utilizado para hacer coincidir la subcadena.
Tipos de mecanismos
Todos los mecanismos subyacentes tienen un significado simbólico.
- Coincidir con un prefijo
- Coincidir con un sufijo
- Coincidir con una subcadena
Discutámoslos en detalle.
Coincidir con un prefijo
Se utiliza para corresponder a la cadena con la ayuda de un prefijo coincidente.
Sintaxis
css =
- ^ - Notación simbólica para hacer coincidir una cadena con prefijo.
- Prefijo - Es la cadena basada en la operación de coincidencia que se realiza. Se espera que la cadena probable comience con la cadena especificada.
Por ejemplo: Consideremos 'Cuadro de texto de contraseña', por lo que el selector de CSS correspondiente sería:
css = input # Passwd (name ^ = ’Pass’)
Coincidir con un sufijo
Se utiliza para corresponder a la cadena con la ayuda de un sufijo coincidente.
Sintaxis
css =
- # - Notación simbólica para hacer coincidir una cadena con sufijo.
- El sufijo - Es la cadena basada en la operación de coincidencia que se realiza. Se espera que la cadena probable termine con la cadena especificada.
Por ejemplo,Consideremos nuevamente el 'cuadro de texto de la contraseña', por lo que el selector de CSS correspondiente sería:
css = input # Passwd (nombre $ = ’wd’)
Coincidir con una subcadena
Se utiliza para corresponder a la cadena con la ayuda de una subcadena coincidente.
Sintaxis
css =
- * - Notación simbólica para hacer coincidir una cadena usando una subcadena.
- Sub cadena - Es la cadena basada en la operación de coincidencia que se realiza. Se espera que la cadena probable tenga el patrón de cadena especificado.
Por ejemplo,consideremos nuevamente el 'cuadro de texto de la contraseña', por lo que el selector de CSS correspondiente sería:
css = input # Passwd (nombre $ = ’wd’)
Selector de CSS: texto interior
El texto interno nos ayuda a identificar y crear CSS Selector usando un patrón de cadena que la etiqueta HTML manifiesta en la página web.
Considere, '¿Necesita ayuda?' hipervínculo presente debajo del formulario de inicio de sesión en gmail.com.
La etiqueta de anclaje que representa el hipervínculo tiene un texto incluido. Por lo tanto, este texto se puede utilizar para crear un selector de CSS para acceder al elemento web designado.
Sintaxis:
css =
- : - El signo de punto se usa para simbolizar el método contiene
- Contiene: es el valor de un atributo de clase al que se accede.
- Texto: el texto que se muestra en cualquier lugar de la página web independientemente de su ubicación.
Esta es una de las estrategias más utilizadas para localizar elementos web debido a su sintaxis simplificada.
Debido al hecho de que la creación de CSS Selector y Xpath requiere mucho esfuerzo y práctica, el proceso solo lo realizan usuarios más sofisticados y capacitados.
Siguiente tutorial n. ° 7 : Continuando con nuestro próximo tutorial, aprovecharemos la oportunidad para presentarle una extensión de las estrategias de localización. Así, en el siguiente tutorial, estudiaríamos el mecanismo para localizar elementos web en Google Chrome e Internet Explorer.
¿Por qué es C ++ mejor que Java?
Estamos cubriendo los localizadores de selenio con más detalle, ya que es una parte importante de la creación de Selenium Script.
Háganos saber sus consultas / comentarios a continuación.
Lectura recomendada
- Cómo localizar elementos en los navegadores Chrome e IE para crear scripts de Selenium - Tutorial de Selenium n. ° 7
- Verifique la visibilidad de los elementos web usando varios tipos de comandos de WebDriver - Tutorial de Selenium n. ° 14
- Introducción a Selenium WebDriver - Tutorial de Selenium n. ° 8
- Scripts eficientes de Selenium y escenarios de resolución de problemas - Tutorial de Selenium n. ° 27
- Depuración de scripts de Selenium con registros (Tutorial de Log4j) - Tutorial de Selenium n. ° 26
- Más de 30 mejores tutoriales de selenio: aprenda selenio con ejemplos reales
- Tutorial de Cucumber Selenium: Integración de Cucumber Java Selenium WebDriver
- Uso de la clase selecta de selenio para manejar elementos desplegables en una página web - Tutorial de selenio n. ° 13