Trovare i selettori XPath

Abbiamo visto nel pezzo precedente cosa sono i selettori XPath e perchè sono importanti per trovare i dati che vogliamo all’interno di un documento HTML.

Ma questo tipo di selettori hanno una sintassi particolare che all’inizio può essere difficile da comprendere, quindi: come possiamo fare per conoscere i selettori giusti da utilizzare?

Se andiamo a vedere la struttura di una pagine, pur semplice che sia, risulta davvero ostico andare a riconoscere la parte di codice HTML che rappresenta il nodo che contiene i dati che ci interessano.

Per fortuna ogni browser moderno è dotato di alcuni strumenti per sviluppatori, accessibile premendo il tasto F12 oppure andando a selezionare direttamente il nodo che ci interezza e cliccando con il pulsante destro del mouse andare a scegliere l’opzione ‘Esamina elemento’ o ‘Inspect’ a seconda del browser.

Premendo F12 si accede al pannello per sviluppatori del browser.

Usando questa ultima opzione ci verrà mostrata nella console per sviluppatori la parte di codice che HTML rappresenta l’elemento sul quale abbiamo cliccato.

A questo punto per ottenere il selettore XPath è sufficiente andare a cliccare con il tasto destro del mouse sulla porzione di codice HTML che ci interessa selezionare il comando ‘Copia…’ e poi andare a selezionare l’opzione che ci interessa ovvero ‘Copia XPath’. Avremo cosi nella memoria del blocco appunti il selettore XPath univoco per quell’elemento.

Se vuoi una dimostrazione pratica puoi guardare il breve video qui sotto riportato, dura meno di un minuto.

Se lo hai trovato utile metti un like ed iscriviti al mio canale 😉

Estrazione dei dati con Scrapy Shell

Il metodo migliore per imparare come estrarre i dati da una pagina HTML usando i selettori CSS o XPath è quello di lanciare la Scrapy Shell da terminale andando ad indicare la pagina che vogliano analizzare:

scrapy shell 'http://quotes.toscrape.com/page/1/'

NOTA: Nel caso di OS Windows ricordarsi di utilizzare le doppie virgolette:

# Doppie virgolette per Windows 
scrapy shell "http://quotes.toscrape.com/page/1/"

La Scrapy Shell è particolarmente adatta durante le fasi di sviluppo o di debug di un progetto di estrazione dati perchè permette di testare rapidamente i selettori da usare ed i risultati che essi producono.

Quello che ottentiamo sara qualcosa di simile a questo:

2019-10-27 00:04:17 [scrapy.core.engine] DEBUG: Crawled (200)  (referer: None)
[s] Available Scrapy objects:
[s] scrapy scrapy module (contains scrapy.Request, scrapy.Selector, etc)
[s] crawler
[s] item {}
[s] request
[s] response <200 http://quotes.toscrape.com/page/1/>
[s] settings
[s] spider
[s] Useful shortcuts:
[s] fetch(url[, redirect=True]) Fetch URL and update local objects (by default, redirects are followed)
[s] fetch(req) Fetch a scrapy.Request and update local objects
[s] shelp() Shell help (print this help)
[s] view(response) View response in a browser
In [1]: _

A questo punto abbiamo attivato la nostra console di Scrapy ed abbiamo estratto la pagina che ci interessava che ora è disponibile come oggetto response. Ora possiamo provare ad estrarre degli elementi della pagina utilizzando i selettori CSS con l’oggetto response appena ottenuto:

 
>>> response.css('title') [<Selector xpath='descendant-or-self::title' data='<title>Quotes to Scrape</title>'>]

Quello che otteniamo da questo comando è una lista di elementi chiamata SelectorList. che rappresenta una lista di oggetti Selector contenuti in elementi XML/HTML che ci permettono di effettuare ulteriori operazioni di ricerca ed estrazione dati.

Quindi abbiamo ottenuto degli oggetti, dei nodi della pagina HTML, ma non sono quello che cerchiamo effettivamente, nella maggior mparte dei casi quello che cerchiamo è il testo contenuto in essi. Per estrarre il testo possiamo scrivere il comando:

  
>>> response.css('title::text').get()
'Quotes to Scrape'

Con questo comando viene riportato solo il primo elemento trovato dal selettore, nel caso in cui ci fosse una lista di elementi e volessimo ottenerli tutti dobbiamo scrivere:

>>> response.css('title').getall() 
['<title>Quotes to Scrape</title>']

Otteniamo così il risultato sotto forma di array o lista di elementi.

Le combinazioni dei selettori CSS per individuare uno o più elementi della pagina sono davvero numerose, ovviamente dovete conoscere anche un po’ di HTML, DOM (Document Object Model) e di CSS (Cascade Style Sheet). Se siete pigri o volete la vita facile esiste un efficace strumento chiamato SelectorGadget, supportato dalla maggior parte dei browser, che aiuta molto nella ricerca del giusto selettore CSS.

Introduzione ai selettori XPath

A fianco dei selettori CSS esiste un altro tipo di selettori che hanno maggiore precisione, questi possono essere utilizzati con le espressioni XPath.

 
>>> response.xpath('//title')
[<Selector xpath='//title' data='<title>Quotes to Scrape</title>'>]
>>> response.xpath('//title/text()').get()
'Quotes to Scrape'

I selettori XPath sono molto potenti e sono alla base delle ricerche dei selettori in Scrapy. Infatti i selettori CSS vengono trasformati da Scrapy in selettori XPath mentre è in esecuzione. Anche se hanno una sintassi e delle regole più difficili da comprendere a prima vista , le espressioni XPath permettono di navigare all’interno della struttura del documento ed avere una maggiore precisione. L’argomento è ampio è bene cercare della documentazione dedicata per comprendere meglio il loro utilizzo Nel pezzo successivo andiamo a vedere come trovare i selettori XPath utilizzando lo strumento per sviluppatori del nostro web browser.