XPath en Selenium WebDriver: Tutorial completo

Guía Completa de XPath en Selenium WebDriver

En la automatización con Selenium, si los elementos no son encontrados por los localizadores generales como id, class, name, etc. entonces XPath se usa para encontrar un elemento en la página web.

En este tutorial, aprenderemos sobre xpath y diferentes expresiones XPath para encontrar los elementos complejos o dinámicos, cuyos atributos cambian dinámicamente durante la actualización o cualquier operación.

En este tutorial aprenderás los siguiente:

  • ¿Qué es XPath?
  • Tipos de XPath
  • Uso de elementos complejos y elementos con XPath dinámicos

Puedes encontrar información de XPath en inglés en el siguiente enlace Tutorial XPath (w3schools)

Qué es XPath

XPath se define como XML path (Ruta XML). Es una sintaxis o lenguaje para encontrar cualquier elemento en la página web utilizando la expresión de ruta XML. XPath se usa para buscar la ubicación de cualquier elemento en una página web utilizando la estructura HTML DOM.

XPath usa expresiones de ruta para seleccionar nodos o conjuntos de nodos en un documento XML.

Estas expresiones de ruta se parecen mucho a las expresiones de ruta que usa con los sistemas tradicionales de archivos de computadora:

Selenium WebDriver facilita diferentes localizadores para seleccionar los elementos UI de una aplicación web como ID, Name, ClassName, Link Text, css path y XPath, este último localizador sirve para encontrar el elemento dinámico y recorrer entre varios elementos de la página web.

Sintaxis de XPath

XPath contiene la ruta del elemento situado en la página web. La sintaxis estándar para crear XPath es:

Xpath=//nombreEtiqueta[@atributo='valor']
  • //: Selecciona el nodo actual
  • Nombre Etiqueta: Nombre de la etiqueta del nodo en particular
  • @: Seleccionar atributo.
  • atributo: nombre de atributo del nodo.
  • valor: valor del atributo.

Tipos de XPath

Hay dos tipos de XPath

  • XPath absoluto
  • XPath relativo

XPath absoluto

Es la forma directa de encontrar el elemento, pero la desventaja del XPath absoluto es que si se realizan cambios en la ruta del elemento, ese XPath falla.

La característica clave de XPath es que comienza con una sola barra inclinada (/), lo que significa que puede seleccionar el elemento desde el nodo raíz.

A continuación se muestra el ejemplo de una expresión xpath absoluta del elemento que se muestra en la pantalla siguiente.

/html/body/div/div/div/article[2]/div/div/a/img

XPath Relativo

Para Xpath Relativo, la ruta comienza desde el medio de la estructura HTML DOM. Comienza con la barra diagonal doble (//), lo que significa que puede buscar el elemento en cualquier lugar de la página web.

Puede comenzar desde el medio de la estructura HTML DOM y no es necesario escribir la ruta larga.

A continuación se muestra el ejemplo de una expresión XPath relativa del mismo elemento que se muestra en la pantalla siguiente. Este es el formato común utilizado para encontrar elementos a través de un XPath relativo.

//img[@alt='Tutorial Selenium WebDriver en español']

Qué son los ejes en XPath

Los ejes XPath buscan nodos diferentes en documentos XML desde el nodo contextual actual. Los XPath Axes son los métodos utilizados para encontrar elementos dinámicos, que de otro modo no serían posibles con el método XPath normal que no tiene identificación, nombre de clase, nombre, etc.

Los métodos de ejes se utilizan para encontrar esos elementos, que cambian dinámicamente en la actualización o en cualquier otra operación.

EjeResultado
ancestorSelecciona todos los antepasados ​​(padre, abuelo, etc.) del nodo actual
ancestor-or-selfSelecciona todos los antepasados ​​(padre, abuelo, etc.) del nodo actual incluyendo el nodo actual
attributeSelecciona todos los atributos del nodo actual
childSelecciona todos los hijos del nodo actual
descendantSelecciona todos los descendientes (hijos, nietos, etc.) del nodo actual
descendant-or-selfSelecciona todos los descendientes (hijos, nietos, etc.) del nodo actual y el nodo actual
followingSelecciona todo en el documento después de la etiqueta de cierre del nodo actual
following-siblingSelecciona todos los hermanos después del nodo actual
namespaceSelecciona todos los nodos de namespace del nodo actual
parentSelecciona el padre del nodo actual
precedingSelecciona todos los nodos que aparecen antes del nodo actual en el documento, excepto antepasados, nodos de atributos y nodos de espacio de nombres
preceding-siblingSelecciona todos los hermanos antes del nodo actual
selfSelecciona el nodo actual

Uso de XPath en elementos complejos y dinámicos en Selenium

1) XPath Básico

La expresión XPath selecciona nodos o una lista de nodos basándose en atributos como ID, Nombre, Nombre de clase, etc. del documento XML como se ilustra a continuación.

