XPath gioca un ruolo importante quando raccogli dati con Octoparse. Inserire un XPath giusto può aiutarti a gestire pagine mancanti, dati mancanti o duplicati, ecc. Anche se all'inizio XPath può sembrare un po' complicato, non è necessario che lo sia. In questo articolo ti presenteremo brevemente XPath e, cosa più importante, ti mostrerò come viene utilizzato per estrarre dati necessari creando attività accurate e precise.

XPath (XML Path Language) è un linguaggio di query per la selezione di elementi da un documento XML/HTML. Può aiutarti a individuare un elemento dell'intero documento in modo preciso e rapido.

Le pagine web sono generalmente scritte in un linguaggio chiamato HTML. Se carichi una pagina web su un browser (Chrome, Firefox, ecc.), puoi facilmente accedere al documento HTML corrispondente premendo il tasto F12. Tutto ciò che vedi sulla pagina web può essere trovato all'interno dell'HTML, come immagini, blocchi di testo, link, menù e così via.

XPath è il linguaggio più comunemente utilizzato quando si hanno bisogno di individuare un elemento in un documento HTML. Può essere facilmente inteso come il "path" in inglese per trovare l'elemento target in un documento HTML.

Per spiegare ulteriormente come funziona XPath, diamo un'occhiata a un esempio.

L'immagine sopra mostra una parte di un documento HTML.

L'HTML ha diversi livelli di elementi, proprio come una struttura ad albero. In questo esempio, il livello 1 è bookstore e il livello 2 è book. Title, author, year, price sono tutti di livello 3.

Il testo con parentesi angolari(<bookstore>) è chiamato tag. Un elemento HTML è solitamente costituito da un tag di inizio e da un tag di fine, con il contenuto inserito in mezzo.

<tagname>Il contenuto va qui...</tagname>

XPath utilizza "/" per collegare tag di diversi livelli dall'alto verso il basso per specificare la posizione di un elemento. Nel nostro esempio, se vogliamo individuare l'elemento "author", l'XPath sarebbe come:

/bookstore/book/author

Se hai difficoltà a capire come funziona, pensa a come procediamo per trovare un determinato file sul nostro computer.

Per trovare il file denominato "author", il percorso esatto del file è \bookstore\book\author. Ti sembra familiare?

Ogni file sul computer ha il proprio percorso, così come lo sono gli elementi su una pagina web. Con XPath puoi trovare gli elementi della pagina in modo rapido e semplice, proprio come trovare un file sul tuo computer.

