CSS Selectores en Selenium WebDriver: Tutorial Completo

Guía Completa de CSS Selectores en Selenium WebDriver

¿Cómo usar los selectores de CSS en Selenium WebDriver? Este tutorial muestra cómo localizar elementos web utilizando selectores de CSS.

Uno de los aspectos más importantes de la automatización de pruebas es poder identificar diferentes elementos en la página para interactuar. La ubicación de elementos por css es más rápida que por xpath. Si quieres aprender XPathte recomiendo el siguiente artículo: XPath en Selenium WebDriver: Tutorial Completo

En WebDriver, para interactuar con un elemento web, como hacer clic o escribir, primero necesitamos localizar los elementos.

Hay diferentes maneras en que podemos localizar elementos con WebDriver, para conocerlas, visita el siguiente artículo: Localizar elementos de UI con Selenium WebDriver

En este tutorial, observamos cómo podemos usar los selectores de CSS en detalle con diferentes ejemplos para interactuar con elementos web.

El uso de selectores de CSS para localizar elementos tiene algunos beneficios:

  • Es mas rápido
  • Más legible
  • Usado más a menudo

Localización de elementos por atributo

Imaginemos que tenemos una etiqueta con los siguientes atributos [id, class, name, value]

<input type="text" id="fistname" name="first_name" class="myForm">

La forma genérica de ubicar elementos por su atributo en los selectores de CSS es

css = element_name[<nombre_atributo>='<value>']

Ejemplo:

css=input[name='first_name']

Podemos usar el mismo enfoque para ubicar por id y atributos de clase, sin embargo, hay formas cortas que podemos usar para hacerlo más legible.

En CSS, podemos usar la notación # para seleccionar el id:

css="input#firstname" o solo css="#firstname"

También podemos usar la anotación para seleccionar la clase

css="input.myForm" o solo css=".myForm"

Tenga mucho cuidado al usar las notaciones de forma corta, especialmente la Notación de clase ya que podría haber muchos elementos web en la fuente HTML con el mismo atributo de clase.

Localización de elementos con más de un atributo

A veces es necesario ser más específico con los criterios de selección para ubicar el elemento correcto.

Supongamos que tiene un fragmento de código HTML como se muestra a continuación.

<div class="ajax_enabled" style="display:block">

El valor de display puede ser «none» o «block» dependiendo de la llamada ajax. En esta situación, tenemos que ubicar el elemento por clase y estilo.

Podríamos usar:

css="div[class='ajax_enabled'] [style='display:block']"

Localizar elementos hijo

Suponiendo el siguiente fragmento de código HTML

<div id="child"><img src="./logo.png"></div>

Para localizar la etiqueta de la imagen (img), usaríamos:

css="div#child img"

Hay ocasiones en las que hay varios elementos secundarios dentro del mismo elemento principal, como elementos de lista

<ul id="fruit">
    <li>Apple</li>
    <li>Orange</li>
    <li>Banana</li>
</ul>

Como puede verse, los elementos individuales de la lista no tienen ningún ID asociado a ellos. Si queremos ubicar el elemento con el texto «Orange», tenemos que usar «nth-of-type»

css="ul#fruit li:nth-of-type(2)"

Del mismo modo, si necesitamos seleccionar el último elemento hijo, es decir, «Banana», podemos usar

css="ul#fruit li:last-child"

Strings e ID aleatorios

También podemos usar uniones de cadenas para localizar elementos. Esto es particularmente útil cuando queremos encontrar elementos que comiencen con ciertos caracteres, que terminen con ciertos caracteres o que contengan ciertos caracteres en particular.

Comienza con, termina con y contiene

En este ejemplo, los tres elementos div contienen la palabra «random».

<div id="123_randomId">
<div id="randomId_456">
<div id="123_pattern_randomId">

Si queremos seleccionar el primer elemento div, usaríamos ^= que significa «comienza con»:

css="div[id^='123']"

Para seleccionar el segundo elemento div, usaríamos $= que significa «termina con»:

css="div[id$='456']"

Y para seleccionar el último elemento div usaríamos *= que significa «subcadena»

css="div[id*='_pattern_']"

También podemos usar los ‘contains’

css="div:contains(_pattern_)"

El atributo NO contiene un valor específico

En WebDriver, ¿cómo encuentra elementos cuyo atributo contenga valores que no desea seleccionar? Este ejemplo de selector de CSS muestra cómo NO seleccionar por valor de atributo específico

Supongamos que tiene muchos elementos que comparten el mismo atributo y valor de atributo, pero algunos de esos elementos tienen otras variables anexadas al valor. Ejemplo:

<div class="dia pasado calendar-day-2018-02-13 calendar-dow-1 unavailable">
<div class="dia hoy calendar-day-2018-02-14 calendar-dow-2 unavailable">
<div class="dia calendar-day-2018-02-15 calendar-dow-3">
<div class="dia calendar-day-2018-02-16 calendar-dow-4">

En el fragmento de código anterior, queremos seleccionar un día disponible (es decir, los dos últimos divs)

Como se puede ver, los cuatro divs contienen «calendar-day-» pero los dos primeros también contienen «unavailable» que no queremos.

El selector CSS para NO seleccionar los dos primeros divs es:

css = "div[class*=calendar-day-]:not([class*='unavailable'])"

Un poco más de selectores CSS

En CSS, los selectores son patrones que se utilizan para seleccionar los elementos que desea. A continuación te presentamos una tabla con todos los selectores disponibles para CSS con un ejemplo. Igualmente puede ver el uso de cada selector en el siguiente link CSS Selector Tester

