Selectores CSS para automatización de pruebas
Tags: css, selectors, automation, testing
Published: 2023-01-30 01:05:00

> Si estás pensando en aprender cypress o testcafe que son frameworks que nativamente no soportan [css selectors](https://www.w3schools.com/cssref/css_selectors.php) 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 ](https://es.wikipedia.org/wiki/Espacio_de_nombres)`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>` 

![using universal selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98800rpesc1gm8ubiown.png)

### 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')`.

![using input tag selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/770rdymu2ur9ks2ujbeu.png)
Buscar por tag o etiqueta es una gran alternativa para aplicaciones hechas en angular que al compilarse genera etiquetas propias (incluso atributos):

![angular custom tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p4iyygxcnou5ra1cy9qs.png)

> 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
Ejemplo: `#message-notice` Buscará la coincidencia sin importar la etiqueta en la cual se encuentra definido.

![using id attribute](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vb8r0wcfmt78u2s4g53n.png)

## 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`

![using class attribute](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pnmq1am0s4k28d7tep96.png)

> 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`
![html attribute with role](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4sx5mf8a0z5uh7urex4.png)
Sintáxis: `[nombreDelAtributo]`
Ejemplo: `[ng-controller]`

![using attribute selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1cau0yd65z6tbn254mry.png)
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"]`
![using attribute selector with value](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o8ke23rlibleokj5aoyj.png)

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é:
[![alfred's ko-fi link](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/V7V7I9J8T)
![Alfred coffee lover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/un2ecd7967thmtts9mwj.png)