Selectores CSS

En esta parte del tutorial, aprenderemos sobre los selectores CSS y crearemos selectores CSS manualmente utilizando varios atributos de elementos web HTML. Utilizamos la herramienta firebug o la herramienta del desarrollador para obtener la información HTML de los elementos web. Para más detalles sobre la descarga y el uso de la herramienta firebug/developer, consulta el tutorial – Localizadores en Selenium WebDriver.

Índice

CSS y selectores CSS – introducción

CSS son las siglas en inglés de Hojas de Estilo en Cascada, que se utilizan para dar estilo a diversos elementos de una página web HTML. En los archivos .css, podemos buscar elementos específicos de una página web (archivos .html) y luego darles estilo, por ejemplo, estableciendo el tamaño de la fuente, la anchura, la altura, etc.

Utilizamos ciertas reglas proporcionadas como selectores CSS para encontrar los elementos web que hay que estilizar.

Por ejemplo, el siguiente comando busca primero un elemento web que coincida con el patrón del selector – «div#searchBox» y, a continuación, alinea el texto que contiene al centro.

div#searchBox { alineación del texto: centro;}

En Selenium, podemos utilizar estas reglas/patrones de selección CSS para buscar elementos web y realizar posteriormente diversas operaciones sobre ellos. Por ejemplo:

//Localización del elemento searchBox mediante el selector CSS

