Los ingenieros de pruebas son esenciales en el ciclo de vida del desarrollo de software, ya que garantizan que un equipo entregue aplicaciones sin errores y que funcionen. Estos ingenieros someten las aplicaciones a diferentes pruebas antes de que puedan enviarse o declararse listas para los usuarios.

Los ingenieros de pruebas deben ser hábiles y capaces de localizar e interactuar con elementos web. Selenium es una de las herramientas de automatización de pruebas más utilizadas por los equipos de desarrollo modernos. Esta herramienta tiene cuatro componentes: Selenium Grid, Selenium WebDriver, Selenium IDE y Selenium RC.

Hoy nos centraremos en Selenium WebDriver, ya que contiene XPath. Este artículo definirá XPath, discutirá la sintaxis básica de XPath e ilustrará cómo hacer XPath en Selenium.

Qué es XPath

What-is-XPath-1

XPath( XML Path Language) es un lenguaje de consulta para seleccionar y navegar atributos y elementos dentro de documentos XML. XPath define una expresión de ruta, ofreciendo una forma de dirigirse a partes específicas de un documento XML y recuperar información del mismo.

Su sintaxis se asemeja a la de una ruta de un sistema de archivos. También presenta funciones y símbolos que facilitan la selección de elementos en función de sus atributos y jerarquía. Puede utilizar XPath con tecnologías como XML, HTML y XSLT para extraer y manipular datos.

¿Por qué utilizar XPath?

  • Es flexible: A diferencia de los selectores CSS que sólo pueden localizar elementos utilizando el nombre de etiqueta, ID o clase, XPath le permite localizar elementos utilizando otros atributos.
  • Esreutilizable: Puede almacenar sus XPath en variables y reutilizarlos en su código.
  • Selección precisa de nodos: XPath proporciona una forma estandarizada de dirigirse a elementos específicos en un documento web.

Sintaxis básica de XPath

XPath le permite encontrar cualquier elemento en una página web utilizando el DOM. Sin embargo, antes de revisar la sintaxis, necesitamos entender las siguientes expresiones XPath;

ExpresiónDescripción
nodename/ tagnameSelecciona todos los nodos el nombre ‘nodename’/ ‘tagname’
/Selecciona a partir del nodo raíz
// Selecciona los nodos del documento actual a partir del nodo actual que coincida con la selección, independientemente de dónde se encuentren
@Selecciona atributos
..Selecciona el padre del nodo actual
.Selecciona el nodo actual

La sintaxis estándar de XPath es

XPath=//nombre[@atributo='valor']

