xpath tips - encontrando elementos usando hermanos (sibling)

Buenas lectores.

Muchas veces nos llega la sorpresa durante nuestras automatizaciones "El control no tienen identificador único", luego de analizar opciones solo nos queda hacer uso de la vieja confiable "usar xpath".

Si bien XPATH es la última opción en prioridad de selectores, este a su vez también tiene su propia prioridad dentro de su construcción.

Si tienes experiencia o eres desarrollador, salta a la parte práctica, de lo contrario, sigue en esta parte teórica.

Parte teórica: -----------------------------------------------------------------------------------------

Introducción rápida a xpath

Xpath nos permite ubicar un control dentro de la página web que estamos automatizando (DOM), en otras palabras nos permite recorrer toda la pagina (nodos) buscando el control especifico que necesitamos.

Existen dos maneras de trabajar xpath, forma relativa y forma absoluta. Ambas cuentan con sus beneficios y sus contras, sin embargo , en este post no vamos a entrar en detalles.

Prioridades para buscar un control mediante XPATH:

RELATIVE

   Atributos únicos (id, class, placeholder, etc..)

   Hermanos (predecing, following)

   Ancestros / decendientes (parent, ancestor, etc..)

ABSOLUTE

    Ruta relativa + absoluta

    Ruta exacta del nodo (absoluta)

En conclusión siempre que usamos xpath vamos a tratar de usar sentencias relativas. Tampoco vamos a entrar en detalles sobre el tema, ya dedicaré una entrada extensa sobre el xpath.

Un ejemplo comparado con la vida real para tester:

Xpath relativo 

Supongamos que vamos a buscar a una persona dentro del centro comercial, si conocemos en que almacen esta , sería algo así:

//BuscarPersona[@almacen='Exito' and @Nombre='PersonaQueBusco']

Estamos diciendo que vamos a buscar una persona que se encuentre en el almacen exito y que el nombre sea el que yo busco.

Xpath absoluto

Ahora supongamos que efectivamente hay 2 personas dentro de ese almacen que responden al nombre que busco y que no tengo manera de distinguirlos, es decir, no tengo la cedula, el apellido, el color de la vestimenta, rasgos fisicos, en general atributos para distinguirlo... en este caso se hace de más complejidad buscar a la persona, aquí es donde entra xpath absoluto:

/centroComercial/Almacenes/Exito/Personas/2

Estamos diciendo que vamos a buscar a la persona 2 que se encuentra en el centro comercial dentro del almacen exito. Como se podrán imaginar esto conlleva muchos problemas puesto que si la persona cambia de lugar quiere decir que ya estariamos consultando la persona equivocada. Esto mismo pasa cuando trabajamos automatización de pruebas.

Razones para usar los hermanos (siblings)

Normalmente cuando generamos nuestros xpath usamos herramientas que nos apoyan en el proceso como chropath, el mismo navegador, entre otros muy conocidos. Pero algunas veces identificar el elemento web no es exacto y es donde recurrimos a usar los hermanos para lograr alcanzar el objeto que necesitamos.

Los hermanos son funcionoes dentro de XPATH 1.0, los hermanos siguientes y anteriores son solo algunos de los Axis que podemos usar con XPATH. De momento la idea rápida que debemos tener en cuenta es que toda la página que estamos probando visualmente se traduce en campos y botones, estos a su vez, por debajo se traducen en clases/nodos. Esta es la razón del uso de xpath, que nos permite recorrerlos desde un punto único.

Parte práctica: -----------------------------------------------------------------------------------------

1. following-sibling (hermano siguiente)

Nos permite extraer los hermanos siguientes, es decir, los controles que se encuentran ubicados dentro de la misma jerarquía y son decendientes del mismo padre.

Sintaxis de uso:

//node [attribute='value of attribute']//following-sibling:attribute

Ejemplos:

//input[@id='elemento']/following-sibling::*

//label[@id='elemento']/following-sibling::select/

En los ejemplos anteriores se observa que queremos seleccionar cualquier hermano luego del input en el caso 1 y en el caso 2 queremos seleccionar el select que es hermano del label.

2. preceding-sibling (hermano anterior)

Nos muestra todos los nodos en el documento que tienen el mismo padre que el nodo de contexto y se encuentran antes que él.

Ejemplos:

//select[@id='lname']/preceding-sibling::select/

//select[@id='lname']/preceding-sibling::*

¿Y en la vida real como se ve?

De acuerdo a la siguiente imagen supongamos que estamos ubicados en el control sombreado, es decir, en el div que contiene el id lbl_location_addressTown

Si necesitamos el control anterior (preceding-siblig):

driver.findElement(By.xpath("//div[@id='lbl_location_addressTown']//preceding-sibling::div")).click();

En otras palabras en este ejemplo vamos a poder dar click al elemento con id lbl_location_lastReportDate

Si necesitamos el control siguiente (following-sibling):

driver.findElement(By.xpath("//div[@id='lbl_location_addressTown']//following-sibling::div")).click();

En otras palabras en este ejemplo vamos a poder dar click al elemento con id lbl_location_address

En conclusión: Los hermanos nos permiten navegar hacia arriba o hacia abajo desde nuestra ubicación actual.

Fuentes:

https://www.educba.com/xpath-sibling/

https://www.w3schools.com/xml/xpath_intro.asp