L'XPath che inizia dall'elemento root (l'elemento principale nel documento) e attraversa tutti gli elementi intermedi fino all'elemento di destinazione è chiamato XPath assoluto.

Esempio: "/html/body/div/div/div/div/div/div/div/div/div/span/span/span…"

Il percorso assoluto può essere lungo e confuso, allora per semplificare Absolute XPath, possiamo usare "//" per fare riferimento all'elemento con cui vogliamo iniziare l'XPath (noto anche come short XPath). Ad esempio, lo short XPath per /bookstore/book/author può essere scritto come //book/author. Questo breve XPath cercherà l'elemento libro indipendentemente dalla sua posizione assoluta nell'HTML, quindi scenderà di un livello per trovare l'elemento di destinazione author.

Raschiare pagine web con Octoparse significa in realtà raccogliere elementi da documenti HTML. XPath viene utilizzato per individuare gli elementi di destinazione dal documento. Prendiamo come esempio l'azione di impaginazione.

Dopo aver selezionato il pulsante di pagina successiva per creare l'azione di impaginazione, Octoparse genererà un XPath per individuare il pulsante successivo, in modo che sappia su quale pulsante fare clic.

XPath aiuta il crawler a fare clic sul pulsante giusto o a estrarre i dati target. Qualsiasi azione che desideri che Octoparse esegua si basa sull'XPath sottostante. Octoparse può generare automaticamente XPath ma quelli non sempre funzionano bene. Ecco perché dobbiamo imparare a riscrivere XPath.

Quando si affrontano problemi come dati mancanti, loop infinito, dati errati, dati duplicati, il pulsante successivo non viene cliccato, ecc., ci sono buone probabilità che si risolvano facilmente questi problemi riscrivendo XPath.

Prima di iniziare a scrivere un XPath, trattiamo innanzitutto alcuni termini chiave.

Ecco l'HTML di esempio che usiamo per la spiegazione.

Un attributo fornisce informazioni aggiuntive su un elemento ed è sempre specificato nel tag iniziale dell'elemento. Un attributo solitamente è disponibile in coppie nome/valore come: nome="valore". Alcuni degli attributi più comuni sono href, title, style, src, id, class e molti altri. Puoi trovare il riferimento completo agli attributi HTML qui.

Nel nostro esempio, id="book" è l'attributo dell'elemento <div> e class="book_name" è l'attributo dell'elemento <span>.

Quando uno o più elementi HTML sono contenuti in un elemento, l'elemento che contiene gli altri elementi è chiamato il parent e l'elemento contenuto è un child del parent. Ogni elemento ha un solo parent ma può avere zero, uno o più child. I figli si trovano tra il tag iniziale e il tag finale del genitore.

Nel nostro esempio, l'elemento <body> è il genitore degli elementi <h1> e <div>. Gli elementi <h1> e <div> sono figli dell'elemento <body>.

L'elemento <div> è il genitore dei due elementi <span>. Gli elementi <span> sono i figli dell'elemento <div>.

Gli elementi che hanno lo stesso genitore si chiamano fratelli (siblings). Gli elementi <h1> e <div> sono fratelli poiché hanno lo stesso genitore <body>.

Anche i due elementi <span>, entrambi rientrati sotto l'elemento <div> sono fratelli.

(Scopri di più tutorial su HTML)

Andiamo avanti a qualche casi di applicazione comuni!

Quindi per prima cosa dovremo esaminare attentamente il pulsante Pagina successiva nell'HTML. Nell'esempio HTML sotto, ci sono due cose che risaltano. Innanzitutto c'è un attributo title con il valore "Next" e in secondo luogo il contenuto "Next".

In questo caso, possiamo utilizzare l'attributo title o il testo del contenuto per indirizzare il pulsante pagina successiva nell'HTML.

L'XPath che individua l'elemento <a> il cui attributo title è "Next" sarebbe: //a[@title="Next"]

Questo XPath dice fondamentalmente di andare agli elementi <a> cha ha il attributo title con il valore "Next". Il simbolo @ viene utilizzato in XPath per indirizzare un attributo.

In alternativa, l'XPath che individua l'elemento <a> che ha "Next" incluso nel contenuto assomiglia a questo: //a[contains(text(), "Next")]

Questo XPath indica di andare agli elementi <a> il cui contenuto contiene il testo "Next".

È inoltre possibile utilizzare sia l'attributo title che il testo di contesto per scrivere l'XPath:

//a[@title="Avanti" e contiene(testo(), "Avanti")]

Questo XPath dice di andare agli elementi <a> che hanno un attributo titolo con valore "Next" e il cui contenuto include il testo "Next".

Per indirizzare un elenco di elementi su una pagina web, è importante cercare il modello tra gli elementi della lista. Gli elementi dello stesso elenco generalmente condividono attributi uguali o simili. Nell'esempio HTML sotto, vediamo che tutti gli elementi <li> hanno attributi di classe simili.

In base all'osservazione, possiamo utilizzare contiene(@attribute) per indirizzare tutti gli elementi dell'elenco.

//li[contiene(@class,"product_item")]

Questo XPath dice di andare agli elementi <li> il cui attributo di classe contiene "product_item".

Individuare un particolare campo dati è molto simile a individuare il pulsante di pagina successiva utilizzando text() o attributo.

Se vogliamo scrivere un XPath che individui l'indirizzo nell'esempio HTML sopra, possiamo utilizzare l'attributo itemprop che ha il valore "address" per indirizzare l'elemento particolare.

//div[@itemprop="indirizzo"]

Questo XPath dice di andare all'elemento <div> che ha l'attributo itemprop con il valore "address".

C'è un altro modo per raggiungere il risultato. Nota come l'elemento <div> contenente l'indirizzo effettivo si trova sempre sotto l'elemento fratello <div>, uno che ha il contenuto "Location:". Quindi possiamo prima individuare il testo "Posizione" e quindi selezionare il primo fratello che segue.

//div[contiene(testo(),”Posizione”)]/fratello-successivo::div[1]

L'XPath dice di andare all'elemento <div> che ha "Location" inclusa nel contenuto, quindi va al suo primo elemento <div> fratello.

Ora, potresti aver già notato che in realtà esiste più di un modo per indirizzare un elemento nell'HTML. Questo è vero proprio come c'è sempre più di un percorso verso qualsiasi destinazione. La chiave è utilizzare tag, attributi, testo del contenuto, fratelli, genitore, qualunque cosa ti aiuti a individuare l'elemento di destinazione nell'HTML.

Per semplificarti le cose, ecco un foglio di riepilogo di utili espressioni XPath per aiutarti a individuare rapidamente qualsiasi elemento nell'HTML.

* Nota che l'attributo e il valore del testo fanno tutti distinzione tra maiuscole e minuscole.

* Per un elenco più esaustivo delle espressioni XPath, controllo qui.

Finora abbiamo spiegato come scrivere un XPath quando è necessario estrarre un elemento direttamente da una pagina web. A volte, tuttavia, potrebbe essere necessario creare prima un elenco di elementi di destinazione, quindi estrarre i dati da ciascun elemento. Ad esempio, quando devi estrarre dati dalle pagine dei risultati come questa (https://www.bestbuy.com/site/promo/tv-deals).

In questo caso, non ti viene richiesto solo di conoscere l'XPath assoluto (che utilizzeresti per acquisire direttamente gli elementi), ma anche l'XPath relativo della finestrina Loop Item, uno che specifica la posizione dell'elemento specifico dell'elenco rispetto all'elenco .

In Octoparse, quando modifichi l'XPath di un campo dati, vedrai che ci sono due caselle XPath.

Absolute XPath viene utilizzato quando estraiamo i dati direttamente dalla pagina web.

NOTA: l'Absolute Xpath in Octoparse è diverso da quello sopra. Questo Xpath assoluto significa che i dati estratti provengono dall'intero sito web anziché dai dati nel ciclo e possono anche essere concisi come "//h1[@class="..."]/span[2]... ", piuttosto che quello complicato "/html/body/div/div/div/div/div/div/span/span…".

SUGGERIMENTO: è anche possibile controllare facilmente il tipo XPath e l'elemento XPath passando dall'Anteprima dati alla modalità di Visualizzazione verticale.

L'XPath relativo viene utilizzato quando estraiamo dati da un loop item. Nello specifico, quando creiamo un flusso di lavoro come questo:

Il relative XPath in Octoparse è una parte aggiuntiva dell'elemento XPath relativo all'XPath del Loop Item.

Ad esempio, se vogliamo creare un elenco in loop di elementi <li> e raschiare un elemento contenuto nei singoli elementi <li> nell'elenco, possiamo utilizzare XPath //ul[@class="results"]/li per individuare l'elenco.

Supponiamo che l'XPath di un elemento nell'elenco sia //ul[@class="results"]/li/div/a[@class="link"]. Quindi, in questo caso, l'XPath relativo dovrebbe essere /div/a[@class="link"]. Oppure possiamo semplificare questo XPath relativo utilizzando "//" in //a[@class="link"]. Si consiglia sempre di utilizzare "//" quando si scrive XPath relativo poiché renderebbe l'espressione più concisa.

Rendiamo più semplice vedere la relazione tra i diversi XPath.

Elemento del ciclo XPath: //ul[@class="results"]/li

Xpath dell'elemento che desideri individuare nel Loop Item: //ul[@class="results"]/li/div/a[@class="link"]

XPath relativo del Loop Item: /div/a[@class="link"]

Dovremmo quindi inserire l'XPath del Loop Item e l'XPath relativo in questo modo in Octoparse:

Ora potresti aver già notato che quando l'XPath per l'elenco dei loop e l'XPath relativo vengono combinati in un unico XPath, ottieni esattamente l'XPath per l'elemento.

PASSAGGIO 1: apri la pagina web utilizzando un browser con uno strumento XPath (uno che ti consente di visualizzare l'HTML e cercare una query XPath). L'assistente del percorso (un'estensione di Chrome) è sempre consigliato se utilizzi Chrome.

PASSAGGIO 2: una volta caricata la pagina web, ispeziona l'elemento di destinazione nell'HTML.

PASSAGGIO 3: esamina attentamente l'elemento HTML e gli elementi vicini. Vedi qualcosa che risalta e che potrebbe aiutarti a identificare e localizzare l'elemento target? Forse un attributo di classe come class="sku-title" o class="sku-header"?

Utilizza il foglio di riepilogo qui sopra per scrivere un XPath che selezioni l'elemento in modo esclusivo e preciso. Il tuo XPath dovrebbe corrispondere solo agli elementi di destinazione e nient'altro nell'intero documento HTML. Utilizzando l'helper XPath, puoi sempre verificare se l'XPath riscritto funziona correttamente.

PASSAGGIO 4: sostituisci l'XPath generato automaticamente in Octoparse.

Altri tutorial passo passo:

Nella maggior parte dei casi, non è necessario scrivere XPath da soli. Ma ci sono alcune situazioni in cui potrebbe essere necessario apportare alcune modifiche per raschiare in modo più accurato.

Problemi relativi al loop

Problemi realtivi all'impaginazione

Problemi relativi ai campi dati

Non è facile controllare il codice HTML direttamente in Octoparse, quindi dobbiamo utilizzare altri strumenti per aiutarci a generare un XPath.

Puoi ottenere facilmente un XPath per un elemento con qualsiasi browser. Prendiamo come esempio Chrome.

Ma l'XPath copiato a volte è un XPath assoluto quando non è presente alcun attributo o il valore dell'attributo è troppo lungo. Potrebbe essere ancora necessario scrivere l'XPath corretto.

XPath Helper è una straordinaria estensione di Chrome che ti consente di cercare XPath semplicemente passando il mouse sull'elemento dal browser. Puoi anche modificare la query XPath direttamente nella console. Otterrai immediatamente i risultati in modo da sapere se il tuo XPath funziona correttamente o meno.

Scopri di più su XPath:

​