Expresiones en XPath

Para escribir expresiones se usara lo siguiente $x(''). Entre las comillas se van a escribir las expresiones, las expresiones tienen diferentes símbolos que tienen una utilidad.

Se describe la utilidad de cada expresión.

• / hace referencia a la raíz, o tambien significa un salto entre nodos. e.g /html/bodyMuestra todo lo que hay dentro del body de html
• // Sirve para acceder a todos los nodos con la etiqueta seleccionada. e.g [*//span](//span) muestra todas las etiquetas span*
• .. Sirve para acceder a los nodos padre de la etiqueta tag. e.g //span/.. accede a todos los nodos padre de span
• . Hace referencia al nodo actual. e.g. //span/. es equivalent a //span
• @ Sirve para traer los atributos. e.g //div/@class Nos da las clases de todos los divs

Cuando deban hacer una búsqueda a gran escala, una herramienta que les puede ayudar es la extensión en chrome de xPath Finder. OJO, esta extensión les va a decir el xpath de lo que están buscando, pero no es un reemplazo total a lo que aprendemos acá. Por eso aclaro que úsenla cuando deban buscar muchos paths, de lo contrario háganlo manual.

Quien quiera agregar la extensión a su navegador acá dejo el link:

https://chrome.google.com/webstore/detail/xpath-finder/ihnknokegkbpmofmafnkoadfjkhlogph

Si desean ver directamente el elemento en la página y verificar su expresión. Se puede usar en la pestaña de Elements el comando Ctrl + F y poniendo directamente la expresión, el navegador de muestra el elemento en concreto. Por ejemplo: //h1/a/text()

RESUMEN: Expresiones en Xpath
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

• / : Significa la raiz o root de todo el documento, tambien significa un salto entre nodos. Puedo navegar entre niveles

• // : Puedo ir por varios niveles en el esquema que construimos.

Ejemplo:

# Fuente de trabajo Quotes to Scrape:

url ="http://quotes.toscrape.com/"

#Quiero extraer el texto de mi nodo h1.

$x('//h1/a/text()').map(x => x.wholeText)
# Devuelve en consola: ["Quotes to Scrape"]
#La función map pertenece a Js y la estoy usando para que me muestre todo el texto de la 
selección de Xpath.

Existen otras expresiones

• /… : Acceder a todos los nodos padre de x nodo.
• /@atribute_name : Me permite extraer atributos

#Estoy trayendo todos los atributos class de los nodos span.
$x('//span/@class')

Para ser específicos con los datos a extraer se usan predicados.

COPIA Y PEGA EL XPATH:

Fui a jugar un rato en Amazon con lo aprendido en esta clase y descubri que es posible obtener el Xpath completo, para tan solo copiar y pegar, chequen:

Me costo trabajo pero lo logre.
Extraje de wikipedia los links del menu de contenido:

for(i=1; i<=5; i++)
{
     console.log(i + '.-  ' + $x('//*[@id="p-navigation"]/div/ul/li/a')[i].href)
}

y los imprimi en consola.

haciendo click derecho en copiar en la seccion elements del inspector podemos copiar el elemento en formato xpath para ese elemento

// = {Espacion en blanco} ( Brinca directamente a la etiqueta )
/ = > ( Selecciona el nodo siquiente )

CSS no tiene una forma nativa pata acceder a los elementos padre o al valor de un atributo (Pero si puede buscar segun un atributo e inclusive un atributo con un valor especifico) sin embargo cada lenguaje implementa metodos para poder acceder a estos.

# Navegar entre la jerarquia
$$('html > body > div > div')

# Ir directamente al nodo ( Retorna todos los nodos concidentes )
$$('h1')

# Brinca hasta la primera concidencia sin necesidad de seguir la jerarquia de nodos directamente
$$('html > body span')

# Acceder a los padres en JS ( map() solo es para aplicar el metodo a cada elemento de la lista )
$$('span').map(x => x.parentElement)

# Buscar los elementos que tengan el atributo class
$$('span[class]')

