Lavorare con elementi dinamici su una pagina web

1. Comprendere gli elementi dinamici

Iniziamo con una piccola introduzione sulla natura del contenuto dinamico. Immagina di essere su un sito, e non appena scorri la pagina verso il basso, compaiono più dati, come un tappeto volante magico che si espande costantemente, permettendoti di volare sopra di esso. Questo si chiama "lazy loading" — una tecnica furba che aiuta a risparmiare risorse, caricando il contenuto solo quando necessario. Affidarsi a HTML statico in questi casi è come sperare che il tuo gatto ti porti il caffè al mattino.

Cosa sono gli elementi dinamici?

Gli elementi dinamici sono quelle parti di una pagina web che cambiano senza dover aggiornare l'intera pagina. Possono essere caricati tramite richieste AJAX o integrati nella pagina tramite JavaScript. È importante apprendere diverse strategie per lavorare con tali elementi, in modo che la tua applicazione sia tanto dinamica quanto il contenuto stesso.

2. Strategie di interazione

Passiamo alla magia pratica. Per gestire gli elementi dinamici, abbiamo bisogno di strumenti che capiscano: "La vita è movimento, e io sono pronto per affrontarla". Nel nostro arsenale magico ci sarà Selenium, dato che consente di interagire col browser quasi come farebbe una persona.

Lavorare con richieste AJAX

AJAX è una tecnologia che permette di aggiornare una parte della pagina web senza doverla ricaricare completamente. È comodo per gli utenti, ma complica un po' la vita degli sviluppatori di scraper. Tuttavia, abbiamo un'arma segreta — WebDriverWait e expected_conditions di Selenium.

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

# Configuriamo il driver
driver = webdriver.Chrome()
driver.get("https://example-dynamic-site.com")

# Aspettare che l'elemento compaia
try:
    element = WebDriverWait(driver, 10).until(
        EC.presence_of_element_located((By.ID, "dynamic_element_id"))
    )
    print(element.text)
finally:
    driver.quit()

Uso dei metodi di attesa

Lavorando con elementi dinamici, è importante dare al browser il tempo di "raggiungere" lo stato desiderato. I metodi di attesa, come WebDriverWait combinati con expected_conditions, ci permettono di attendere tranquillamente che tutti gli elementi necessari siano caricati. È come portarsi in palestra — serve tempo, ma il risultato ne vale la pena.

Esempi:

• presence_of_element_located — aspetta che l'elemento compaia nel DOM.
• visibility_of_element_located — aspetta che l'elemento diventi visibile.
• element_to_be_clickable — aspetta che l'elemento diventi cliccabile.

Ecco un esempio per aspettare che un pulsante sia cliccabile:

button = WebDriverWait(driver, 10).until(
    EC.element_to_be_clickable((By.XPATH, "//button[@id='submit']"))
)
button.click()

Scorrere la pagina

Se il tuo contenuto si carica mentre scorri, avrai bisogno dell'arte dello "scrolling". Selenium consente di utilizzare JavaScript per lo scrolling, il che aiuta a caricare nuovi dati.

# Scorrere fino in fondo alla pagina
driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")

Prova a implementare lo scrolling in loop per caricare tutto il contenuto:

SCROLL_PAUSE_TIME = 2
driver.get("https://example.com/dynamic-content")

last_height = driver.execute_script("return document.body.scrollHeight")

while True:
    driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")

    # Aspetta per caricare il contenuto della pagina
    WebDriverWait(driver, SCROLL_PAUSE_TIME)

    new_height = driver.execute_script("return document.body.scrollHeight")
    if new_height == last_height:
        break
    last_height = new_height

3. Esempi pratici di interazione

Ora che abbiamo imparato ad aspettare e osservare, è il momento di mettere queste abilità in pratica e catturare tutti questi dati dinamici.

Supponiamo che ci sia una pagina con prodotti che viene caricata mentre scorriamo verso il basso. Dobbiamo estrarre il nome e il prezzo di ogni prodotto:

products = []

while True:
    # Scorrere verso il basso
    driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")

    # Aspetta il caricamento di nuovi elementi
    WebDriverWait(driver, SCROLL_PAUSE_TIME)

    # Estrazione dei dati dei prodotti
    items = driver.find_elements(By.CLASS_NAME, "product-item")
    for item in items:
        name = item.find_element(By.CLASS_NAME, 'product-name').text
        price = item.find_element(By.CLASS_NAME, 'product-price').text
        products.append({'name': name, 'price': price})

    # Controllare se è stato caricato qualcosa di nuovo
    # (modo ingenuo: se la lunghezza di items non aumenta, esce dal ciclo)
    if len(products) == last_known_count:
        break
    last_known_count = len(products)

Quando gli elementi dinamici non si caricano così rapidamente come vorremmo, occorre avere pazienza e astuzia. WebDriverWait con il suo arsenale di condizioni, lo scrolling della pagina e le iniezioni JavaScript sono la nostra chiave per conquistare il mondo del contenuto dinamico. Come diceva il grande Jedi: "Pazienza, mio giovane padawan". Nel nostro caso, pazienza significa uno scraping di successo di tutti i dati.

Concludiamo la sessione proprio come si fa dopo una giornata di lavoro ben riuscita — con cura.

driver.quit()

Non dimenticare: alla fine è importante assicurarsi che il tuo codice funzioni correttamente, senza errori o problemi. Solo così puoi dire con sicurezza: "Missione compiuta". Buona fortuna nel tuo viaggio nel mondo dei dati dinamici!