Expresiones en XPath

Clase 9 de 21 • Curso de Fundamentos de Web Scraping con Python y Xpath

Angel Francisco Flores Ayala

student•

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

César Daniel Carrasco Gutiérrez

student•

Muchas gracias es muy útil tu aporte.

Jeinfferson Bernal G

student•

Gracias por el resumen!

Juan Sebastián Gómez Moreno

student•

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

jaime linares

student•

Gracias

Juan David Colorado Alvarez

student•

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

Wilson Delgado

student•

Gracias!

David Amador Morales

student•

Buen aporte, Juan David.

Alejandro Giraldo Londoño

student•

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.

Antonio Arana

student•

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:

Jeinfferson Bernal G

student•

Muy bueno!

Diego Jurado

student•

Que interesante dato!!

William Leonardo Torres Toloza

student•

¿Les parece que el vídeo está mal rippeado? Yo lo veo como poco fluido la verdad

Andrés David Lizarazo Becerra

student•

A veces sí me da esa sensación, sin embargo le subo a la velocidad de reproducción y arreglado👌

Antonio Garzón

student•

Sube la velocidad. ya que si pareciera que tiene este problema.

Miguel Angel Paz Gonzalez

student•

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.

Moisés Manuel Morín Hevia

student•

Bien (:

Abraham Manuel Munguia Coronado

student•

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

Alan Vazquez

student•

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

Alan Vazquez

student•

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

Royer Guerrero Pinilla

student•

Me parece mejor usar

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

en lugar de

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

Edgar Roquel

student•

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.

Luis Arces Palomino Blas

student•

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

Alan Vazquez

student•

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"]

Luis Fernando Úbeda Camacho

student•

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

Moisés Manuel Morín Hevia

student•

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

Carolina Acosta Muñoz

student•

Algunos ejemplos de expresiones en XPath:

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

Moisés Manuel Morín Hevia

student•

Gracias, no se ve la imagen.

Sara María Mejia Sánchez

student•

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

Joaquín Alejandro Domínguez Lozano

student•

todo lo que necesitan para aprender xpath, usenlo mientras practican

Antonio Demarco Bonino

student•

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.

Cristian Roso

student•

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