XPath juega un papel importante cuando usas Octoparse para scrapear datos. Reescribir XPath puede ayudarte a tratar con las páginas faltantes, los datos faltantes o los duplicados, etc. Si bien XPath puede parecer intimidante al principio, no tiene por qué serlo. En este artículo, presentaré brevemente XPath y, lo más importante es que, te mostraré cómo se puede usar para obtener los datos que necesitas mediante la creación de tareas que sean precisas y precisas.
1. Qué es XPath
XPath (XML Path Language) es un lenguaje de consulta para seleccionar elementos de un documento XML / HTML. Puede ayudarte a encontrar un elemento de todo el documento de manera precisa y rápida.
Las páginas web generalmente están escritas en un lenguaje llamado HTML. Si cargas una página web en un navegador (Chrome, Firefox, etc.), puedes acceder fácilmente al documento HTML correspondiente presionando la tecla F12. Todo lo que ves en la página web se puede encontrar dentro del HTML, como una imagen, bloques de texto, enlaces, menús, etc.
XPath es el lenguaje más utilizado cuando las personas necesitan ubicar un elemento en un documento HTML. Puede entenderse fácilmente como la "ruta" para encontrar el elemento de destino dentro del documento HTML.
Para explicar con más detalle cómo funciona XPath. Veamos un ejemplo.
La imagen muestra parte de un documento HTML.
HTML tiene diferentes niveles de elementos, como una estructura de árbol. En este ejemplo, el nivel 1 es librería y el nivel 2 es book. Title, author, year, price son todos de nivel 3.
El texto entre corchetes angulares (<bookstore>) se denomina etiqueta. Un elemento HTML generalmente consta de una etiqueta de inicio y una etiqueta de finalización, con el contenido insertado en el medio.
<tagname>El contenido va aquí ... <tagname>
XPath usa "/" para conectar etiquetas de diferentes niveles de arriba a abajo para especificar la ubicación de un elemento. Para nuestro ejemplo, si queremos ubicar el elemento "author", el XPath sería como:
/bookstore/book/author
Si tienes problemas para entender cómo funciona, piensa en cómo buscamos un archivo en particular en nuestra computadora.
Para encontrar el archivo llamado "author", la ruta exacta del archivo es \bookstore\book\author. ¿Parece familiar?
Cada archivo en la computadora tiene su propia ruta, al igual que los elementos de una página web. Con XPath, puedes encontrar los elementos de la página rápida y fácilmente, como si buscaras un archivo en tu computadora.
El XPath que comienza desde el elemento raíz (el elemento superior en el documento) y pasa por todos los elementos intermedios hasta el elemento de destino se llama un XPath Absoluto.
Ejemplo: "/html/body/div/div/div/div/div/div/div/div/div/span/span/span…"
La ruta absoluta puede ser larga y confusa, por lo que, para simplificar la XPath absoluta, podemos usar "//" para hacer referencia al elemento con el que queremos iniciar la XPath (también conocido como XPath corto). Por ejemplo, el XPath corto para /bookstore/book/author se puede escribir como //book/author. Este breve XPath buscaría el elemento book independientemente de su ubicación absoluta en el HTML, luego bajaría un nivel para encontrar el elemento de destino author.
2. Por qué necesitas conocer Xpath cuando usas Octoparse
Scrapear páginas web con Octoparse es en realidad scrapear elementos de documentos HTML. XPath se utiliza para localizar elementos de destino del documento. Tomemos la acción de paginación como ejemplo.
Después de seleccionar el siguiente botón para construir la acción de paginación, Octoparse generaría un XPath para ubicar el siguiente botón, para que sepa en qué botón hacer clic.
XPath ayuda al rastreador a hacer clic en el botón derecho o scrapear los datos de destino. Cualquier acción que desees que realice Octoparse se basa en el XPath subyacente. Octoparse puede generar XPaths automáticamente, pero los generados automáticamente no siempre funcionan bien. Es por eso que debemos aprender a reescribir XPath.
Cuando se trata de problemas como datos faltantes, bucle sin fin, datos incorrectos, datos duplicados, no se hace clic en el botón siguiente, etc., es muy probable que soluciones estos problemas fácilmente reescribiendo el XPath.
3. Cómo escribir un XPath
Antes de comenzar a escribir un XPath, primero aprendamos algunos términos clave.
Aquí hay un HTML de muestra que usaremos para demostrar.
Atributo/valor
Un atributo proporciona información adicional sobre un elemento y siempre se especifica en la etiqueta de inicio del elemento. Generalmente, un atributo viene en pares de nombre/valor como: name="value". Algunos de los atributos más comunes son href, title, style, src, id, class y muchos más. Puedes 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 <span>.
Parent/child/sibling
Cuando uno o más elementos HTML están contenidos dentro de un elemento, el elemento que contiene los otros elementos se llama parent y el elemento contenido es child del parent. Cada elemento tiene un solo parent, pero puede tener cero, uno o más childrens. Los childrens se encuentran entre la etiqueta de inicio y la etiqueta de finalización del parent.
En nuestro ejemplo, el elemento <body> es el parent de los elementos <h1> y <div>. Los elementos <h1> y <div> son childrens del elemento <body>.
El elemento <div> es el parent de los dos elementos <span>. Los elementos <span> son los childrens del elemento <div>.
Los elementos que tienen el mismo parent se denominan siblings. Los elementos <h1> y <div> son siblings ya que tienen el mismo parent <body>.
Los dos elementos <span>, ambos sangrados bajo el elemento <div> también son siblings.
¡Veamos algunos casos de uso comunes!
Escribir un XPath para ubicar el botón de la 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 aparece 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 localizar al botón Página Siguiente en el HTML.
El XPath que localiza 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 localiza el elemento <a> que tiene "Next" incluido en el contenido se ve así: //a[contains(text(), "Next")]
Este XPath dice, vaya al elemento (s) <a> cuyo contenido contiene el texto "Next".
También puedes utilizar tanto el atributo del título como el texto del 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".
Escribir 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 HTML de muestra a continuación, vemos que todos los elementos <li> tienen atributos similares de class.
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".
Escribir 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 texto () 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 "address" 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. Observa cómo el elemento <div> que contiene el address actual siempre se encuentra debajo de su elemento sibling <div>, uno que tiene el contenido "Location:". Entonces, primero podemos ubicar el texto "Location" y luego seleccionar el primer sibling 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 sibling<div>.
Ahora, es posible que ya hayas 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 siblings, el parent, lo que sea que te ayude a localizar el elemento de destino en el HTML.
Para facilitarte las cosas, aquí hay una hoja de trucos de expresiones XPath útiles para ayudarte a identificar rápidamente cualquier elemento en el HTML.
Expresión | Ejemplo | Significado |
*
Coincide con cualquier elemento | //div/* | Selecciona todos los elementos secundarios del elemento <div> |
@
Selecciona atributos | //div[@id="book"] | Selecciona todos los elementos <div> que tienen un atributo "id" con un valor de "book" |
text()
Busca elementos con texto exacto | //span[text()="Harry Potter"] | Selecciona todos los elementos <span> cuyo contenido es exactamente "Harry Potter" |
contains()
Selecciona elementos que contienen una determinada cadena | //span[contains(@class, "price")] | Selecciona todos los elementos <span> cuyo valor de atributo de clase contiene "price" |
//span[text(),"Learning"] | Selecciona todos los elementos <span> cuyo contenido incluye "Learning" |
|
position()
Selecciona elementos en una posición determinada | //div/span[position()=2]
//div/span[2] | Selecciona el segundo elemento <span> que es child del elemento <div> |
//div/span[position()<3] | Selecciona los primeros 2 elementos <span> que son secundarios del elemento <div> |
|
last()
Selecciona el último elemento | //div/span[last()] | Seleccione el último elemento <span> que es secundario del elemento <div> |
//div/span[last()-1] | Selecciona el último elemento <span> excepto uno que es secundario del elemento <div> |
|
//div/span[position()>last()-3] | Selecciona los últimos 3 elementos <span> que son secundarios del elemento <div> |
|
not
Selecciona elementos que son opuestos a las condiciones especificadas | //span[not(contains(@class,"price"))] | Selecciona todos los elementos <span> cuyo valor de atributo de clase no contiene price |
//span[not(contains(text(),"Learning"))] | Selecciona todos los elementos <span> cuyo texto no contiene "Learning". |
|
and
Selecciona elementos que coinciden con varias condiciones | //span[@class="book_name" and text()="Harry Potter"] | Selecciona todos los elementos <span> cuyo valor de atributo de clase es "book_name" y el texto es "Harry Potter". |
or
Selecciona elementos que coinciden con una de las condiciones. | //span[@class="book_name" or text()="Harry Potter"] | Selecciona todos los elementos <span> cuyo valor de atributo de clase es "book_name" o el texto es "Harry Potter". |
following-sibling
Selecciona todos los siblings después del elemento actual | //span[text()="Harry Potter"]/following-sibling::span[1] | Selecciona el primer elemento <span> después del elemento <span> cuyo texto es "Harry Potter". |
preceding-sibling
Selecciona todos los siblings antes del elemento actual | //span[@class="regular_price"]/preceding-sibling::span[1] | Selecciona el primer elemento <span> antes del elemento <span> cuyo valor de atributo de clase es "regular_price" |
..
Selecciona el parent del elemento actual | //div[@id="bookstore"]/.. | Selecciona el principal del elemento <div> cuyo valor de atributo id es "bookstore" |
|
Selecciona varios paths | //div[@id="bookstore"] | //span[@class="regular_price"] | Selecciona todos los elementos <div> cuyo valor de atributo id es "bookstore" y todos los elementos <span> cuyo valor de atributo de clase es "regular_price". |
*Ten en cuenta que el atributo y el valor del texto distinguen entre mayúsculas y minúsculas.
*Para obtener una lista más exhaustiva de expresiones XPath, consulta aquí.
4. XPath Coincidente y XPath Relativo (para bucle)
Hasta ahora, hemos aprendido cómo escribir un XPath cuando necesitas extraer un elemento de una página web directamente. En ocasiones, sin embargo, es posible que primero debas crear una lista de elementos de destino y luego extraer los datos de cada elemento. Por ejemplo, cuando necesitas extraer datos de páginas de resultados como esta(https://www.bestbuy.com/site/promo/tv-deals).
En este caso, no solo se requiere que conozcas el XPath Coincidente (que usaría para capturar el elemento directamente), sino también el XPath Relativo, el que especifica la ubicación del elemento de lista específico en relación con la lista.
En Octoparse, cuando modificas el XPath de un campo de datos, verás que hay dos cuadros de XPath.
El XPath Coincidentese utiliza cuando extraemos datos de la página web directamente.
El flujo de trabajo generalmente se parece a esto:
XPath Relativo se utiliza cuando extraemos datos de un elemento de bucle. Específicamente, cuando creamos un flujo de trabajo como este:
El XPath Relativo en Octoparse es una parte adicional de Matching XPath relativa a Loop Item XPath.
Por ejemplo, si queremos crear una lista de bucle de elementos <li> y scrapear un elemento contenido dentro de los elementos individuales de <li> en la lista, podemos usar XPath //ul[@class="results"]/li para localizar la lista.
Supongamos que el XPath Coincidente de un elemento de la lista es//ul[@class="results"]/li/div/a[@class="link"].
Entonces, en este caso, el XPath Relativo debería ser /div/a[@class="link"]. O podemos simplificar este XPath Relativo usando "//" a //a[@class="link"]. Siempre se recomienda utilizar "//" al escribir XPath relativo, ya que haría la expresión sea más concisa.
Luego deberíamos ingresar el XPath Coincidente y el XPath relativo así en Octoparse:
Es posible que ya hayas notado que cuando el XPath para la lista de bucles y el XPath relativo se combinan en un XPath, allí tienes exactamente el XPath Coincidente para el elemento del bucle.
5. 4 Pasos simples para to configurar tu XPath
Paso 1:
Abre la página web usando un navegador con una herramienta XPath (una que te permite ver el HTML y buscar una consulta XPath). Siempre se recomienda XPath helper (una extensión de Chrome) si usas Chrome.
Paso 2:
Una vez que hayas cargado la página web, inspecciona el elemento de destino en el HTML.
Paso 3:
Inspecciona el elemento HTML de cerca, así como los elementos cercanos. ¿Ves algo que se destaque y pueda ayudarte a identificar y localizar el elemento objetivo? ¿Quizás un atributo de clase como class="sku-title" o class="sku-header"?
Utiliza la hoja de referencia anterior para escribir un XPath que seleccione el elemento de forma exclusiva y precisa. Tu XPath solo debe coincidir con los elementos de destino y nada más en todo el documento HTML. Con el ayudante de XPath, siempre puedes probar para ver si el XPath reescrito funciona correctamente.
Paso 4:
Reemplaza el XPath generado automáticamente en Octoparse.
Más tutoriales paso a paso:
6. Tutoriales de resolución de problemas de XPath
En la mayoría de los casos, no es necesario que escribas el XPath por tu cuenta. Pero hay algunas situaciones en las que es posible que debas hacer alguna modificación para scrapear con mayor precisión.
Problemas de bucle
1) Faltan elementos en el bucle:
2) Excluir los elementos innecesarios: ¿Cómo excluir elementos de "Anuncios" al crear una lista?
3) Obtener errores al scrapear del elemento de bucle: ¿Por qué recibo errores al extraer de la página de lista?
Problemas de paginación
1) Páginas omitidas: ¿Por qué Octoparse salta algunas páginas?
2)Scrapear siempre la última página:¿Por qué Octoparse sigue raspando la última página y nunca se detiene?
3) No botón de la página siguiente: ¿Cómo manejar la paginación con números de página?
Problemas con los campos de datos
1) Campos en blanco: ¿Qué hacer con esos campos en blanco que obtuve en el resultado extraído?
2) Scrapear un campo incorrecto:
7. Herramienta de XPath
No es fácil verificar el código HTML directamente en Octoparse, por lo que necesitamos usar algunas otras herramientas para ayudarnos a generar un XPath.
Chrome/cualquier navegador
Puedes obtener un XPath para un elemento fácilmente con cualquier navegador. Tomemos Chrome como ejemplo.
Abre la página web en Chrome
Haz clic con el botón derecho en el elemento que desea encontrar el XPath de
Elige "inspeccionar" y verás Chrome DevTools
Haz clic con el botón derecho en el área resaltada en la consola.
Ir a Copiar-> Copiar XPath
Pero el XPath copiado a veces es un XPath absoluto cuando no hay ningún atributo o el valor del atributo es demasiado largo. Es posible que aún debas escribir el XPath correcto.
Herramienta de XPath de Octoparse
Octoparse ofrece una herramienta XPath para ayudarte a escribir XPath fácilmente. Está integrado en la herramienta Octoparse:
Consulta las instrucciones detalladas aquí en Octoparse XPath Tool.
XPath Helper
XPath Helper es una excelente extensión de Chrome que te permite buscar XPath simplemente colocando el cursor sobre el elemento desde el navegador. También puedes editar la consulta XPath directamente en la consola. Obtendrás los resultados de inmediato para que sepas si tu XPath está funcionando correctamente o no.
Puedes descargarlo aquí
.
Para obtener más tutoriales sobre XPath: