Puppeteer

Puppeteer è una libreria Node.js open source di Google che offre un'API di alto livello per controllare Chrome e Firefox. È molto usata per screenshot automatici, test e raccolta di dati dal Web.

Che cosa può fare Puppeteer

Puppeteer controlla i browser supportati tramite Chrome DevTools Protocol e WebDriver BiDi. L'API copre quasi tutte le operazioni eseguibili da una persona nel browser, oltre alle attività specifiche dell'automazione.

Le funzioni principali comprendono:

• Navigazione delle pagine — carica qualsiasi URL, aspetta condizioni di rete o elementi DOM specifici e gestisce reindirizzamenti e autenticazione.
• Acquisizione di screenshot — renderizza una pagina e la salva come PNG, JPEG o WebP. Può acquisire il viewport visibile oppure l'intera pagina scorrevole.
• Creazione di PDF — esporta la pagina renderizzata in PDF con dimensioni, margini, intestazioni e piè di pagina configurabili.
• Interazione con il DOM — fa clic sugli elementi, compila moduli, seleziona voci dai menu e digita testo. Serve ad automatizzare le operazioni necessarie prima di un'acquisizione.
• Intercettazione della rete — controlla, modifica o blocca le richieste. È utile per verificare stati di errore, bloccare annunci o misurare il peso delle risorse.
• Esecuzione di JavaScript — esegue codice JavaScript nel contesto della pagina, estrae dati e modifica il DOM prima dello screenshot.

Puppeteer controlla un vero motore del browser, quindi il risultato corrisponde a ciò che si vede in Chrome, compresi layout CSS, font web, animazioni e contenuti generati da JavaScript.

Puppeteer per gli screenshot

L'acquisizione di screenshot è uno degli usi più comuni di Puppeteer. Il metodo page.screenshot() offre un controllo preciso.

Puoi impostare le dimensioni del viewport e il fattore di scala per simulare qualsiasi schermo, da uno smartphone a un monitor 4K. L'opzione fullPage acquisisce l'intero documento scorrevole, non soltanto l'area visibile. Le regioni di ritaglio permettono di limitare l'immagine a un rettangolo preciso della pagina.

Per le pagine con contenuti caricati in modo differito, lo script può scorrere il documento e attivare tutte le immagini prima dell'acquisizione. Può inoltre chiudere banner dei cookie e popup via codice oppure inserire CSS personalizzato per nascondere gli elementi da escludere.

Gli strumenti e le API per screenshot usano spesso Puppeteer, o una libreria simile, dietro le quinte. Racchiudono queste funzioni in un'interfaccia più semplice, così l'utente può acquisire pagine senza scrivere uno script per il browser.

In pratica, Puppeteer porta rapidamente dall'esigenza di far acquisire uno screenshot al browser a uno script funzionante. Nei progetti incentrati su Chrome, viewport, logica di attesa e formato di output vengono definiti una volta e poi riutilizzati per verifiche, report o acquisizioni programmate.

Puppeteer e Playwright a confronto

Puppeteer e Playwright sono le due librerie principali per automatizzare browser headless e hanno origini comuni: diversi membri del team di Playwright avevano lavorato in precedenza a Puppeteer.

Browser supportati — è la differenza più importante. Le versioni attuali di Puppeteer supportano Chrome for Testing e Firefox stabile. Playwright gestisce Chromium, Firefox e WebKit con una sola API, quindi include anche acquisizioni e test in WebKit.

Struttura dell'API — le API sono simili, ma Playwright include altre funzioni: attesa automatica integrata, che riduce le chiamate esplicite; contesti isolati del browser; supporto nativo per più pagine e frame.

Prestazioni — sono paragonabili nella maggior parte delle attività. Puppeteer ha un leggero vantaggio nei processi riservati a Chrome grazie all'integrazione diretta con il DevTools Protocol. L'astrazione multipiattaforma di Playwright aggiunge un costo minimo.

Comunità ed ecosistema — Puppeteer è disponibile da più tempo e dispone di più plugin e tutorial. Playwright cresce rapidamente ed è spesso preferito nei nuovi progetti che richiedono più browser.

Errori comuni

• Non aspettare il contenuto della pagina. Chiamare page.screenshot() subito dopo page.goto() spesso produce una pagina incompleta. Usa waitUntil: 'networkidle0' oppure aspetta un selettore preciso affinché il contenuto sia renderizzato.
• Usare le dimensioni predefinite del viewport. Il viewport iniziale di Puppeteer è 800x600 e non rappresenta la maggior parte degli schermi reali. Imposta dimensioni e fattore di scala espliciti per ottenere acquisizioni corrette e ad alta risoluzione.
• Ignorare i banner di consenso ai cookie. Le acquisizioni automatiche visitano le pagine come un nuovo utente. Se non chiudi il banner, lo screenshot mostrerà l'avviso anziché il contenuto sottostante.
• Usare la modalità con interfaccia sui server. Puppeteer parte in modalità headless, ma uno script che abilita esplicitamente la finestra del browser non funziona su server privi di display. Mantieni la modalità headless negli ambienti server e CI.
• Non gestire gli errori di navigazione. Le pagine possono scadere, restituire errori o reindirizzare in modo inatteso. Gestisci gli errori intorno alle chiamate di navigazione e acquisizione, così una sola pagina non interrompe l'intero script.