WebElement searchBox = driver.findElement(By.cssSelector(«div#searchBox»));

//Efectuar una operación de clic sobre el elemento

searchBox.sendKeys(«ITtester»);

Veamos ahora las diferentes reglas del selector CSS junto con su sintaxis y ejemplos de uso.

Selectores CSS

A continuación se muestra la sintaxis y ejemplos de cómo buscar los elementos necesarios y utilizarlos en los scripts selenium.

Uso del DNI

Regla del selector CSS – #id

Para la muestra HTML siguiente-

<><button id=»submitButton1″ type=»button» class=»btn» Enviar /button>

• Localizador CSS – #submitButton1
• Descripción – ‘#submitButton1’ selecciona el elemento con id ‘submitButton1’.

Utilizar la clase – clase

Regla del selector CSS – .class

Para la muestra HTML siguiente-

<><button id=»submitButton1″ type=»button» class=»btn» Enviar /button>

• Localizador CSS – .btn
• Descripción – ‘.btn’ selecciona todos los elementos con clase ‘btn’.

Uso de una etiqueta – tag

Regla del selector CSS – tagName

Para la muestra HTML siguiente-

<input id=»fname» type=»text» name=»firstName» class=»textbox»>

• Localizador CSS – entrada
• Descripción – ‘entrada’ selecciona todos los elementos de tipo entrada.

Utilizar atributos y sus valores

Regla del selector CSS – [attributeName=’attributeValue’]

Para la muestra HTML siguiente-

<input id=»fname» type=»text» name=»firstName» class=»textbox»>

• Localizador CSS – [name=’firstName’]
• [name=’firstName’] Descripción – selecciona los elementos cuyo atributo name tenga el valor ‘firstName’.

Utilizando estas reglas básicas de localización de elementos web, ahora podemos utilizarlas conjuntamente para crear localizadores más robustos que seleccionen elementos únicos.

Utilizar etiquetas e identificadores

Regla del selector CSS – tag#id

Para la muestra HTML siguiente-

<input id=»fname» type=»text» name=»firstName» class=»textbox»>

• Localizador CSS – input#fname
• Descripción – input#fname selecciona el elemento ‘input’ con id ‘fname’.

Utilizar etiquetas y clases

Regla del selector CSS – tag.class

Para la muestra HTML siguiente-

<input id=»fname» type=»text» name=»firstName» class=»textbox»>

• Localizador CSS – input.textbox
• Descripción – input.textbox selecciona el elemento ‘input’ con id ‘textbox’.

Utilizar etiquetas y atributos

Regla del selector CSS – etiqueta[attributeName=’attributeValue’]

Para la muestra HTML siguiente-

<input id=»fname» type=»text» name=»firstName» class=»textbox»>

• Localizador CSS – entrada[name= firstname=»»]
• [name= firstname=»»] Descripción – input selecciona el elemento «input» con atributo «name» con valor «firstName».

Buscar elementos hijos (sólo elementos hijos directos – child)

>Regla del selector CSS – parentLocator childLocator

Para la muestra HTML siguiente-

<div id=»buttonDiv» class=»small»>

<><button id=»submitButton1″ type=»button» class=»btn» Enviar /button>

</div>

• Localizador CSS – div#buttonDiv>button
• Descripción – ‘div#buttonDiv>button’ va primero al elemento div con id ‘buttonDiv’ y luego selecciona su elemento hijo – ‘button’.

Colocación de elementos dentro de otros elementos (hijo/subhijo)

Regla del selector CSS – localizador1 localizador2

Para la muestra HTML siguiente-

<div id=»buttonDiv» class=»small»>

<><button id=»submitButton1″ type=»button» class=»btn» Enviar /button>

</div>

• Localizador CSS – botón div#buttonDiv
• Descripción – ‘div#buttonDiv button’ primero navega hasta el elemento div con id ‘buttonDiv’ y luego selecciona el elemento ‘button’ dentro de él (que puede ser su hijo o hija).

enésimo hijo

Regla del selector CSS – :nth-child(n)

Para la muestra HTML siguiente-

<ul id=»TiposDePrueba»>

<><li Pruebas de automatización /li>

<><li Pruebas de rendimiento /li>

<><li Pruebas manuales /li>

</ul>

• Localizador CSS – #testingTypes li:nth-child(2)
• Descripción – ‘#testingTypes li:nth-child(2)’ selecciona el elemento con id ‘testingType’ y luego encuentra 2. de un descendiente de tipo li, t. j. Elemento de la lista «Pruebas de rendimiento».

Buscar hermanos

Regla del selector CSS – localizador1+localizador2

Para la muestra HTML siguiente-

<ul id=»TiposDePrueba»>

<><li id=»automatización» Pruebas de automatización /li>

<><li Pruebas de rendimiento /li>

<><li Pruebas manuales /li>

</ul>

• Localizador CSS – li#automatización + li
• Descripción – ‘li#automatizacion + li’ va primero al elemento li con id ‘automatizacion’ y luego selecciona su li vecino, t. j. Elemento de la lista «Pruebas de rendimiento».

Para procesar elementos dinámicos cuyos ids y otros localizadores se generan dinámicamente (no se conocen de antemano). Podemos explotar los localizadores anteriores utilizando diferentes relaciones padre-hermano de los elementos dinámicos. Además, también podemos utilizar algunos localizadores CSS especiales para asignar valores parciales a los atributos.

^ – Comienza en

Regla del selector CSS – [attribute^=attributeValue]

Para la muestra HTML siguiente-

<><button id=»user1_btn_263″ type=»button» class=»btn» Enviar a /button>

• Localizador CSS – id^=»usuario1″
• Descripción – ‘id^=»usuario1″’ selecciona el elemento cuyo id empieza por «usuario1

$ – Termina en

Regla del selector CSS – [attribute$=attributeValue]

Para la muestra HTML siguiente-

<><button id=»user1_btn_263″ type=»button» class=»btn» Enviar /button>

• Localizador CSS – id$=»btn_263″
• Descripción – ‘id$=»btn_263″’ selecciona el elemento cuyo id termina en «btn_263

* – Contiene

Regla del selector CSS – [attribute*=attributeValue]

Para la muestra HTML siguiente-

<><button id=»user1_btn_263″ type=»button» class=»btn» Enviar /button>

• Localizador CSS – id*=»btn»
• Descripción – ‘id*=»btn»‘ selecciona el elemento cuyo id contiene el valor «btn»

Eso es todo lo que hemos preparado en este artículo. El tutorial completo de Selenium.