Skip to main content
I selettori sono alla base di qualsiasi web scraper basato su regole: indicano allo strumento esattamente da quali elementi di una pagina estrarre i dati. Un selettore ben scritto continua a funzionare dopo piccoli aggiornamenti del sito; uno fragile si rompe non appena uno sviluppatore cambia il nome di una classe o riorganizza il layout. Capire come scrivere selettori solidi è una delle competenze più utili nel web scraping e merita tempo anche quando si usa uno strumento visuale che li genera automaticamente. Esistono due principali linguaggi per i selettori: selettori CSS e XPath. Entrambi possono individuare elementi in un documento HTML, ma funzionano in modo diverso e ciascuno offre vantaggi che l’altro non possiede.

​
Selettori CSS

I selettori CSS usano la stessa sintassi impiegata dagli sviluppatori web nei fogli di stile, quindi risultano intuitivi a chi ha esperienza di front-end. Selezionano gli elementi in base a nomi di tag, classi, ID, attributi e relazioni con altri elementi. Ad esempio, div.product-card h2 seleziona tutti gli elementi h2 all’interno dei div con classe product-card. I selettori CSS sono generalmente più brevi, più leggibili e più rapidi da valutare per i browser. Sono la scelta predefinita migliore per la maggior parte delle attività di estrazione semplici.

​
XPath

XPath è più potente, ma anche più prolisso. Considera il documento HTML come un albero e permette di spostarsi in qualsiasi direzione: non solo verso il basso, dal genitore al figlio, ma anche verso l’alto fino ai genitori, lateralmente tra elementi fratelli e attraverso il documento. Soprattutto, XPath può selezionare elementi in base al loro contenuto testuale, ad esempio //a[contains(text(), "Pagina successiva")], cosa che i selettori CSS non possono fare. XPath diventa quindi indispensabile per operazioni come trovare un pulsante in base all’etichetta o individuare una cella di tabella in base al testo che contiene. Supporta inoltre condizioni, funzioni e predicati complessi, offrendo maggiore espressività per strutture di pagina insolite.

​
Quale scegliere

Il compromesso è tra semplicità e flessibilità. CSS gestisce in modo più pulito la maggior parte dei casi comuni. XPath è lo strumento adatto quando la struttura HTML è poco agevole, quando serve una corrispondenza basata sul testo o quando l’elemento desiderato può essere identificato solo tramite la sua relazione con un elemento fratello o un antenato, anziché con un genitore diretto.

​
Scrivere selettori solidi

Indipendentemente dal linguaggio utilizzato, la solidità dipende da alcuni principi:
  • Evita i nomi di classe generati automaticamente. Framework come React, Vue e Angular producono spesso nomi di classe che cambiano a ogni build: .css-1a2b3c e simili sono vere e proprie trappole.
  • Preferisci gli attributi semantici. id, data-*, role e aria-label hanno meno probabilità di cambiare, perché veicolano un significato che va oltre lo stile. Un selettore ancorato a [data-product-id] resiste alla riscrittura del foglio di stile; uno ancorato a .flex-row__inner--lg no.
  • Mantieni brevi i selettori. Più lunga è la catena di relazioni genitore-figlio, maggiore è la probabilità che una modifica intermedia del layout la interrompa completamente.
  • Evita i selettori posizionali. nth-child e i percorsi XPath assoluti come /html/body/div[3]/div[2]/ul/li[1] presumono che l’elemento rimanga esattamente nello stesso punto del DOM, cosa che quasi mai accade.
  • Ancorati al punto di riferimento stabile più vicino. Invece di partire dalla radice del documento, trova l’elemento più vicino dotato di un identificatore significativo e stabile, quindi esegui la selezione relativamente a esso.

​
La sfida dello Shadow DOM

Un ostacolo emergente per i selettori è lo Shadow DOM, una funzione dei componenti web che incapsula una sezione del DOM entro un confine chiuso. I normali selettori XPath e CSS non possono penetrare in una shadow root: gli elementi contenuti nei componenti web risultano quindi invisibili agli approcci di scraping tradizionali. Con la crescente adozione dei componenti web per interfacce modulari, questo sta diventando un problema concreto: un web scraper può vedere l’involucro esterno di un componente, ma non il contenuto renderizzato al suo interno. La soluzione richiede uno strumento capace di attraversare le shadow root. Playwright estende i selettori standard con la sintassi >>; Octoparse estende XPath con una sintassi personalizzata che svolge la stessa funzione, consentendo a un selettore generato di raggiungere una shadow root come se fosse un normale sottoalbero DOM.

​
L’approccio di Octoparse ai selettori

Octoparse usa principalmente XPath per individuare gli elementi, una scelta intenzionale. Il modello di navigazione ad albero di XPath corrisponde naturalmente al modo in cui gli utenti non tecnici interpretano la struttura di una pagina: “il prezzo all’interno di questa scheda prodotto” si traduce più direttamente in un’espressione XPath che in una catena di selettori CSS. L’esperienza rimane così accessibile agli utenti che non sono sviluppatori ma devono comunque controllare o modificare un selettore quando qualcosa cambia. Soprattutto, quando un utente fa clic su un elemento, Octoparse non si limita a generare un qualsiasi XPath funzionante: applica un algoritmo intelligente di prioritizzazione degli attributi. Il sistema valuta gli attributi disponibili in base alla loro stabilità semantica: gli identificatori significativi come id, data-* e role vengono preferiti ai nomi di classe mutevoli o agli indici posizionali fragili. L’XPath generato automaticamente è progettato per resistere a piccole modifiche del sito: una riorganizzazione del layout o l’aggiornamento di un foglio di stile non interromperanno un selettore ancorato a un attributo stabile data-product-id, anziché a un percorso del tipo terzo-div-nella-seconda-sezione. Questo algoritmo è stato ricostruito da zero in Octoparse 10.1.0, portando i selettori generati automaticamente ai massimi livelli di precisione: nella grande maggioranza delle pagine, il generatore produce al primo clic un XPath corretto e solido, riducendo il tempo necessario per correggere manualmente i selettori. Per le pagine basate su componenti web, lo stesso generatore produce selettori mediante l’estensione XPath personalizzata di Octoparse per lo Shadow DOM: un elemento dentro una shadow root può così essere individuato come uno nel DOM normale, senza abbandonare XPath per un diverso linguaggio di selezione. Oltre al nuovo generatore, Octoparse aggiunge due funzionalità AI:
  • Generazione XPath assistita dall’AI, che valuta il contesto più ampio della pagina per produrre selettori più resilienti
  • Autoriparazione basata sull’AI (disponibile prossimamente), che rileva i selettori non funzionanti e li ricostruisce dalla struttura modificata della pagina, sia per l’impaginazione (un controllo “Avanti” spostato o rinominato) sia per i selettori dei campi (un valore che ha cambiato posizione nel layout), così un’attività che altrimenti si bloccherebbe può continuare
Queste aggiunte riflettono la direzione del web moderno: le pagine diventano più dinamiche, basate su componenti e incapsulate. Gli strumenti di scraping devono tenere il passo.

​
In sintesi

Investi tempo nei fondamenti dei selettori anche se usi uno strumento visuale. Capire che cosa rende un selettore fragile o solido aiuta a valutare l’output generato automaticamente, risolvere i problemi quando un’attività si interrompe e creare web scraper che durino settimane e mesi, non soltanto per la prima esecuzione. Una volta ottenuti i valori grezzi tramite i selettori, il passaggio successivo consiste nel pulire e rimodellare il testo per trasformarlo nei dati desiderati.