Tutorial de XPath en Selenium WebDriver: ¿Cómo encontrar XPath?

En la automatización de Selenium, si los localizadores generales como id, clase, nombre, etc. no encuentran los elementos, entonces se usa XPath 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 al actualizar o cualquier operación.

En este tutorial de XPath, aprenderá:

  • ¿Qué es XPath?
  • Tipos de X-path
    • XPath absoluto
    • XPath relativo
  • XPath básico
  • Contiene ()
  • Usando OR & AND
  • Función comienza con
  • Texto()
  • Métodos de ejes XPath
    • Siguiente
    • Antepasado
    • Niño
    • Anterior
    • Hermano siguiente
    • Padre
    • Uno mismo
    • Descendiente

¿Qué es XPath en selenio?

XPath en Selenium es una ruta XML que se utiliza para navegar a través de la estructura HTML de la página. Es una sintaxis o lenguaje para encontrar cualquier elemento en una página web usando una expresión de ruta XML. XPath se puede utilizar para documentos HTML y XML para encontrar la ubicación de cualquier elemento en una página web utilizando la estructura DOM de HTML.

El formato básico de XPath en selenio se explica a continuación con una captura de pantalla.

Formato básico de XPath

Sintaxis para XPath selenium:

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

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

Para encontrar el elemento en las páginas web con precisión, existen diferentes tipos de localizadores:

Localizadores XPath Encuentra diferentes elementos en la página web
IDENTIFICACIÓN Para encontrar el elemento por ID del elemento
Nombre de la clase Para encontrar el elemento por Classname del elemento
Nombre Para encontrar el elemento por nombre del elemento
Texto del enlace Para encontrar el elemento por texto del enlace
XPath Se requiere XPath para encontrar el elemento dinámico y atravesar varios elementos de la página web
Ruta CSS La ruta CSS también ubica elementos que no tienen nombre, clase o ID.

Tipos de X-path

Hay dos tipos de XPath:

1) XPath absoluto

2) 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, entonces ese XPath falla.

La característica clave de XPath es que comienza con una barra diagonal única (/), lo que significa que puede seleccionar el elemento del nodo raíz.

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

NOTA: Puede practicar el siguiente ejercicio XPath en este http://demo.guru99.com/test/selenium-xpath.html

Haga clic aquí si el video no es accesible

XPath absoluto:

/ html / body / div [2] / div [1] / div / h4 [1] / b / html [1] / body [1] / div [2] / div [1] / div [1] / h4 [1] / b [1]

XPath absoluto

Xpath relativo:

Xpath relativo comienza desde el medio de la estructura DOM de HTML. Comienza con doble barra inclinada (//). Puede buscar elementos en cualquier lugar de la página web, lo que significa que no es necesario escribir un xpath largo y puede comenzar desde el medio de la estructura DOM HTML. Siempre se prefiere el XPath relativo ya que no es una ruta completa desde el elemento raíz.

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 que XPath utiliza para buscar elementos.

Haga clic aquí si el video no es accesible

XPath relativo: // div [@ class = 'feature-box cloumnsize1'] // h4 [1] // b [1]

XPath relativo

¿Qué son los ejes XPath?

Los ejes XPath buscan diferentes nodos en un documento XML desde el nodo de contexto actual. Los ejes XPath 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 ID, nombre de clase, nombre, etc.

Los métodos de ejes se utilizan para encontrar esos elementos, que cambian dinámicamente al actualizar o cualquier otra operación. Hay pocos métodos de ejes que se utilizan comúnmente en Selenium Webdriver como hijo, padre, antepasado, hermano, anterior, propio, etc.

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

1) XPath básico:

La expresión XPath selecciona nodos o lista de nodos sobre la base de atributos como ID, Nombre, Nombre de clase , etc. del documento XML como se ilustra a continuación.

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

Aquí hay un enlace para acceder a la página http://demo.guru99.com/test/selenium-xpath.html

XPath básico

Algunas expresiones xpath más básicas:

Xpath = // input [@ type = 'text']XPath = // etiqueta [@ id = 'message23']Xpath = // input [@ value = 'RESET']Xpath = // * [@ class = 'barone']XPath = // a [@ href = 'http: //demo.guru99.com/']Xpath = //img[@src='//cdn.guru99.com/images/home/java.png.webp ']

2) Contiene ():

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