Xpath=//input[@name='username']

Haz clic en el siguiente enlace para acceder a la página de prueba https://phptravels.org/clientarea.php

Otras expresiones básicas de XPath:

xpath= //input[@type='password']
xpath= //input[@id='login']
xpath= //a[@class='btn btn-default']
xpath= //*[@value='Login']
xpath= //a[@href='pwreset.php']

2) Contains()

Contains() es un método utilizado en la expresión XPath. Se usa cuando el valor de cualquier atributo cambia dinámicamente, por ejemplo, información de inicio de sesión.

La característica contain tiene la capacidad de encontrar el elemento con texto parcial como se muestra en el ejemplo a continuación.

En este ejemplo, tratamos de identificar el elemento simplemente usando el valor de texto parcial del atributo. En la siguiente expresión XPath, el valor parcial ‘sub’ se usa en lugar del botón de submit. Se puede observar que el elemento se encuentra con éxito.

El valor completo de ‘Type’ es ‘submit’ pero usando solo el valor parcial ‘sub’.

Xpath=//*[contains(@type,'sub')]

El valor completo de ‘id’ es ‘inputEmail’ pero usando solo el valor parcial ‘input’

Xpath=//*[contains(@id,'input')]

En la expresión anterior, hemos tomado el ‘id’ como atributo y ‘input’ como un valor parcial como se muestra en la captura de pantalla siguiente. Esto encontrará 2 elementos (Email y Password) ya que su atributo ‘id’ comienza con ‘input’.

En la expresión siguiente, hemos tomado el «texto» del enlace como un atributo y «View» como un valor parcial como se muestra en la siguiente captura de pantalla. Esto encontrará el enlace (‘View Cart’) ya que muestra el texto ‘View’.

Xpath=//*[contains(text(),'View')]

3)Usando OR & AND:

En la expresión OR, se usan dos condiciones, ya sea que la 1ª condición o la 2ª condición sean verdaderas. También es aplicable si alguna condición es verdadera o tal vez ambas. Significa que cualquier condición debe ser verdadera para encontrar el elemento.

La siguiente expresión XPath, identifica los elementos cuyas condiciones una o ambas son verdaderas.

//*[@type='email' or @name='password']

En la expresión AND, se usan dos condiciones, ambas condiciones deben ser verdaderas para encontrar el elemento. No puede encontrar el elemento si alguna condición es falsa.

//*[@type='email' and @name='username']

4) Función Start-with

La función Start-with encuentra el elemento cuyo valor de atributo cambia al actualizar o cualquier operación en la página web. En esta expresión, coincidir con el texto de inicio del atributo se utiliza para encontrar el elemento cuyo atributo cambia dinámicamente. También puede encontrar el elemento cuyo valor de atributo es estático (no cambia). Para el siguiente ejemplo usamos la siguiente página https://phptravels.org/cart.php

Por ejemplo: supongamos que la ID del elemento particular cambia dinámicamente como:

Id = «Secondary_Sidebar-Categories-Installation»

Id = «Secondary_Sidebar-Categories-Desktop_Application»

Id = «Secondary_Sidebar-Categories-License»

Id = «Secondary_Sidebar-Categories-Mobile»

Id = «Secondary_Sidebar-Categories-Order_PHPTRAVELS»

y así sucesivamente … pero el texto inicial es el mismo. En este caso, usamos la expresión Start-with.

En la expresión siguiente, hay cinco elementos con un id que inicia con «Secondary_Sidebar-Categories» . En el siguiente ejemplo, el XPath encuentra aquellos elementos cuya ‘ID’ comienza con ‘Secondary_Sidebar-Categories’.

//a[starts-with(@id,'Secondary_Sidebar-Categories-')]

5) Text()

En esta expresión, con la función Text(), encontramos el elemento con coincidencia exacta de texto como se muestra a continuación. En nuestro caso, encontramos el elemento con el texto «Standalone Web App».

//strong[text()='Standalone Web App']

Métodos de ejes en XPath:

Estos métodos de ejes XPath se usan para encontrar los elementos complejos o dinámicos. A continuación, veremos algunos de estos métodos.

a) Following

Selecciona todos los elementos en el documento del nodo actual [cuadro de texto Email Address es el nodo actual] como se muestra en la  siguiente pantalla.

Para el siguiente ejemplo, utilizaremos el sitio https://phptravels.org/clientarea.php

Xpath=//*[@type='email']//following::input

Como podemos observar en la imagen, con el xpath haciendo uso de following encuentra tres elementos de tipo input que están ubicados después del elemento de tipo Email. Si desea centrarse en cualquier elemento en particular, puede utilizar el siguiente método XPath:

Xpath=//*[@type='email']//following::input[1]

Puede cambiar el XPath de acuerdo con lo que requiera poniendo [1], [2] ………… y así sucesivamente.

