Sapete qual è il selettore corretto da usare nel web scraping? Negli ultimi dieci anni il web scraping è diventato molto popolare per estrarre dati da Internet. Aiuta le aziende ad acquisire e analizzare i dati per prendere decisioni aziendali migliori. Grazie alle tecnologie automatizzate, lo scraping del web non è mai stato così facile come ora.
Sapete qual è il selettore corretto da usare nel web scraping? Negli ultimi dieci anni il web scraping è diventato molto popolare per estrarre dati da Internet. Aiuta le aziende ad acquisire e analizzare i dati per prendere decisioni aziendali migliori. Grazie alle tecnologie automatizzate, lo scraping del web non è mai stato così facile come ora.
Tuttavia, a prescindere dallo strumento o dal framework scelto, è necessario prendere una decisione cruciale per garantire che il vostro scraper effettui lo scrapping dei dati in modo educato. Si tratta di decidere se estrarre gli elementi del Web usando XPath o i selettori CSS, come si apprende in questo articolo.
Vediamo alcuni esempi esistenti.
XPath è l'acronimo di XML Path Language. Tuttavia, utilizza una sintassi non XML per selezionare tag o gruppi di tag da un documento XML o HTML, come nel caso del web scraping. XPath consente di scrivere espressioni per accedere direttamente a un elemento HTML o XML senza attraversare l'intera struttura HTML.
Per capire come si può accedere a un elemento usando XPath, approfondiamo il discorso con un codice HTML. Presumo che conosciate già un po' di HTML di base.
<!doctype html>
<html xmlns=”http://www.w3.org/1999/xhtml” lang="en" xml:lang="en">
<head>
<meta charset="utf-8">
<title>Awesome Products at your Fingertips</title>
</head>
<body>
<h1>Description of product features</h1>
<p>These products are great. So let's just look at the features !</p>
<ul id="product-list" class=”basic-list”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
È possibile digitare il codice di cui sopra in un editor di propria scelta e salvarlo come products.html. Quindi è possibile visualizzarlo in un browser (preferibilmente Google Chrome, con il quale affronteremo questo esempio).
Quando il browser esegue questo codice, fraseggia l'HTML e crea una rappresentazione ad albero degli elementi. È noto come DOM (Document Object Model) nella forma seguente:
È possibile leggere ulteriori informazioni sul DOM al link indicato. Ora l'attenzione si concentra sull'XPath, su come navigare verso ciascuno di questi elementi senza attraversare l'intero albero. Cominciamo quindi con la terminologia di base dell'Xpath.
Con XPath, l'elemento fondamentale è un nodo. I nodi sono semplicemente i singoli elementi appena visti nell'albero DOM. Proseguendo in questo articolo, scoprirete che i nodi sono costituiti da elementi di tag, attributi, stringhe di valori assegnati e così via. In ogni pagina XML o HTML ce ne sono sette e analizziamo da vicino ogni tipo di nodo.
Sebbene i tre punti sopra citati siano i più significativi, è fondamentale conoscere anche i quattro seguenti a titolo informativo.
Ci sono due modi per farlo. Innanzitutto, facciamo una dimostrazione o un esempio di codice. Come ho detto sopra, spero che l'abbiate salvato sul disco locale e che sia pronto per essere visualizzato nel browser.
Quando la pagina viene caricata, passare il mouse sull'elemento 1 e fare clic con il tasto destro del mouse su di esso. Selezionare quindi la voce Ispeziona dal menu che appare, come mostrato nella schermata seguente:
Then you would be able to find the full XPath by clicking on the <li> element in the console and selecting “copy” from the drop-down menu, and then specifying “Copy full XPath as shown below:
Poi, dopo averla incollata in un file di testo o da qualche parte, si ottiene:
/html/body/ul/li[1]Questo è noto come percorso assoluto. Di seguito spiegherò come è stato ricavato.
Passo 1 => li[1] //Qui uno indica il primo elemento li
Passo 2 => /li[1]
Passo 3 => ul/li[1]
Passo 4 => /ul/li[1]
Passo 5 => body/ul/li[1]
Passo 6 => /body/ul/li[1]
Passo 7 => html/body/ul/li[1]
Passo 8 => /html/body/ul/li[1]
With this method, you need to work your way backward, starting from the target element all the way back to the root element. You add a forward slash before the element you have just added as you write each element. So let’s look at how you could work out the XPath for the first <li> element manually:
Anche se il metodo precedente sembra lungo, vi aiuterà a capire come costruire l'XPath completo. Passiamo ora al metodo relativo.
//*[@id="product-list"]/li[1]As you can see, it is pretty short, and the path is relative to the parent <ul> element. Since the <li> element does not have an id attribute, its relative path is relative to the <ul> element.
Le differenze significative sono che l'XPath completo non è leggibile ed è difficile da mantenere. L'altra ovvia preoccupazione è che se ci sono modifiche a qualsiasi elemento a partire dall'elemento radice, l'XPath assoluto non sarà valido. È quindi opportuno utilizzare l'XPath relativo.
Tuttavia, prima di commentare ulteriormente, analizziamo i vantaggi e gli svantaggi.
Con XPath, non ci si deve preoccupare se non si conosce il nome di un elemento, perché si può utilizzare la funzione contains per cercare le corrispondenze probabili. Pertanto, è possibile risalire il DOM quando si cerca un elemento da analizzare.
L'altro vantaggio significativo dei CSS è che funzionano con i browser più vecchi, come le versioni obsolete di Internet Explorer.
Come si è appreso in precedenza, il suo svantaggio più significativo è la facilità di rottura quando si cambiano gli elementi nel percorso. Può essere difficile da comprendere rispetto ai selettori CSS che scopriremo di seguito.
Inoltre, quando si recuperano elementi da XPath, le sue prestazioni sono molto più lente di quelle dei CSS.
Come già sapete, CSS è l'acronimo di Cascading Style Sheets (Fogli di stile a cascata), utilizzati per lo styling degli elementi HTML in una pagina web. Questi stili comprendono l'applicazione di colori ai caratteri, alle immagini di sfondo e ai colori, l'allineamento e il posizionamento degli elementi e l'aumento/diminuzione degli spazi tra i paragrafi.
Per impostare uno stile a un elemento HTML, è necessario specificarlo attraverso un selettore CSS. Cominciamo con un semplice esempio partendo dal markup della prossima sezione.
<h1 id="main-heading" class="header-styles" name="h1name">What are CSS Selectors?</h1>Ecco quindi il selettore CSS per l'elemento di cui sopra:
Si possono anche combinare:
h1.header-styles: questoselettore CSS seleziona gli elementi h1 con classe header-styles.
L'operatore > viene utilizzato per selezionare i figli. Al contrario, l'operatore + sceglie il primo fratello e l'operatore ~ è usato per selezionare tutti i fratelli. Alcuni esempi sono i seguenti:
A differenza di XPath, che Beautiful Soup non supporta, i selettori CSS sono supportati dalle librerie di scraping più efficaci. Inoltre, a differenza di XPath, i selettori CSS sono più facili da imparare e da mantenere. Quasi tutti i browser li supportano, ad eccezione di quelli precedenti alla versione 8 di Internet Explorer. Tuttavia, al giorno d'oggi si usano raramente questi browser.
Anche se si escludono le vecchie versioni di Internet Explorer dall'equazione, potrebbero comunque esserci delle incongruenze nel modo in cui vengono visualizzate sui diversi browser.
Poiché esistono diverse versioni di CSS, esse possono creare confusione tra gli sviluppatori e i principianti.
Un altro fattore vitale dell'attuale tecnologia web è la sicurezza del CSS.
La differenza apparente tra XPath e CSS è che XPath è bidirezionale. Ciò significa che è possibile attraversare l'albero DOM in entrambe le direzioni. Con i CSS, invece, si può passare solo dal nodo genitore ai nodi figli, il cosiddetto flusso unidirezionale.
Come discusso nelle sezioni precedenti, XPath è più difficile da mantenere e non è un buon candidato per una leggibilità efficace. D'altra parte, sebbene XPath possa funzionare nei browser tradizionali, il modo in cui viene reso varia da un browser all'altro.
Pertanto, da questo punto di vista, il CSS è in vantaggio.
XPATH si distingue perché i CSS possono passare dai genitori ai figli solo in aree specifiche, come l'attraversamento dell'albero DOM. Per quanto riguarda la velocità, i CSS sono in vantaggio.
Tuttavia, la differenza di velocità tra XPath e CSS non conta molto quando si tratta di web scraping. Ci sono altri fattori da considerare, come la latenza di rete nello scraping del web.
I CSS sono la prima scelta quando si tratta di Beautiful Soup, poiché non supportano l'XPath.
Non esiste una risposta precisa su quali selettori utilizzare per il vostro progetto di web scraping. Come avete scoperto in questo articolo, XPath ha un vantaggio in alcune situazioni, mentre CSS si distingue in altre.
Pertanto, è necessario tenere conto di aspetti specifici e vitali come l'attraversamento, il supporto del browser e alcune delle capacità tecniche di cui abbiamo parlato. Ci auguriamo che mettiate in pratica ciò che avete imparato e restate sintonizzati per altri articoli.