[Selenium WebDriver] Localizadores de elementos

Para localizar los elementos con Selenium WebDriver utilizamos el método findElement(By.localizador) entre los tipos de localizadores de elementos encontramos id, xpath, tagName, className, cssSelector, linkText, partialLinkText y name.

Primero que todo aprenderemos a ubicar los elementos dentro de nuestra página HTML

1. Click derecho sobre el elemento a buscar y seguidamente click en "Inspeccionar elemento" o "Inspeccionar"

    2.  Visualizamos el HTML de la página inspeccionada, para ubicar elementos utilizamos el puntero que se encuentra en la barra de elementos como se muestra a continuación

A continuación mostraremos ejemplos detallados de los diferentes tipos de localizadores:

Id: Debe ser nuestra primera opción a la hora de localizar elementos ya que dentro de un buen desarrollo este elemento es único y es muy poco probable que es un futuro pueda cambiar su nombre, por ello será siempre nuestra primera opción.

NOTA: Existen id's dinámicos (cambian su valor en cada carga del DOM) debemos acceder al elemento de otra forma de las descritas en este post

¿Cómo sabemos que es un ID dinámico?

1. Primera causa de que sea un ID dinámico normalmente contiene un identificador de la siguiente manera:

      2. Al recargar la página borrando caché su valor no será igual (cambia el valor del id).

      3. Al ejecutar la prueba nos fallará.

//id
driver.findElement(By.id("userid"));

• Xpath: Existen dos maneras de localizar elementos por xpath, la primera es de forma absoluta y la segunda de forma relativa, de forma relativa existen muchas maneras que veremos en entradas siguientes por ahora serán dos maneras simples.

Absoluto: Es la menos recomendada y factible a que cambie en algún punto del desarrollo, ya que debe recorrer toda la ruta del html hasta ubicar el elemento, de cambiar de posición algún elemento se verá afectada la coordenada absoluta

Relativo: En algún punto de la ruta absoluta podemos cortar el xpath para convertirlo en relativo colocando al principio "//", no es la mejor práctica pero mas adelante mostraré las mejores formas de acceder a los xpath relativos utilizando (text, contains, clases y atributos)

//xpath Absoluto
driver.findElement(By.xpath("html/body/div/div/div/div/div/" +
        "div/div/div/div/div[2]/div/span/form/div/div[5]/div" +
        "(div[3]/span[2]/input"));
//xpath relativo
driver.findElement(By.xpath("//form/div/div[5]/div(div[3]/span" +
        "[2]/input"));

• TagName: Se utiliza para identificar el tag que se use en el DOM, además para se utiliza junto a lista de WebElements para ser iteradas (lo veremos mas adelante)

//TagName
driver.findElement(By.tagName("inputtest"));

• ClassName: Este método ubica directamente el nombre de la clase dentro de un tag, actúa igual que el id a diferencia que en muchas oportunidades existe mas de una clase con el mismo nombre y por ello nos trae frecuentes problemas

//className
driver.findElement(By.className("class-input-correo"));

• CssSelector: Este método utiliza las propiedades del css para ubicar el elemento, por ahora veremos dos localizadores (id y class)

id: propiedad "#"

class: propiedad "."

//cssSelector id
driver.findElement(By.cssSelector("#userid"));

//cssSelector class
driver.findElement(By.cssSelector(".class-input-correo"));

• Name: Es bastante parecido al id pero en este caso nos basaremos en la etiqueta name

//name
driver.findElement(By.name("useridname"));

• LinkText: Busca directamente un texto exactamente igual dentro del HTML

• PartialLinkText: Busca directamente parte de un texto dentro del HTML

//LinkText
driver.findElement(By.linkText("No cerrar sesión"));

//PartialLinkText
driver.findElement(By.partialLinkText("sesión"));