# Obtener el valor del atributo
$$('span[class]').map( x => x.getAttribute('class') )
$$('span[class]').map( x => x.attributes['class'].value )

*( CSS brinca hasta el nodo donde encuentre la concidencia )
**( Las funciones para obtener los valores de los atributos varian segun el lenguaje de programacion )

Para usar los selectores de CSS se usa $(’’) o $$(’’)
La pricipal diferencia es que usando un solo $ solo devuelve la primer concidencia y con $$ devuelve todas las concidencias
https://developers.google.com/web/tools/chrome-devtools/console/utilities#queryselectorall
https://developers.google.com/web/tools/chrome-devtools/console/utilities#queryselector

Me parece mejor usar

$x('//h1/a/text()').map(x => x.data)

en lugar de

$x('//h1/a/text()').map(x => x.wholeText)

Es posible usar Xpath desde la consola usando JavaScript, para esto debemos valernos de las siguientes expresiones:
.

• $x(’’) = entre las comillas es que debo escribir mis expresiones de Xpath.
  .
• /: el slash hace referencia al root/raíz del documento HTML. $x(’/’) esto devuelve el objeto document. El slash también se usa para salta de un nodo a otro, respetando una jerarquía, $x(’/html/body/div/h1’).
  .
• //: El doble Slash sirve para saltar directamente a un nodo, $x(’//h1’), esto de devuelve el o los h1 disponibles en el documento HTML.
  .
