Expresiones en XPath

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()

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

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.

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

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.

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

// = {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 )

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:

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 ')

# 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)```

Me parece mejor usar

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

en lugar de

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

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

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

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

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.

todo lo que necesitan para aprender xpath, usenlo mientras practican

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.