Introduzione a XPath e ai CSS-selectors

1. Cosa sono XPath e CSS-selectors?

Oggi faremo un grande passo verso il diventare esperti nell'automazione web con Selenium e conosceremo XPath e CSS-selectors. Questi piccoli ma potenti strumenti saranno i tuoi fedeli alleati nel cercare elementi sulle pagine web. Andiamo insieme a scoprire il mondo dei selectors e impariamo ad usarli per una ricerca più precisa ed efficace.

Se un documento HTML fosse una fitta foresta, allora XPath e CSS-selectors sarebbero le tue mappe-appunti. Ti permettono di tracciare il percorso verso l'albero giusto (o l'elemento, se ti piace di più la programmazione). Questi strumenti aiutano a trovare elementi sulle pagine web, anche se si nascondono dentro metri di codice e milioni di tag.

XPath

XPath (XML Path Language) è un linguaggio pensato per navigare nei documenti XML. Ma qualcuno ha detto che HTML è un ibrido di XML, giusto? Ecco perché XPath è così utile da applicare ai documenti HTML. Può letteralmente arrivare fino all'elemento seguendo qualsiasi percorso tu gli dia.

CSS-selectors

I CSS-selectors provengono dal mondo delle Cascading Style Sheets. Non preoccuparti, studiarli non ti richiederà di diventare un designer! Servono per selezionare precisamente gli elementi in base al loro tipo, classe, id e persino stato. Usarli è più semplice di quanto sembri — probabilmente li hai già usati inconsciamente per stilizzare pagine web.

2. Uso di XPath e CSS-selectors nel codice

Ora che sai cos'è questa meraviglia chiamata selectors, passiamo subito alla pratica. Scopriremo come usarli insieme a Selenium e fare magie!

Uso di XPath

Ecco un esempio di come si può usare XPath per cercare un elemento in Selenium:

from selenium import webdriver

# Configurazione del driver
driver = webdriver.Chrome()

# Apertura della pagina
driver.get('https://example.com')

# Ricerca di un elemento tramite XPath
element = driver.find_element_by_xpath('//div[@id="menu"]/ul/li/a')

# Stampa del testo dell'elemento
print(element.text)

# Chiusura del browser
driver.quit()

Spiegazioni:

• //div[@id="menu"]/ul/li/a — questo è il nostro XPath. Dice: "Ehi, driver, trovami l'elemento a, che si trova dentro li, che è dentro ul, che è in div con id="menu"."

Uso di CSS-selectors

Ora vediamo come si usano i CSS-selectors:

from selenium import webdriver

# Configurazione del driver
driver = webdriver.Chrome()

# Apertura della pagina
driver.get('https://example.com')

# Ricerca di un elemento tramite CSS-selector
element = driver.find_element_by_css_selector('div#menu > ul > li > a')

# Stampa del testo dell'elemento
print(element.text)

# Chiusura del browser
driver.quit()

Spiegazioni:

• div#menu > ul > li > a — il nostro CSS-selector. Ha cercato l'elemento in modo simile a XPath, ma con una sintassi più concisa.

3. Differenze tra XPath e CSS-selectors

Ti chiedi quali sono le differenze tra XPath e CSS-selectors? Ottima domanda! Vediamo quando e cosa usare.

Flessibilità vs. Semplicità

XPath è più flessibile: ti permette di muoverti "in su" nell'albero DOM e usare condizioni logiche complesse. Questo lo rende utile per ricerche più complesse. Tuttavia, a volte la semplicità dei CSS-selectors e la loro concisione li rendono più preferibili. I CSS-selectors sono più leggibili e scrivibili, in particolare quando devi trovare un elemento tramite classe o id.

Supporto delle funzioni

XPath supporta l'uso di funzioni — dal controllo del testo a lavoro con gli attributi, ad esempio, contains() o starts-with(). I CSS-selectors, invece, non hanno un tale supporto.

Velocità di funzionamento

In alcuni scenari i CSS-selectors funzionano più velocemente. Questo è dovuto al fatto che i browser sono inizialmente ottimizzati per lavorare con i CSS-selectors, il che li rende la scelta predefinita per compiti semplici.

Sintassi

XPath ha una sintassi più complessa, che può essere sia un vantaggio che uno svantaggio. I CSS-selectors sono più semplici da scrivere e apprendere.

4. Uso pratico

Applichiamo queste conoscenze a un compito reale. Supponiamo di avere una pagina web con una tabella di prodotti, e dobbiamo raccogliere tutti i nomi dei prodotti e i loro prezzi. Ecco come fare:

Esempio con XPath

from selenium import webdriver

# Configurazione del driver
driver = webdriver.Chrome()

# Apertura della pagina
driver.get('https://example.com/products')

# Ricerca di tutti gli elementi dei prodotti
products = driver.find_elements_by_xpath('//table[@class="product-table"]/tbody/tr')

# Estrazione dei dati di ogni prodotto
for product in products:
    name = product.find_element_by_xpath('.//td[@class="product-name"]').text
    price = product.find_element_by_xpath('.//td[@class="product-price"]').text
    print(f"Product: {name}, Price: {price}")

# Chiusura del browser
driver.quit()

Esempio con CSS-selectors

from selenium import webdriver

# Configurazione del driver
driver = webdriver.Chrome()

# Apertura della pagina
driver.get('https://example.com/products')

# Ricerca di tutti gli elementi dei prodotti
products = driver.find_elements_by_css_selector('table.product-table > tbody > tr')

# Estrazione dei dati di ogni prodotto
for product in products:
    name = product.find_element_by_css_selector('td.product-name').text
    price = product.find_element_by_css_selector('td.product-price').text
    print(f"Product: {name}, Price: {price}")

# Chiusura del browser
driver.quit()

5. Caratteristiche e errori tipici

Quando usi XPath e CSS-selectors, ci sono alcune trappole da evitare. Ad esempio, quando usi percorsi assoluti in XPath, c'è il rischio che il minimo cambiamento nella struttura HTML rompa il tuo script. Quindi cerca sempre di utilizzare percorsi relativi per rimanere flessibile.

I CSS-selectors, d'altra parte, possono diventare illeggibili, se diventano troppo complessi, quindi è importante trovare l'equilibrio tra precisione e semplicità.

Vale anche la pena menzionare la gestione degli errori. Se un elemento non viene trovato, Selenium lancerà NoSuchElementException. Usa i blocchi try-except o metodi di attesa come WebDriverWait per affrontarlo e rendere i tuoi script più affidabili.

1

Опрос

Introduzione a Selenium,  35 уровень,  4 лекция

недоступен

Introduzione a Selenium

Introduzione a Selenium

Открыть