La función de contenido tiene la capacidad de encontrar el elemento con texto parcial, como se muestra en el siguiente ejemplo de XPath.

En este ejemplo, intentamos 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 envío. Se puede observar que el elemento se encuentra exitosamente.

El valor completo de 'Tipo' es 'enviar' pero usando solo el valor parcial 'sub'.

XPath = // * [contiene (@ type, 'sub')] 

El valor completo de 'nombre' es 'btnLogin' pero solo usa el valor parcial 'btn'.

Xpath = // * [contiene (@ nombre, 'btn')]

En la expresión anterior, hemos tomado el 'nombre' como un atributo y 'btn' como un valor parcial como se muestra en la siguiente captura de pantalla. Esto encontrará 2 elementos (LOGIN & RESET) ya que su atributo 'nombre' comienza con 'btn'.

De manera similar, en la siguiente expresión, hemos tomado el 'id' como un atributo y el 'mensaje' como un valor parcial. Esto encontrará 2 elementos ('El ID de usuario no debe estar en blanco' y 'La contraseña no debe estar en blanco') ya que su atributo 'nombre' comienza con 'mensaje'.

Xpath = // * [contiene (@ id, 'mensaje')] 

En la siguiente expresión, hemos tomado el "texto" del enlace como un atributo y "aquí" como un valor parcial, como se muestra en la siguiente captura de pantalla. Esto encontrará el enlace ('aquí') ya que muestra el texto 'aquí'.

Xpath = // * [contiene (texto (), 'aquí')]Xpath = // * [contiene (@ href, 'guru99.com')] 

3) Usando OR & AND:

En la expresión OR, se utilizan dos condiciones, ya sea que la primera condición O la segunda condición sea verdadera. También es aplicable si alguna condición es verdadera o quizás ambas. Significa que cualquier condición debe ser verdadera para encontrar el elemento.

En la siguiente expresión XPath, identifica los elementos cuyas condiciones únicas o ambas son verdaderas.

Xpath = // * [@ type = 'enviar' o @ name = 'btnReset']

Destacando ambos elementos como elemento "LOGIN" que tiene el atributo 'tipo' y el elemento "RESET" que tiene el atributo 'nombre'.

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

Xpath = // input [@ type = 'submit' and @ name = 'btnLogin']

En la siguiente expresión, resaltando el elemento 'LOGIN' ya que tiene tanto el atributo 'tipo' como el 'nombre'.

4) Xpath comienza con

XPath starts-with () es una función que se utiliza para encontrar el elemento web cuyo valor de atributo cambia al actualizar o por otras operaciones dinámicas en la página web. En este método, el texto inicial del atributo se compara para encontrar el elemento cuyo valor de atributo cambia dinámicamente. También puede buscar elementos cuyo valor de atributo sea estático (no cambia).

Por ejemplo: Suponga que el ID de un elemento en particular cambia dinámicamente como:

Id = "mensaje12"

Id = "mensaje345"

Id = "mensaje8769"

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

En la siguiente expresión, hay dos elementos con una identificación que comienza con "mensaje" (es decir, 'La identificación de usuario no debe estar en blanco' y 'La contraseña no debe estar en blanco'). En el siguiente ejemplo, XPath encuentra aquellos elementos cuyo 'ID' comienza con 'mensaje'.

XPath = // etiqueta [empieza con (@ id, 'mensaje')]

5) Función XPath Text ()

La función XPath text () es una función incorporada de selenium webdriver que se utiliza para localizar elementos basados ​​en el texto de un elemento web. Ayuda a encontrar los elementos de texto exactos y localiza los elementos dentro del conjunto de nodos de texto. Los elementos a ubicar deben estar en forma de cadena.

En esta expresión, con función de texto, encontramos el elemento con coincidencia de texto exacta como se muestra a continuación. En nuestro caso, encontramos el elemento con el texto "UserID".

XPath = // td [text () = 'UserID'] 

6) Métodos de ejes XPath:

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

Para ilustrar este método de ejes XPath, usaremos el sitio de demostración del banco Guru99.

a) Siguiente:

Selecciona todos los elementos en el documento del nodo actual () [El cuadro de entrada de ID de usuario es el nodo actual] como se muestra en la siguiente pantalla.

Xpath = // * [@ type = 'text'] // siguiendo :: entrada