• text() = este método me devuelve el texto del o los nodos que estoy seleccionando $x(’//h1/a/text()’), esto me devolvería un objeto text, el cual tiene tas las propiedades de un nodo tipo texto y entre estas propiedades está el nodoValue el cual contiene el texto del h1.
  .
• Usando el método map() = $x(’//h1/a/text()’).map(x => x.wholeText), esto me devuelve el texto del o los nodos seleccionados. Ojo, este método es de JavaScript y por tanto funciona en la consola, pero no lo hará al trabajar en Python.
  .
• /… = Me permite ir directo a un nodo, pero me devuelva el padre directo de cada uno. $x(’//span/…’) es similar a navegar desde la consola de comandos.
  .
• @ = Se usa para acceder a los atributos de uno o varios nodos, por ejemplo: $x(’//span/@class’), esto me devuelve tas las clases de todos los span, pero al igual que text() me devuelve un objeto y dentro de este puedo ver el nombre de la clase en el atributo value.

Saber manejar la consola me ayudo mucho a entender esta clase!

Para los que les interesa saber que hace la funcion map() esta en palabras simples solo aplica una funcion a cada elemento de ua lista ( Esta lista son los resultados de la busqueda )

$x('//h1/a/text()')
	[text]
		0: text
			assignedSlot: null
			....
			previousSibling: null
			textContent: "Quotes to Scrape"
			wholeText: "Quotes to Scrape"
		length: 1
		__proto__: Array(0)

$x('//h1/a/text()').map(x => x.wholeText)
	["Quotes to Scrape"]

La funcion solo accede a la propiedad wholeText del resultado, esto para cada elemento de la lista

Usando CSS seria algo asi
Resultado de la busqueda:

$$('h1 a')
	[a]
		0: a
			accessKey: ""
			....
			text: "Quotes to Scrape"
			textContent: "Quotes to Scrape"
	length: 1
	__proto__: Array(0)

Para acceder al texto es hacer lo mismo

$$('h1 a').map(x => x.text)
["Quotes to Scrape"]

$x(''): Para utilizar las expresiones de XPath.

Algunos ejemplos de expresiones en XPath:

• Siempre deben ir dentro de comillas y paréntesis así: $x(' expresión ')

En definitiva este curso tiene mucho potencial, el XPath permite interactuar de manera muy dinámica con los nodos del HTML.

Les comparto las diferentes expresiones usadas:

$x('/')
$x('/html')
$x('/header')
$x('//h1')
$x('//h1/a/text()')
$x('//h1/a/text()').map(x => x.wholeText)
$x('//span/.')
$x('//span/..')
$x('//span/@class')

todo lo que necesitan para aprender xpath, usenlo mientras practican

Clase maravillosa y que te hace sacarle el miedo a la consola, como tantas otras, además de poder ir a las entrañas de cada web. Ya sacaremos adelante estas prácticas.

# Ir a la raíz. O agregar despues para seleccionar un nodo
$x('/')

# Salto entre nodos
$x('//')

# Ir directo al nodo
$x('//h1')

# Extraer directo del nodo en Python
$x('//h1/text()')

# Extraer directo del nodo en JS
$x('//h1/a/text()').map(x => x.wholeText)

# Accede al nodo padre
$x('//span/..')

# Acceder a todos los padres del nodo 
$x('//span').map(x => x.parentElement)

# Extrae los span con atributo class
$x('//span/@class')

Que buena onda le pone Facundo!! muy bueno!

He hecho un resumen de las expresiones disponibles en XPath que aprendimos en esta clase, en la siguiente imagen:

También muestra el texto:
$x(’//h1/text()’)[0].wholeText

$x('//span/small[@class="author"]/text()').map(x=>x.wholeText)```

$x('//'): Doble slash para ir directamente a un nodo.

Nos saltamos
el a : $x(’//h1//font/text()’).map(x=>x.wholeText)

Otras notaciones comunes en XPath incluyen:

/: Esta notación se utiliza para seleccionar un nodo específico en el nivel inmediatamente inferior al nodo actual. Por ejemplo, /libreria/libro/titulo seleccionaría el elemento <titulo> de todos los elementos <libro> en el documento XML.

.: Esta notación se utiliza para seleccionar el nodo actual. Por ejemplo, ./titulo seleccionaría el elemento <titulo> del nodo actual.

..: Esta notación se utiliza para seleccionar el nodo padre del nodo actual. Por ejemplo, ../autor seleccionaría el elemento <autor> que es un nodo hermano del nodo actual.

*: Esta notación se utiliza para seleccionar todos los nodos que cumplen con una determinada condición. Por ejemplo, *[@tipo='novela'] seleccionaría todos los elementos que tienen un atributo tipo con el valor 'novela'.

@: Esta notación se utiliza para seleccionar un atributo específico de un elemento. Por ejemplo, @isbn seleccionaría el valor del atributo isbn de un elemento XML.

https://colab.research.google.com/github/hannesdatta/course-odcm/blob/master/content/docs/tutorials/webscrapingadvanced/webscraping-advanced.ipynb

Xpath Lenguaje que nos permite movernos entre nodos del HTML de una pagina web para extraer la información de las etiquetas. Esto es lo que he entendido hasta el momento de xpath.

Estructura básica:

$x('')

Resumen de las expresiones de la clase:

este lenguaje tiene muchas similitudes con HTML, y podemos usar la misma técnica para extraer información de paginas web, las expresiones de Xpath se escriben dentro de ’ ’

1. / es una expresión que indica el root, también significa un salto entre nodos

$x('/') 

1. // Significa salto entre nodos, iras tipo de nodoseleccionado

$x('//h1') 

1. /text para poder ver el texto

$x('//h1/atext()').map(x=>x.wholeText) 

1. /… si quiero acceder a los nodos de tipo padre

$x('//span/..') 

1. para extraer atributos es con @

$x('//span/@class') 

$x(’/html’)

Muy buena clase.

Resumen:
.
$x(’/’)
Raíz del documento
.
$x(’/html’)
$x(’//’)
Salto entre nodos
.
$x(’//h1’)
$x(’//h1/text()’)
Texto del h1
.
$x(’//h1/a/text()’).map(x => x.wholeText)
$x(’//span/@class’)
Atributos tipo class

Para obtener el texto sin usar función map

$x('//h1/a/text()').pop().data

Primera tendencia en twitter:

$x('//*[@id="react-root"]/div/div/div[2]/main/div/div/div/div/div/div[2]/div/div/section/div/div/div[3]/div/div/div/div[2]/span/span/text()').map(x => x.wholeText)

Mi expresion en XPath:

for(i=1; i<=5; i++)
{
     console.log(i + '.-  ' + $x('//*[@id="p-navigation"]/div/ul/li/a')[i].href)
}

Que clase tan bien explicada!

Les comparto esta extención de chrome que uso desde hace tiempo, sirve para CSS y Xpath.

excelente

$x('/')
Es una expresión para la raíz del documento
$x('/html')
$x('//')
Salto entre nodos
$x('//h1')
$x('//h1/text()')
Me trae el texto del h1
$x('//h1/a/text()').map(x => x.wholeText)

$x('//span/@class')
Me trae los atributos tipo class

/ Expresa relacion entre nodos padres e hijos
// Ingresa directamente a la etiqueta
. Nodo actual
… Nodo padre del nodo actual
@ Atributo

que excelente clase, explicado a detalle y profundidad. muchas gracias

Expresiones
$x(’ ')
/ = raíz del documento, salto entre nodos.
// = Saltro grande entre nodos que llega al último
text() = Textro entre los nodos
/… = Todos los divs padres
@ = Acceder a los atritutos

Hola a todos, os dejo mis apuntes de esta clase, sin embargo, he creado un respositorio en github donde estan todos los apuntes de este curso: https://github.com/fer2002743/web-scraping

<h1>Expresiones en XPath</h1>

La primera expresion que vamos a utilizar es:

$x('/')
#en este caso en  concreto selecciono a todo el documento

$x('/html')
#En este caso solo selecciono el documento HTML

Con esta expresion podemos movernos de un sitio a otro de la pagina web. Pero que pasa cuando queremos acceder a un nodo en particular pero queremos evitar poner toda la ruta hasta alli??. Pues muy facil, escribimos dobre eslash y ponemos la ruta directamente:

$x('//h1')
#en este caso estoy seleccionando todos los nodos con la etiqueta h1

#ahora supongamos que quiero seleccionar el texto de ese nodo, para ello escribo:

$x('//h1/text()')

#por otro lado, si queremos seleccionar el nodo actual lo que hacemos es:

$x('//span/.')

#esto que acabamos de hacer es lo mismo que lo que habiamos hecho antes:

$x('//span')

#pero si queremos seleccionar a todos los nodos por encima del que nos encontramos escribimos:

$x('//span/..')

Finalmente, vamos a aprender a extraer atributos, lo cual hacemos con la siguiente expresion:

$x('//span/@class')

#con esta expresion extraemos todos los atributos de tipo class que hay en span. Cuando escribimos @ despues de un slash significa que vamos a extraer un atributo, y despues escribimos el 

Hola, aqui os dejo una expresion que hice para conseguir todas las quotes

<$x('//span/text()').map(x => x.wholeText)>

usando xpath en Javascript

$x('expresion de xpath')

/**
 * Ejemplos realizados en la pagina
 * https://quotes.toscrape.com/
*/

$x('/') // el documento principal meta, style, html ,script

$x('/html') // el documento html

$x('//') //salto entre nodos

$x('//h1/a/text()') // accediendo el texto del h1

$x('//h1/a/text()').map(x => x.wholeText) // opteniendo el texto en javascript

$x('//span')  // seleccionar todos los elementos span

$x('//span/.')  // '/.' es el nodo actual siendo esto igual a hacer '//span'

$x('//span/..') // accediendo a todos los elementos padres de un span

// accediendo a atributos
$x('//span/@class') // extrae todo el contenido de todos los elementos class que esten en un elemento span

/ Expresa relacion entre nodos padres e hijos
// Ingresa directamente a la etiqueta

Para obtener el texto del title, tambien se puede utilizar:

$x(’//h1/a/text()’)[0].data

$x('//h1/a/text()').map(x=> x.wholeText)```

interesante esta clase

Interesante

Bueno para acceder yo hice de la siguiente forma $x(’//h1’)[0].innerText , pero como dice el profesor utilizando map tambien funciona para cuando es uno o más elementos h1 y <a href> dado que en resumen map funciona como un ciclo que recorre el arreglo.