SelectorEjemploDescripción del ejemplo
.clase.introSelecciona todos los elementos con class=»intro»
#id#firstnameSelecciona el elemento con  id=»firstname»
**Selecciona todos los elementos
elementopSelecciona todos los elementos <p>
elemento,elementodiv, pSelecciona todos los elementos <div> y todos los elementos <p>
elemento elementodiv pSelecciona todos los elementos <p> dentro de los elementos <div>
elemento>elementodiv > pSelecciona todos los elementos <p> donde el padre es un elemento <div>
elemento+elementodiv + pSelecciona todos los elementos <p> que se colocan inmediatamente después de los elementos <div>
elemento1~elemento2p ~ ulSelecciona cada elemento <ul> que está precedido por un elemento <p>
[atributo][target]Selecciona todos los elementos con un atributo de destino.
[atributo=valor][target=_blank]Selecciona todos los elementos con target=»_blank»
[atribut0~=valor][title~=flower]Selecciona todos los elementos con un atributo de título que contiene la palabra «flower»
[atributo|=valor][lang|=en]Selecciona todos los elementos con un valor de atributo lang que comience con «en»
[atributo^=valor]a[href^=»https»]Selecciona cada elemento <a> cuyo valor de atributo href comienza con «https»
[atributo$=valor]a[href$=».pdf»]Selecciona cada elemento <a> cuyo valor de atributo href termina con «.pdf»
[atriburo*=valor]a[href*=»tutorial»]Selecciona cada elemento <a> cuyo valor de atributo href contiene substring «tutorial»
:activea:activeSelecciona el enlace activo.
::afterp::afterInserta algo después del contenido de cada elemento <p>
::beforep::beforeInsertar algo antes del contenido de cada elemento <p>
:checkedinput:checkedSelecciona cada elemento <input> marcado (chequeado)
:defaultinput:defaultSelecciona el elemento <input> predeterminado
:disabledinput:disabledSelecciona cada elemento <input> deshabilitado
:emptyp:emptySelecciona cada elemento <p> que no tiene hijos (incluidos los nodos de texto)
:enabledinput:enabledSelecciona cada elemento <input> habilitado
:first-childp:first-childSelecciona cada elemento <p> que sea el primer hijo de su padre
::first-letterp::first-letterSelecciona la primera letra de cada elemento <p>
::first-linep::first-lineSelecciona la primera línea de cada elemento <p>
:first-of-typep:first-of-typeSelecciona cada elemento <p> que sea el primer elemento <p> de su padre
:focusinput:focusSelecciona el elemento input que tiene el foco.
:hovera:hoverSelecciona enlaces que tiene el puntero de mouse encima
:in-rangeinput:in-rangeSelecciona elementos input con un valor dentro de un rango especificado
:indeterminateinput:indeterminateSelecciona elementos input que están en un estado indeterminado
:invalidinput:invalidSelecciona todos los elementos input con un valor inválido
:lang(language)p:lang(it)Selecciona cada elemento <p> con un atributo lang igual a «it» (italiano)
:last-childp:last-childSelecciona cada elemento <p> que sea el último hijo de su padre
:last-of-typep:last-of-typeSelecciona cada elemento <p> que sea el último elemento <p> de su padre
:linka:linkSelecciona todos los enlaces no visitados
:not(selector):not(p)Selecciona cada elemento que no sea un elemento <p>
:nth-child(n)p:nth-child(2)Selecciona cada elemento <p> que sea el segundo hijo de su padre
:nth-last-child(n)p:nth-last-child(2)Selecciona cada elemento <p> que es el segundo hijo de su padre, contando desde el último hijo
:nth-last-of-type(n)p:nth-last-of-type(2)Selecciona cada elemento <p> que es el segundo elemento <p> de su padre, contando desde el último hijo
:nth-of-type(n)p:nth-of-type(2)Selecciona cada elemento <p> que es el segundo elemento <p> de su padre
:only-of-typep:only-of-typeSelecciona cada elemento <p> que sea el único elemento <p> de su padre
:only-childp:only-childSelecciona cada elemento <p> que es el único hijo de su padre
:optionalinput:optionalSelecciona elementos input sin atributo «required»
:out-of-rangeinput:out-of-rangeSelecciona elementos input con un valor fuera de un rango especificado
::placeholderinput::placeholderSelecciona los elementos input con texto en placeholder
:read-onlyinput:read-onlySelecciona elementos input con el atributo «readonly» especificado
:read-writeinput:read-writeSelecciona elementos input con el atributo «readonly» NO especificado
:requiredinput:requiredSelecciona elementos input con el atributo «requerido» especificado
:root:rootSelecciona el elemento raíz del documento.
::selection::selectionSelecciona la parte de un elemento que es seleccionado por un usuario
:target#news:targetSelecciona el elemento activo actual #news (se hace clic en una URL que contiene ese nombre de ancla)
:validinput:validSelecciona todos los elementos input con un valor válido.
:visiteda:visitedSelecciona todos los enlaces visitados

También te invitamos a leer nuestro articulo XPath en Selenium WebDriver: Tutorial completo

Visita nuestro tutorial de selenium webdriver

Compartir artículo

1 Comments

  1. Luisa Arias

    Responder

    Gracias por compartir tu conocimiento…. Me encanta ver como todos los temas son tan explícitos, demasiado claro. 🙂
    Saludos!!!

Leave Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.