b) Ancestor

El eje Ancestor selecciona todos los elementos ancestros (abuelos, padres, etc.) del nodo actual como se muestra en la pantalla siguiente.

Para este ejemplo utilizamos la siguiente página de prueba: https://phptravels.org/cart.php?a=view

Xpath = //*[@type='submit']//ancestor::div

En la imagen anterior se puede observar que el nodo actual (botón checkout) tiene 11 ancestros (abuelos, padres, etc.) los cuales podemos acceder con el xpath anterior, si deseas seleccionar algún ancestro especifico puedes utilizar la siguiente expresión donde cambia el número 1, 2 según su requisito.

Xpath = //*[@type='submit']//ancestor::div[1]

c) Child

Selecciona todos los elementos secundarios del nodo actual  como se muestra en la pantalla siguiente.

Para este ejemplo usaremos la siguiente página web https://phptravels.org/cart.php

//*[@class='fields-container']/child::div

En la imagen podemos observar que al usar child, el sistema encuentra 5 nodos hijos del nodo actual (div que contiene los radiobutton), Si quiere enfocarse en cualquier elemento en particular, entonces puede usar el siguiente xpath:

Xpath = //*[@class='fields-container']/child::div[1]

Puede cambiar el xpath según el requisito poniendo [1], [2] ………… y así sucesivamente.

d) Preceding

Selecciona todos los nodos que vienen antes del nodo actual como se muestra en la siguiente pantalla.

Para el siguiente ejemplo se utilizo la siguiente página web https://phptravels.org/cart.php?gid=9

En la siguiente expresión , identifica todos los elementos «input» antes del botón «Continue» que son los radibutton y un input oculto para el token.

Xpath = //*[@type='submit']//preceding::input

Hay 3 nodos «input» que coinciden utilizando el eje «preceding». Si quieres enfocarte en cualquier elemento en particular, entonces puedes usar el siguiente XPath:

Xpath = //*[@type='submit']//preceding::input

Puede cambiar el xpath según el requisito poniendo [1], [2] ………… y así sucesivamente.

e) Following-sibling

Selecciona los siguientes hermanos del nodo actual. Los hermanos están en el mismo nivel del nodo actual que se muestra en la siguiente pantalla . Encontrará el elemento después del nodo actual.

Para el siguiente ejemplo utilizamos la página web https://phptravels.org/cart.php?gid=9

xpath=//*[@type='submit']//following-sibling::input

Se encontraron 6 nodos que coinciden con el xpath usando el eje following-sibling.

f) Parent

Selecciona el padre del nodo actual como se muestra en la siguiente pantalla.

En el siguiente ejemplo usamos la pagina web https://phptravels.org/clientarea.php

Xpath = //*[@id='login']//parent::div

g) Descendant

Selecciona los nodos descendientes del nodo actual como se muestra en la pantalla a continuación.
En la expresión a continuación, identifica todos los elementos option descendientes (nodo hijo, nodo nieto, etc.). al elemento actual (elemento Select con name = ‘gid’).

Para el siguiente ejemplo, utilizaremos la siguiente página web: https://phptravels.org/cart.php?gid=1

//*[@name='gid']//descendant::option

En la imagen anterior se evidencia que al indicarle que se desea encontrar todos los elementos option descendientes (nodo hijo, nodo nieto, etc.), se encuentran 7 elementos que son los elementos que existen en la lista desplegable. Si usted desea seleccionar algún elemento en particular de los encontrados puede hacer uso de la siguiente expresión.

//*[@name='gid']//descendant::option[1]

Puede cambiar el XPath de acuerdo con el requisito poniendo [1], [2] ………… y así sucesivamente.

Resumen:

Se requiere XPath para encontrar un elemento en la página web que realice una operación en ese elemento en particular.

  • Hay dos tipos de XPath:
    • XPath Absoluto
    • XPath relativo
  • Los ejes XPath son los métodos utilizados para encontrar elementos dinámicos, que de otro modo no serían posibles de encontrar mediante el método XPath normal
  • La expresión XPath selecciona nodos o una lista de nodos basándose en atributos como ID, Nombre, Nombre de clase, etc. del documento XML.
  • Se recomienda el uso de xpath relativo, ya que si algún momento agregan un nuevo componente a la aplicación web la cual pruebas, fácilmente puede afectar el xpath absoluto y presentar la excepción No Such Element.

Te recomiendo practicar lo aprendido en este tutorial y si tienes alguna duda, en los comentario y con gusto te responderé.

También te recomiendo seguir el Tutorial de Selenium WebDriver en donde encontrarás muchas más información para que sigas en el aprendizaje de todo este mundo de la automatización.

Compartir artículo

1 Comments

  1. Pingback: Acceder a elementos de una Tabla - Tutorial Selenium

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.