Hay 3 nodos de "entrada" que coinciden utilizando el botón "siguiente": contraseña, inicio de sesión y reinicio del eje. Si desea enfocarse en cualquier elemento en particular, puede usar el siguiente método XPath:

Xpath = // * [@ type = 'text'] // siguiendo :: input [1]

Puede cambiar el XPath de acuerdo con el requisito poniendo [1], [2]

… etcétera.

Con la entrada como '1', la captura de pantalla a continuación encuentra el nodo particular que es el elemento del cuadro de entrada 'Contraseña'.

b) Ancestro:

El eje de ancestros selecciona todos los elementos de ancestros (abuelo, padre, etc.) del nodo actual como se muestra en la siguiente pantalla.

En la siguiente expresión, estamos encontrando elementos ancestros del nodo actual (nodo "PRUEBA EMPRESARIAL").

Xpath = // * [text () = 'Enterprise Testing'] // ancestor :: div

Hay 13 nodos "div" que coinciden mediante el uso del eje "ancestro". Si desea enfocarse en cualquier elemento en particular, puede usar el XPath a continuación, donde cambia el número 1, 2 según sus requisitos:

Xpath = // * [text () = 'Enterprise Testing'] // ancestor :: div [1]

Puede cambiar el XPath de acuerdo con el requisito poniendo [1], [2]

… etcétera.

c) Niño:

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

Xpath = // * [@ id = 'java_technologies'] // hijo :: li

Hay 71 nodos "li" que coinciden mediante el uso del eje "hijo". Si desea enfocarse en cualquier elemento en particular, puede usar el siguiente xpath:

Xpath = // * [@ id = 'java_technologies'] // hijo :: li [1]

Puede cambiar el xpath de acuerdo con el requisito poniendo [1], [2]

… etcétera.

d) Precedente:

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

En la siguiente expresión, identifica todos los elementos de entrada antes del botón "LOGIN" que es el elemento de entrada de ID de usuario y contraseña .

Xpath = // * [@ type = 'enviar'] // precedente :: entrada

Hay 2 nodos de "entrada" que coinciden mediante el uso del eje "anterior". Si desea enfocarse en cualquier elemento en particular, puede usar el XPath a continuación:

Xpath = // * [@ type = 'submit'] // precedente :: entrada [1]

Puede cambiar el xpath de acuerdo con el requisito poniendo [1], [2]

… etcétera.

e) Hermano siguiente:

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

 xpath = // * [@ type = 'enviar'] // siguiente-hermano :: entrada

Los nodos de una entrada coinciden mediante el uso del eje "siguiente-hermano".

f) Padre:

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

Xpath = // * [@ id = 'rt-feature'] // padre :: div

Hay 65 nodos "div" que coinciden mediante el uso del eje "principal". Si desea enfocarse en cualquier elemento en particular, puede usar el XPath a continuación:

Xpath = // * [@ id = 'rt-feature'] // parent :: div [1]

Puede cambiar el XPath de acuerdo con el requisito poniendo [1], [2]

… etcétera.

g) Yo:

Selecciona el nodo actual o 'self' significa que indica el nodo en sí como se muestra en la siguiente pantalla.

Coincidencia de un nodo utilizando el eje "propio". Siempre encuentra un solo nodo, ya que representa el elemento propio.

Xpath = // * [@ type = 'contraseña'] // self :: input

h) Descendiente:

Selecciona los descendientes del nodo actual como se muestra en la siguiente pantalla.

En la siguiente expresión, identifica todos los elementos descendientes del elemento actual (elemento de marco 'Envolvente del cuerpo principal'), lo que significa debajo del nodo (nodo hijo, nodo nieto, etc.).

Xpath = // * [@ id = 'rt-feature'] // descendiente :: a

Hay 12 nodos de "enlace" que coinciden mediante el uso del eje "descendiente". Si desea enfocarse en cualquier elemento en particular, puede usar el XPath a continuación:

Xpath = // * [@ id = 'rt-feature'] // descendiente :: a [1]

Puede cambiar el XPath de acuerdo con el requisito poniendo [1], [2]

… etcétera.

Resumen:

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

  • Hay dos tipos de selenio 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 con el método XPath normal
  • La expresión XPath selecciona nodos o lista de nodos sobre la base de atributos como ID, Nombre, Nombre de clase, etc. del documento XML.

Articulos interesantes...