Como puede ver, la sintaxis comienza con una barra doble (//), que comienza con el nodo actual definido por el nombre de la etiqueta/nodo.

XPath absoluto vs. XPath relativo

Tenemos dos caminos cuando tratamos con XPath; XPath Absoluto y XPath Relativo;

XPath Absoluto

Un XPath Absoluto es un camino directo desde la raíz al elemento deseado. Se empieza con el nodo raíz y se termina con el nodo destino.

Puede tener un documento HTML con el siguiente contenido;

<!DOCTYPE html&gt
<html&gt
<head&gt
    <title>Geekflare</title&gt
</head&gt
<body&gt
    <div&gt
        <h1>Bienvenido a Geekflare</h1&gt
    </div&gt
</body&gt
</html&gt

Si queremos localizar el elemento con el contenido «Bienvenido a Geekflare», seguiremos esta ruta

/html/body/div/h1

En el documento anterior, tenemos

  • El html como nodo raíz: /html
  • El cuerpo como nodo padre: /html/body
  • El div como hijo del nodo body: /html/body/div
  • El h1 como hijo del nodo div: /html/body/div/h1

Para obtener el elemento más interno, debe seguir esa ruta.

Cuándo utilizar XPath absoluto

XPath absoluto sigue una ruta «específica». Por lo tanto, será un ajuste perfecto cuando tenga múltiples elementos con atributos similares en una página, asegurándose de que está apuntando a los elementos exactos en un documento.

Sin embargo, XPath es demasiado sensible a los cambios en la estructura del documento HTML. Como tal, un simple cambio podría romper su XPath Absoluto.

XPath relativo

XPath relativo comienza en cualquier nodo y termina en el nodo de destino. Esta ruta no se ve afectada por los cambios en el documento, por lo que es preferible en la mayoría de los casos. Con XPath Relativo, puede localizar elementos desde cualquier parte del documento. La expresión XPath Relativa comienza con dobles barras ‘//’.

Si utilizamos el documento HTML, podemos localizar nuestro H1 que dice «Bienvenido a Geekflare»;

<!DOCTYPE html&gt
<html&gt
<head&gt
    <title>Geekflare</title&gt
</head&gt
<body&gt
    <div&gt
        <h1>Bienvenido a Geekflare</h1&gt
    </div&gt
</body&gt
</html&gt

Nuestro XPath relativo a h1 será; 

//body/div/h1

Cuándo utilizar XPath relativo

Debe utilizar XPath Relativo cuando busque un equilibrio entre flexibilidad y especificidad. Esta ruta es resistente a los cambios en el documento HTML, dado que la relación entre los elementos sigue siendo específica.

Localizar elementos utilizando XPath en Selenium

Selenium es un marco de trabajo de código abierto que permite a los usuarios automatizar los navegadores web. El marco cuenta con una colección de bibliotecas y herramientas que ayudan a los probadores a interactuar con elementos web de forma automática y sistemática.

Supongamos que tenemos un documento web que contiene una lista de canciones como la siguiente;

<!DOCTYPE html&gt
<html&gt
<head&gt
    <title>Biblioteca de canciones</title&gt
</head&gt
<body&gt
    <h1>Biblioteca de canciones</h1&gt
    <ul class="lista de canciones"&gt
        <li class="song" title="Título de la canción 1">Canción 1 - Artista 1</li&gt
        <li class="song" title="Título de la canción 2">Canción 2 - Artista 2</li&gt
        <li class="song" title="Título de la canción 3">Canción 3 - Artista 1</li&gt
        <li class="song" title="Título de la canción 4">Canción 4 - Artista 3</li&gt
    </ul&gt
</body&gt
</html&gt
  • Nuestro nodo raíz es .
  • Tenemos como nodo padre.
  • Tenemos

    como hijo de .

  • Tenemos
      como hijo de .
    • Tenemos
    • como hijo de
        .

      Podemos utilizar diferentes localizadores XPath en el documento HTML anterior. Por ejemplo, podemos localizar elementos por ID, nombre, nombre de clase, contiene, textos, termina-con y empieza-con, entre otros muchos localizadores. Puede utilizar Selenium con diferentes lenguajes de programación. Utilizaremos Python para hacer una demostración.

      Localizar por índice

      Suponiendo que queremos localizar la canción número 3, podemos tener este código

      tercera_canción = driver.find_element_by_xpath("//li[@class='canción'][3]")
print("Tercera canción:", third_song.text)

      Hemos utilizado XPath relativo y comenzamos con el nodo ‘li’. Cuando Selenium localice la tercera canción en nuestra lista, imprimirá su texto.

      Localizar por atributo

      Podemos tener un XPath que busque todas las canciones del ‘Artista 1″ e imprima sus títulos. Nuestro código puede ser el siguiente

      canciones_por_artista1 = driver.find_elements_by_xpath("//li[contains(@class, 'canción') and contains(text(), 'Artista 1')]")
print("Canciones del artista 1:")
for canción in canciones_por_artista1:
    print(canción.texto)

      Localizar por texto

      Este localizador le ayuda a encontrar elementos con un texto específico. Podemos buscar una canción con el texto «Canción 4» e imprime su texto. Podemos representar este localizador utilizando este código

      canción_con_texto = driver.find_element_by_xpath("//li[contains(text(), 'Canción 4')]")
print("Canción con texto:", canción_con_texto.texto)

      Ejes XPath

      Los enfoques que hemos discutido hasta ahora funcionan perfectamente con páginas web sencillas. Sin embargo, hay casos en los que los métodos de búsqueda de elementos XPath como por Texto, ID, Nombre de clase y Nombre no funcionarán.

      Los Ejes XPath se utilizan para contenidos dinámicos en los que los localizadores normales no funcionan. Aquí, usted localiza elementos basándose en su relación con otros elementos. Estos son algunos de los localizadores XPath Axes más comunes;

      Ancestro

      El método Eje Ancestro es perfecto para tratar con documentos XML con elementos muy anidados. Puede seleccionar todos los elementos ancestros como el abuelo y el padre del nodo actual desde el más cercano al más lejano.

      Podemos tener el siguiente código;

      <librería&gt
  <libro&gt
    <título>El gran Gatsby</título&gt
    <autor>F. Scott Fitzgerald</author&gt
    <género>Ficción</género&gt
  </libro&gt
  <libro&gt
    <title>El gran dilema</title&gt
    <autor>George Orwell</author&gt
    <género>Distópico</género&gt
  </libro&gt
</librería&gt

      Si queremos seleccionar todos los ancestros del elemento ‘title’ para el libro «El gran dilema», podemos disponer de este método Ancestor Axis;

      //título[text() = '1984']/ancestro::*

      Siguiendo

      El método Eje siguiente localiza todos los nodos posteriores a la etiqueta de cierre del nodo actual. Este método no tiene en cuenta la jerarquía ni la ubicación de sus nodos de destino. Por ejemplo, si tiene un documento XML o una página web con varias secciones, puede identificar un elemento que aparezca después de una sección concreta sin tener que navegar por toda la estructura del árbol.

      Padre

      El método Parent Axis de XPath selecciona el padre del nodo actual. Puede utilizar la siguiente ruta para localizar el nodo padre; 

      //tag[@atributo='valor']/parent::tagName

      Este método funciona cuando los elementos hijo del nodo actual tienen atributos únicos que puede localizar fácilmente y desea comprobar con el padre.

      Hijo

      El método Child de XPath selecciona todos los elementos hijos del nodo actual. Sigue siendo uno de los métodos de Eje XPath más populares, ya que ayuda a seleccionar los nodos hijos de un elemento concreto.

      Considere este trozo de código

      <section id='text'&gt
    <p>Párrafo uno</p&gt
    <p>Párrafo dos</p&gt
    <p>Párrafo tres</p&gt
    <p>Párrafo cuatro</p&gt
</section&gt

      Podemos localizar todos los elementos ‘p’ en nuestro código utilizando este Eje;

      //sección[@id='texto']/child::p

      Preguntas frecuentes

      ¿Por qué utilizar XPath en lugar de selectores CSS?

      Los selectores CSS sólo pueden encontrar elementos basándose en su ID, nombre de etiqueta y clase. En cambio, puede utilizar XPath para localizar elementos basándose en su ubicación, contenido de texto y otros atributos de la estructura HTML. También puede almacenar expresiones XPath en variables y reutilizarlas en su aplicación.

      ¿Qué lenguajes soporta XPath en Selenium?

      Puede utilizar XPath con cualquier lenguaje que soporte Selenium. Puede escribir sus scripts en JavaScript, Java, Python, Ruby, C# y PHP.

      ¿Cuáles son las alternativas de XPath?

      Puede utilizar Selectores CSS, Reconocimiento de Imágenes, o los localizadores incorporados de Selenium como alternativa a XPath. Los selectores CSS son los más comunes; puede encontrar elementos basándose en su nombre de etiqueta, ID o clase. El Reconocimiento de Imágenes le permite localizar elementos basándose en sus imágenes. Los localizadores incorporados de Selenium están diseñados para ser fáciles de usar.

      Conclusión

      Ahora puede definir XPath en Selenium, diferenciar entre XPath Absoluto y Relativo, y localizar elementos utilizando diferentes localizadores XPath. La elección del localizador dependerá de la naturaleza del contenido y de sus objetivos finales.

      Eche un vistazo a nuestro artículo sobre preguntas para entrevistas de Selenium si quiere superar con éxito su próxima entrevista.