XPath (XML Path Language) es un potente lenguaje de consulta utilizado para navegar a través del Modelo de Objetos del Documento (DOM) de documentos HTML y XML. Para los desarrolladores web, testers e ingenieros de automatización, dominar XPath es esencial para localizar e interactuar con precisión con los elementos de las páginas web. Ya sea que estés desarrollando pruebas automatizadas con Selenium, Playwright u otros frameworks de testing, o extrayendo datos de sitios web, XPath proporciona la flexibilidad y precisión necesarias para navegar incluso por las estructuras DOM más complejas.
Esta guía completa te llevará a través de todo lo que necesitas saber sobre XPath, desde la sintaxis básica hasta las técnicas avanzadas, ayudándote a ser competente en la creación de expresiones XPath robustas y eficientes.
Antes de profundizar en XPath, tomemos un momento para presentar Apidog, la mejor alternativa a Postman disponible en la actualidad. Apidog combina documentación de API, diseño, depuración, pruebas y mocking en una plataforma unificada.
A diferencia de Postman, Apidog ofrece una interfaz más intuitiva, mejores funciones de colaboración en equipo y una integración perfecta entre el diseño y las pruebas de API. Con sus potentes capacidades de testing, Apidog facilita la validación de las APIs.
Si estás trabajando con APIs y pruebas web, el conjunto de herramientas integral de Apidog puede optimizar significativamente tu flujo de trabajo y mejorar la productividad.
¿Qué es XPath?
XPath es un lenguaje de consulta diseñado para seleccionar nodos en documentos XML. Dado que HTML puede considerarse una forma especializada de XML, XPath puede aplicarse eficazmente también a documentos HTML. Fue introducido por primera vez por el World Wide Web Consortium (W3C) como parte de la especificación XSLT 1.0 y desde entonces se ha convertido en una herramienta esencial para la automatización web y la extracción de datos.
XPath sirve como un lenguaje de navegación, que te permite recorrer la jerarquía de un documento HTML definiendo rutas a los elementos de forma muy parecida a como navegas por las carpetas de un sistema de archivos. Lo que hace que XPath sea particularmente potente es su capacidad para:
- Navegar a través de la jerarquía de elementos en múltiples direcciones
- Filtrar elementos basados en atributos, contenido o posición
- Acceder a elementos padre, hijo y hermano con facilidad
- Utilizar funciones integradas para manipular datos y comparar valores
Localizadores XPath en la automatización web
En frameworks de automatización web como Selenium WebDriver, los localizadores XPath sirven como un método primario para identificar elementos en una página web. Si bien otros localizadores como los selectores CSS, ID o nombres de clase a menudo se prefieren por su simplicidad y rendimiento, XPath ofrece una flexibilidad inigualable en escenarios complejos.
Aquí hay algunas ventajas clave de usar XPath en la automatización web:
- Flexibilidad: XPath puede localizar elementos basados en el contenido del texto, las relaciones padre-hijo y las relaciones entre hermanos, lo que otros localizadores no pueden hacer fácilmente.
- Selección basada en texto: XPath te permite encontrar elementos que contienen texto específico, lo que lo hace invaluable para contenido dinámico.
- Capacidades de recorrido: Puedes navegar hacia arriba (a los elementos padre), hacia abajo (a los elementos hijo) o lateralmente (a los elementos hermanos) en el árbol DOM.
- Operaciones lógicas: XPath admite operadores lógicos como and, or y not, lo que permite condiciones de selección complejas.
Esenciales de XPath
Para usar XPath de manera efectiva, es importante comprender sus componentes y estructura fundamentales.
1. Sintaxis y estructura
Las expresiones XPath se escriben como una serie de pasos, separados por barras diagonales (/), que navegan a través de la jerarquía de nodos del documento. Cada paso consta de:
- Una selección de nodo (como un nombre de elemento o comodín)
- Predicados opcionales (condiciones encerradas entre corchetes)
- Ejes opcionales (que especifican la dirección de la relación)
La sintaxis básica sigue este patrón:
axisname::nodetest[predicate]
Donde:
axisnamedefine la relación a utilizar (hijo, padre, etc.)nodetestidentifica qué nodos seleccionarpredicatefiltra los nodos seleccionados en función de las condiciones
2. Ejes clave y tipos de nodo
XPath proporciona varios ejes para definir las relaciones entre los nodos:
- child: Selecciona todos los hijos del nodo actual
- parent: Selecciona el padre del nodo actual
- ancestor: Selecciona todos los ancestros (padre, abuelo, etc.)
- descendant: Selecciona todos los descendientes (hijos, nietos, etc.)
- sibling: Selecciona los hermanos (nodos con el mismo padre)
- self: Selecciona el nodo actual
Los tipos de nodo que se pueden seleccionar incluyen:
- element: Elementos HTML/XML
- attribute: Atributos del elemento
- text: Contenido de texto dentro de los elementos
- comment: Nodos de comentario
- processing-instruction: Nodos de instrucción de procesamiento
3. Funciones comunes
XPath incluye numerosas funciones que mejoran sus capacidades:
- text(): Recupera el contenido de texto de un elemento
- contains(): Comprueba si una cadena contiene una subcadena específica
- starts-with(): Comprueba si una cadena comienza con una subcadena específica
- concat(): Combina múltiples cadenas
- substring(): Extrae una porción de una cadena
- count(): Cuenta el número de nodos en un conjunto de nodos
- position(): Devuelve la posición de un nodo en un conjunto de nodos
- last(): Devuelve la posición del último nodo en un conjunto de nodos
Tipos de XPath
Existen dos enfoques principales para construir expresiones XPath: absoluto y relativo.
Expresión XPath absoluta
XPath absoluto proporciona la ruta completa desde la raíz del documento hasta el elemento de destino. Comienza con una sola barra diagonal (/) e incluye cada elemento en la jerarquía.
Ejemplo:
/html/body/div[2]/form/input[3]
Pros:
- Proporciona una ruta precisa y única al elemento
- Útil cuando necesitas apuntar a una instancia específica de un elemento
Contras:
- Extremadamente frágil y propenso a romperse cuando cambia la estructura de la página
- Largo y difícil de leer
- Requiere actualización si cambia algún elemento padre
XPath relativo
XPath relativo comienza desde cualquier punto del documento y utiliza una doble barra diagonal (//) para indicar que la ruta puede comenzar desde cualquier lugar. Este enfoque es más flexible y resistente a los cambios en la estructura del documento.
Ejemplo:
//input[@id='email']
Pros:
- Más robusto contra los cambios en la estructura del documento
- Más corto y más legible
- Se centra en atributos o características únicas del elemento
Contras:
- Puede ser menos específico en documentos complejos
- Podría coincidir potencialmente con múltiples elementos si no se construye cuidadosamente
Sintaxis de XPath
Comprender los elementos de sintaxis centrales es crucial para construir expresiones XPath efectivas:
Elementos de sintaxis básicos:
- / (Barra simple): Selecciona desde el nodo raíz, representando una ruta absoluta
- // (Barra doble): Selecciona nodos en cualquier lugar del documento que coincidan con la expresión
- . (Punto): Se refiere al nodo actual
- .. (Doble punto): Se refiere al padre del nodo actual
- @ (Símbolo arroba): Selecciona atributos
- [] (Corchetes): Contiene predicados (condiciones)
- \(Asterisco): Comodín que coincide con cualquier nodo de elemento
Predicados
Los predicados son condiciones encerradas entre corchetes que filtran la selección de nodos:
//div[@class='container'] // Selecciona elementos div con la clase 'container'
//button[text()='Submit'] // Selecciona elementos button con el texto 'Submit'
//li[position()=3] // Selecciona el tercer elemento li
//input[@type='text' and @required] // Selecciona elementos de entrada de texto requeridos
Selectores XPath
Los selectores XPath definen los criterios para seleccionar nodos en el documento. Aquí hay algunos patrones de selector comunes:
Selectores de elementos:
//div // Selecciona todos los elementos div
//div/p // Selecciona todos los elementos p que son hijos directos de div
//div//p // Selecciona todos los elementos p en cualquier lugar dentro de div
Selectores de atributos:
//*[@id='username'] // Selecciona el elemento con id 'username'
//input[@name='password'] // Selecciona la entrada con el nombre 'password'
//a[@href] // Selecciona todos los enlaces con el atributo href
//img[@src='logo.png'] // Selecciona la imagen con src específico
Selectores de posición:
//tr[1] // Selecciona el primer elemento tr
//tr[last()] // Selecciona el último elemento tr
//tr[position()>1] // Selecciona todos los elementos tr excepto el primero
//ul/li[position() mod 2 = 0] // Selecciona elementos li en posición par
Selectores de contenido de texto:
//h1[text()='Welcome'] // Selecciona h1 con el texto exacto 'Welcome'
//p[contains(text(),'important')] // Selecciona p que contiene la palabra 'important'
//label[starts-with(text(),'User')] // Selecciona etiquetas que comienzan con 'User'
Expresiones XPath
Las expresiones XPath pueden variar de simples a complejas, dependiendo de los elementos que necesites localizar. Aquí hay algunos ejemplos de expresiones cada vez más complejas:
Expresiones simples:
//h1 // Todos los elementos h1
//div[@class='header'] // Todos los elementos div con la clase 'header'
//input[@type='submit'] // Todos los botones de envío
Expresiones intermedias:
//div[contains(@class,'product')]//span[@class='price'] // Spans de precio dentro de divs de producto
//table//tr[position() > 1] // Todas las filas de la tabla excepto los encabezados
//form[.//input[@required]] // Formularios que contienen entradas requeridas
Expresiones avanzadas:
//div[not(@class='hidden') and contains(@id,'section')] // Secciones visibles con un patrón de ID específico
//ul[count(./li) > 5] // Listas con más de 5 elementos
//a[contains(@href,'https') and not(contains(@class,'external'))] // Enlaces HTTPS internos
Ejes XPath
Los ejes definen la dirección de la navegación desde el nodo actual. Comprender los ejes permite una selección de elementos más sofisticada:
Ejes hijo y descendiente:
child::div // Lo mismo que ./div
descendant::p // Lo mismo que .//p
Ejes padre y ancestro:
parent::div // Div padre del nodo actual
ancestor::form // Cualquier formulario ancestro del nodo actual
ancestor-or-self::div // Cualquier div ancestro o el nodo actual si es un div
Ejes hermanos:
following-sibling::li // Todos los hermanos li que siguen al nodo actual
preceding-sibling::div // Todos los hermanos div que preceden al nodo actual
Otros ejes útiles:
following::h2 // Todos los elementos h2 que aparecen después del nodo actual en el documento
preceding::input // Todos los elementos de entrada que aparecen antes del nodo actual
self::p // Selecciona el nodo actual si es un párrafo
Operadores XPath
XPath admite varios operadores para crear condiciones complejas:
Operadores de comparación:
- = : Igual a
- != : No es igual a
- < : Menor que
- > : Mayor que
- <= : Menor o igual que
- >= : Mayor o igual que
Operadores lógicos:
- and : Y lógico
- or : O lógico
- not() : NO lógico
Operadores aritméticos:
- + : Suma
- : Resta
- \: Multiplicación
- div : División
- mod : Módulo
Ejemplos:
//input[@value > 100] // Entradas con valor mayor que 100
//div[@class='item' and @id] // Divs con la clase 'item' que también tienen un ID
//product[price > 50 and price < 100] // Productos con precio entre 50 y 100
//li[position() mod 2 = 1] // Elementos de lista con número impar
Funciones XPath
XPath proporciona numerosas funciones integradas para la manipulación de datos:
Funciones de cadena:
//a[contains(text(), 'Sign up')] // Enlaces que contienen el texto "Sign up"
//label[starts-with(@for, 'user')] // Etiquetas con el atributo 'for' que comienza con 'user'
//p[string-length(text()) > 100] // Párrafos con texto de más de 100 caracteres
//div[normalize-space(text())='Hello World'] // Divs con texto exacto (ignorando espacios en blanco adicionales)
Funciones numéricas:
//ul[count(li) > 5] // Listas con más de 5 elementos
//div[round(number(@data-value)) = 42] // Divs con data-value que redondea a 42
//product[floor(price) = 99] // Productos con precio que se redondea al entero inferior 99
Funciones de conjunto de nodos:
//tr[position() = last()] // Última fila de la tabla
//div[count(child::*) = 0] // Elementos div vacíos (sin elementos secundarios)
//div[not(descendant::a)] // Divs que no contienen ningún enlace
Consola de depuración para XPath
Una de las formas más efectivas de desarrollar y probar expresiones XPath es utilizar las herramientas de desarrollador de tu navegador:
En Chrome:
- Presiona F12 o Ctrl+Shift+I para abrir DevTools
- Ve a la pestaña Consola
- Usa
$x("tu-xpath-aquí")para evaluar expresiones XPath - Los resultados aparecerán como una matriz de elementos coincidentes
En Firefox:
- Presiona F12 o Ctrl+Shift+I para abrir DevTools
- Ve a la pestaña Consola
- Usa
$x("tu-xpath-aquí")para evaluar expresiones XPath - Los resultados aparecerán como una matriz de elementos coincidentes
En Edge:
- Presiona F12 o Ctrl+Shift+I para abrir DevTools
- Ve a la pestaña Consola
- Usa
$x("tu-xpath-aquí")para evaluar expresiones XPath - Los resultados aparecerán como una matriz de elementos coincidentes
Este bucle de retroalimentación directa te permite refinar rápidamente tus expresiones XPath hasta que identifiquen correctamente los elementos de destino.
Consejos y mejores prácticas
1. Evita errores comunes
Mantenlo simple: Las expresiones XPath más simples son más fáciles de mantener y menos propensas a romperse cuando cambia la estructura de la página. Apunta a expresiones concisas que apunten directamente a tu elemento utilizando atributos únicos.
Evita rutas absolutas: Las rutas absolutas son extremadamente frágiles. Si cambia algún elemento en la ruta, el XPath se rompe. Utiliza rutas relativas que se centren en identificadores únicos siempre que sea posible.
Sé específico: Haz que tus expresiones sean tan específicas como sea necesario, pero no más. La sobreespecificidad puede hacer que las expresiones sean frágiles, mientras que la subespecificidad podría coincidir con elementos no deseados.
Utiliza los predicados con prudencia: Los predicados son poderosos para filtrar elementos, pero demasiados predicados anidados pueden hacer que las expresiones sean difíciles de leer y mantener.
Considera la compatibilidad entre navegadores: Algunas características de XPath pueden funcionar de manera diferente en los navegadores. Prueba tus expresiones en todos los navegadores de destino para garantizar la coherencia.
2. Optimiza para el rendimiento
Utiliza selectores eficientes: Cuando sea posible, utiliza IDs u otros identificadores únicos. La expresión //*[@id='username'] es generalmente más rápida que los selectores jerárquicos complejos.
Limita el uso de //: El operador de doble barra (//) busca en todo el documento, lo que puede ser lento. Cuando conozcas la ubicación general de un elemento, comienza con una ruta más específica.
Almacena elementos en caché: Si necesitas interactuar con el mismo elemento varias veces, almacena la referencia en lugar de localizarla repetidamente con XPath.
Minimiza las llamadas XPath: Cada evaluación de XPath lleva tiempo. Agrupa las operaciones cuando sea posible para reducir el número de búsquedas.
Prueba el rendimiento: Si notas ralentizaciones en tus pruebas automatizadas, perfílalas para identificar si las consultas XPath son el cuello de botella. Considera selectores alternativos si es necesario.
3. Depura eficazmente
Utiliza las DevTools del navegador: La mayoría de los navegadores modernos te permiten probar expresiones XPath directamente en la consola. Esto proporciona retroalimentación inmediata sobre si tu expresión funciona.
Resultados de salida: Durante el desarrollo y la depuración, registra los resultados de tus consultas XPath para verificar que estás seleccionando los elementos previstos.
Paso a paso a través del código: Utiliza puntos de interrupción y depuración paso a paso en tu framework de testing para inspeccionar el estado de tu aplicación y los resultados de XPath.
Comenta tu XPath: Agrega comentarios para explicar expresiones XPath complejas, especialmente cuando utilices características avanzadas o abordes casos extremos.
Revisa y refactoriza regularmente: A medida que tu aplicación evoluciona, revisa periódicamente tus expresiones XPath para asegurarte de que sigan siendo confiables y eficientes.
Hoja de trucos de XPath
Aquí hay una guía de referencia completa para las expresiones XPath:
Sintaxis básica de XPath:
/ // Selecciona desde el nodo raíz
// // Selecciona nodos en cualquier lugar del documento
. // Representa el nodo actual
.. // Representa el padre del nodo actual
Selectores:
element // Selecciona todos los elementos con el nombre dado
@attribute // Selecciona el valor del atributo especificado
* // Selecciona todos los elementos secundarios
text() // Selecciona el texto dentro de un elemento
[predicate] // Agrega una condición para filtrar nodos
Predicados:
[name='value'] // Selecciona nodos con el valor de atributo especificado
[position()] // Selecciona nodos basados en su posición
[last()] // Selecciona el último nodo de un tipo dado
[contains(@attribute, 'value')] // Selecciona nodos con valores de atributo que contienen 'value'
[not(predicate)] // Niega una condición
Ejes:
ancestor:: // Selecciona todos los ancestros
ancestor-or-self:: // Selecciona los ancestros y el nodo actual
child:: // Selecciona todos los hijos
descendant:: // Selecciona todos los descendientes
descendant-or-self:: // Selecciona los descendientes y el nodo actual
following:: // Selecciona todos los nodos siguientes
following-sibling:: // Selecciona los hermanos siguientes
parent:: // Selecciona el nodo padre
preceding:: // Selecciona todos los nodos precedentes
preceding-sibling:: // Selecciona los hermanos precedentes
self:: // Selecciona el nodo actual
Operadores:
= // Igual a
!= // No es igual a
< // Menor que
<= // Menor o igual que
> // Mayor que
>= // Mayor o igual que
and // Y lógico
or // O lógico
not // NO lógico
Funciones (Ejemplos):
name() // Devuelve el nombre del nodo actual
count(nodes) // Devuelve el número de nodos en el conjunto de nodos
concat(string1, string2) // Concatena dos cadenas
substring(string, start, length) // Devuelve una subcadena
contains(string, substr) // Comprueba si una cadena contiene una subcadena
normalize-space(string) // Elimina los espacios en blanco iniciales/finales y contrae los espacios
Ejemplos:
/bookstore/book // Selecciona todos los elementos book en la raíz bookstore
//title[text()='XPath'] // Selecciona elementos title con el texto 'XPath' en cualquier lugar del documento
//*[@id='myId'] // Selecciona elementos con el atributo id igual a 'myId'
/bookstore/book[position()=1] // Selecciona el primer elemento book
//div[@class='highlight']//p // Selecciona elementos p dentro de div con la clase 'highlight'
//a[contains(@href, 'example.com')] // Selecciona elementos a con 'example.com' en el atributo href
Técnicas avanzadas de XPath
Trabajar con IDs y clases dinámicas
Los frameworks web modernos a menudo generan IDs y clases dinámicas que cambian en cada carga de página. Aquí hay técnicas para manejar estos escenarios:
// Usando coincidencia parcial de atributos
//div[contains(@id, 'main-content')]
//button[starts-with(@id, 'submit-')]
//input[ends-with(@id, '-input')] // Nota: Esto es XPath 2.0 y no es compatible con todos los navegadores
// Usando patrones de nombre de clase
//div[contains(@class, 'btn') and contains(@class, 'primary')]
Manejo de Iframes
Seleccionar elementos dentro de iframes requiere un manejo especial:
// Primero, localiza el iframe
//iframe[@id='content-frame']
// Luego, en Selenium, cambiarías al contexto del iframe antes de usar XPath para encontrar elementos dentro de él
// driver.switchTo().frame(driver.findElement(By.xpath("//iframe[@id='content-frame']")));
// Después de cambiar, puedes usar XPath normalmente dentro del contexto del iframe
//button[@id='submit']
Detectar la visibilidad del elemento
XPath en sí mismo no puede determinar directamente si un elemento es visible, pero puedes verificar las propiedades que a menudo indican visibilidad:
// Los elementos con display:none a menudo tienen estilo en línea
//div[not(contains(@style, 'display: none'))]
// Los elementos podrían estar ocultos a través de clases
//div[not(contains(@class, 'hidden'))]
// Los elementos podrían tener el atributo aria-hidden
//div[not(@aria-hidden='true')]
Manejo de múltiples elementos con las mismas propiedades
Cuando varios elementos comparten los mismos atributos o propiedades, puedes usar la indexación o atributos más específicos:
// Selecciona el segundo botón con la clase 'action'
(//button[@class='action'])[2]
// Selecciona basado en el contenido del texto y la clase
//button[@class='action' and contains(text(), 'Save')]
// Selecciona basado en los elementos circundantes
//div[@class='card']//button[contains(text(), 'View details')]
XPath en diferentes frameworks de testing
Selenium WebDriver
Selenium proporciona soporte directo para los localizadores XPath:
// Ejemplo de Java
WebElement element = driver.findElement(By.xpath("//button[@id='submit']"));
# Ejemplo de Python
element = driver.find_element(By.XPATH, "//button[@id='submit']")
// Ejemplo de JavaScript
const element = await driver.findElement(By.xpath("//button[@id='submit']"));
Playwright
Playwright admite selectores XPath, aunque se recomiendan los selectores CSS para un mejor rendimiento:
// Ejemplo de JavaScript
const element = await page.locator('xpath=//button[@id="submit"]');
await element.click();
# Ejemplo de Python
element = page.locator('xpath=//button[@id="submit"]')
element.click()
Cypress
Cypress admite XPath con un plugin:
// Primero instala el plugin: npm install -D cypress-xpath
// Agrega a cypress/support/e2e.js:
// require('cypress-xpath')
// Luego usa en las pruebas
cy.xpath('//button[@id="submit"]').click()
Ejemplos de XPath del mundo real
Ejemplos de sitios web de comercio electrónico:
// Encuentra todos los productos con un descuento
//div[@class='product'][.//span[@class='discount']]
// Encuentra productos con precio en un rango específico
//div[@class='product'][.//span[@class='price' and number(translate(text(), '$', '')) < 100]]
// Encuentra productos con calificación de 4+ estrellas
//div[@class='product'][.//div[@class='rating' and @data-stars >= 4]]
Ejemplos de validación de formularios:
// Encuentra todos los campos requeridos
//input[@required]
// Encuentra campos con errores de validación
//input[../span[@class='error']]
// Encuentra etiquetas de campos requeridos
//label[./following-sibling::input[@required] or ./input[@required]]
Ejemplos de datos de tabla:
// Encuentra filas de tabla con contenido específico
//table[@id='data']//tr[td[contains(text(), 'Completed')]]
// Encuentra la celda de encabezado para una columna específica
//table//th[contains(text(), 'Status')]
// Encuentra celdas en la misma columna que un encabezado específico
//table//th[contains(text(), 'Status')]/following-sibling::td
Conclusión
Dominar XPath es una habilidad fundamental para cualquier persona involucrada en la automatización de pruebas web o la extracción de datos. Esta guía te ha equipado con una comprensión profunda de los elementos esenciales de XPath, la sintaxis, los selectores y las mejores prácticas. Al implementar estas estrategias, puedes optimizar tus procesos de pruebas automatizadas, mejorar la confiabilidad de las pruebas y navegar con confianza incluso por las estructuras DOM más complejas.
La flexibilidad y el poder de XPath lo convierten en una herramienta indispensable en tu conjunto de herramientas de testing, especialmente cuando se trata de aplicaciones web complejas donde los localizadores más simples pueden no ser suficientes. Si bien los selectores CSS a menudo se prefieren por su rendimiento, existen muchos escenarios en los que las capacidades únicas de XPath, como seleccionar elementos basados en el contenido del texto o recorrer la jerarquía DOM, lo convierten en la mejor opción.
Recuerda comenzar con expresiones más simples y solo agregar complejidad según sea necesario. Revisa y refactoriza regularmente tus expresiones XPath para asegurarte de que sigan siendo eficientes y mantenibles a medida que tu aplicación evoluciona. Con la práctica y la aplicación de estas técnicas, desarrollarás la experiencia para crear expresiones XPath precisas y robustas que resistan el paso del tiempo.
¡Felices pruebas!
