Si estás pensando en aprender cypress o testcafe que son frameworks que nativamente no soportan css selectors o simplemente quieres aprender sobre esta manera de identificar los elementos (tal cual como lo hacen los desarrolladores frontend), en esta oportunidad hablaremos de los elementos básicos con ejemplos de uso.
Definición
Los selectores CSS definen el patrón para seleccionar elementos a los que luego se aplica un conjunto de reglas CSS (Como mencioné anteriormente es utilizado por los desarrolladores frontend, en las que estás reglas pueden definir comportamiento o forma de visualizar elementos desde la web)
Para nuestro uso: los selectores CSS permiten seleccionar elementos a los que luego aplicaremos acción o validación.
Categorías
Agruparemos los selectores css en función del tipo de elementos que pueden seleccionar:
Universal selector
Selecciona todos los elementos,
Sinstáxis: *
Ejemplo: *|* Para usar este selector en automatización debemos usar el combinador de namespace pipe o barra vertical | para que pueda retornar el elemento, como este retorna todos los elementos la primera coincidencia será el elemento con la etiqueta <html>
Type selector
Selecciona todos los elementos que coinciden con el nombre del elemento especificado (Esto hace referencia a las etiquetas html)
Sintáxis: nombreDelElemento
Ejemplo: input Buscará todos los elementos cuya etiqueta sea <input> (equivalente en selenium a find_element(By.TAG_NAME, 'input').
Buscar por tag o etiqueta es una gran alternativa para aplicaciones hechas en angular que al compilarse genera etiquetas propias (incluso atributos):
Vemos 2 coincidencias porque estoy usando de ejemplo el demo de angular el cual está alojado en stackblitz y la primera coincidencia es el archivo dónde está definido el componente
Id selector
Buscará un elemento basándose en el valor de su atributo id. Solo puede haber un elemento con un determinado ID dentro de un documento (Guiño, guiño ;). Hay casos de casos)
Sintáxis: #nombreDelId#message-notice` Buscará la coincidencia sin importar la etiqueta en la cual se encuentra definido.
Ejemplo:
Class selector
Buscará todos los elementos que se encuentran identificados con el valor indicado en el atributo class
Sintáxis: .nombreDeLaClase
Ejemplo: .text-display-1
En el desarrollo de frontend este atributo es utilizado principalmente para agrupar diferentes elementos que contendrán mismos estilos y/o comportamiento. En la medida de lo posible evitar utilizar solo este atributo, si no hay más opciones; buscar de acompañar con algún otro identificador para hacerlo único.
Attribute selector
Las etiquetas html (type selector) pueden recibir múltiples atributos, estos son valores adicionales que configuran los elementos o ajustan su comportamiento de diversas maneras para satisfacer los criterios que desean los usuarios. Ejemplo: declarar una etiqueta a y agregarle el atributo role con un valor de button
Sintáxis: [nombreDelAtributo]
Ejemplo: [ng-controller]
Como podemos ver en la imagen anterior, es posible que al usar la búsqueda por atributos podamos tener varias coincidencias, por esto se recomienda nombreDelAtributo + valorDelAtributo siendo la sintáxis: [nombreDelAtributo=valorDelAtributo] ejemplo: [ng-controller="TodoListController as todoList"]
Hasta este punto ya conocemos de manera básica como identificar elementos utilizando los selectores css, si bien para crear nuestros objetos identificadores de elementos para nuestras pruebas en muchas oportunidades tendremos que combinar algunos de estos, ya tenemos la base necesaria para empezar a explorar.
Si te gusta mi contenido puedes apoyarme siguiéndome, compartiendo mis publicaciones en tus redes sociales o comprándome un café:
Top comments (0)