Cuando se trata de localizar elementos en Selenium, tanto CSS como XPATH son poderosas herramientas. Aquí te presento ejemplos claros de cada tipo de localizador, junto con pautas para su construcción y consejos prácticos.

cssSelector

driver.findElement(By.cssSelector("input[type='submit']"));

HTML

<input type="text" id="username">

Este localizador busca un elemento <input> con el atributo type igual a submit.

- Utiliza los selectores más específicos para evitar ambigüedades.
- Usa clases o IDs si es posible, ya que son más rápidos de localizar.

Expresión XPATH

driver.findElement(By.xpath("//div[@class='container']/ul/li[2]"));

HTML

<div class="container">
    <ul>
        <li>Elemento 1</li>
        <li>Elemento 2</li>
    </ul>
</div>

Este localizador busca el segundo elemento <li> dentro de una lista <ul> que está dentro de un <div> con la clase 'container'.

• Sé específico en la construcción del camino (path) para evitar capturar elementos no deseados.
• Evita rutas de acceso frágiles que puedan cambiar con la modificación de la estructura del HTML.

CASOS PRACTICOS

CSS Selectores:

<input type="text" id="username">

Este localizador utiliza el ID para encontrar el elemento <input>. El # indica que se busca por ID.

driver.findElement(By.cssSelector("#username"));

<div class="container">
    <ul>
        <li>Elemento 1</li>
        <li>Elemento 2</li>
    </ul>
</div>

Encuentra el segundo <li> dentro de <ul> que está dentro de un elemento con clase container. . se refiere a la clase, ul li:nth-child(2) selecciona el segundo <li>.

driver.findElement(By.cssSelector(".container ul li:nth-child(2)"));

<button class="btn btn-primary">Enviar</button>

Localiza un <button> que tiene ambas clases btn y btn-primary.

driver.findElement(By.cssSelector("button.btn.btn-primary"));

XPATH

<input type="submit" value="Enviar">

Busca un <input> con el atributo type igual a submit.

driver.findElement(By.xpath("//input[@type='submit']"));

<div class="content">
    <ul>
        <li><span>Texto 1</span></li>
        <li><span>Texto 2</span></li>
    </ul>
</div>

Encuentra un <span> con texto 'Texto 2' dentro del segundo <li> que está dentro de <ul> dentro de un <div> con clase content.

driver.findElement(By.xpath("//div[@class='content']/ul/li/span[text()='Texto 2']"));

<a href="https://example.com">Enlace a Ejemplo</a>

Localiza un <a> que contiene 'example' en su atributo href.

driver.findElement(By.xpath("//a[contains(@href, 'example')]"));

Consejos Finales

• Experimenta con diferentes tipos de localizadores para familiarizarte con sus fortalezas y debilidades.
• Prioriza la legibilidad y la mantenibilidad al construir localizadores para facilitar su comprensión por otros miembros del equipo.

Al entender las estructuras y patrones de los localizadores CSS y XPATH, podrás aprovechar al máximo estas estrategias para localizar elementos con precisión en tus pruebas de automatización con Selenium, mejorando así la robustez y confiabilidad de tu suite de pruebas.

Luis Carlos Marín Campos