Invierte en tu educación con el precio especial
Antes:$249
Paga en 4 cuotas sin intereses
Termina en:
12d
16h
09m
13s
Antes de comenzar a escribir un XPath, primero cubramos algunos términos clave.
Aquí hay un HTML de muestra que usaremos para demostrar.
Valor de atributo
Un atributo proporciona información adicional sobre un elemento y siempre se especifica en la etiqueta de inicio del elemento. Un atributo generalmente viene en pares de name/ value como: name= “value”. Algunos de los atributos más comunes son href, title, style, src, id, class y muchos más. Puede encontrar la referencia completa de atributos HTML aquí .
En nuestro ejemplo, id = “book” es el atributo del elemento
<div>y class = “book_name” es el atributo del elemento .
Padre / hijo / hermano
Cuando uno o más elementos HTML están contenidos dentro de un elemento, el elemento que contiene los otros elementos se llama padre y el elemento contenido es hijo del padre. Cada elemento tiene solo un padre, pero puede tener cero, uno o más hijos. Los hijos se encuentran entre la etiqueta de inicio y la etiqueta de finalización del padre.
En nuestro ejemplo, el elemento body es el padre de los elementos “<h1> y <div>”. Los elementos “<h1> y <div>” son hijos del elemento “<body>”.
El elemento “<div>” es el padre de los dos elementos “<span>”. Los elementos “<span>” son los hijos del elemento “<div>”.
Los elementos que tienen el mismo padre se denominan hermanos . Los elementos “<h1>” y “<div>” son hermanos ya que tienen el mismo padre “<body>”.
Los dos elementos “<span>”, ambos sangrados bajo el elemento “<div>” también son hermanos.
Escriba un XPath para ubicar el botón Página siguiente
Entonces, primero tendremos que inspeccionar de cerca el botón Página siguiente en el HTML. En el HTML de muestra que se muestra a continuación, hay dos cosas que se destacan. Primero, hay un atributo de título con el valor “Next” y segundo, el contenido “Next”.
En este caso, podemos usar el atributo de título o el texto del contenido para apuntar al botón Página siguiente en el HTML.
El XPath que ubica el elemento “<a>” que tiene un atributo de título con el valor “Next” se vería así: “//a[@title = “Next”]”
Este XPath básicamente dice, vaya al elemento (s) “<a>” cuyo atributo de título es “Next” . El símbolo @ se utiliza en XPath para apuntar a un atributo.
Alternativamente, el XPath que ubica el elemento “<a>” que tiene “Next” incluido en el contenido se ve así: “// a [contains(text (), “Next”)]”
Este XPath dice, vaya al “<a>” elemento (s) cuyo contenido contiene el texto “Next” .
También puede utilizar tanto el atributo de título como el texto de contexto para escribir el XPath.
“// a [ @ title = “Next” and contains(text (), “Next”)]”
Este XPath dice, vaya al elemento (s) “<a>” que tiene un atributo de título con valor “Next” y cuyo contenido incluye el texto “Next”.
Escriba un XPath para localizar el elemento de bucle
Para apuntar a una lista de elementos en una página web, es importante buscar el patrón entre los elementos de la lista. Los elementos de la misma lista generalmente comparten atributos iguales o similares. En el ejemplo de HTML a continuación, vemos que todos los elementos “<li>” tienen atributos de clase similares .
Según la observación, podemos usar contains (@attribute) para apuntar a todos los elementos de la lista.
“// li [contains(@class, “product_item”)]”
Este XPath dice, vaya al “<li>” elemento (s) cuyo atributo de clase contenga “product_item” .
Escribe un XPath para localizar campos de datos
Ubicar un campo de datos en particular es muy similar a ubicar el botón Página siguiente usando text () o atributo.
Digamos si queremos escribir un XPath que ubique la dirección en el HTML de muestra anterior. Podemos usar el atributo itemprop que tiene el valor “Location” para apuntar al elemento en particular.
"// div [@ itemprop = ”address”]"
Este XPath dice, vaya al elemento "<div>" que tiene el atributo itemprop con el valor "address" .
Hay otra forma de abordar esto. Observe cómo el elemento “<div>” que contiene la dirección real siempre se encuentra debajo de su elemento hermano “<div>”, uno que tiene el contenido “Location:”. Entonces, primero podemos ubicar el texto “Location” y luego seleccionar el primer hermano que sigue.
“// div [contains(text (), ”Location”)] / following-sibling::div[1]”
Este XPath dice, vaya al elemento “<div>” que tiene “Location” incluido en el contenido, luego vaya a su primer elemento “<div>” hermano .
Ahora, es posible que ya haya notado que en realidad hay más de una forma de apuntar a un elemento en el HTML. Esto es cierto al igual que siempre hay más de un camino hacia cualquier destino. La clave es hacer uso de la etiqueta, los atributos, el texto del contenido, los hermanos, el padre, lo que sea que le ayude a localizar el elemento de destino en el HTML.
A continuación les dejo un link con un cheat sheet de XPath que seguramente les será útil 😃 https://devhints.io/xpath
