Ora che abbiamo una solida base sulle funzionalità fondamentali di Puppeteer, è arrivato il momento di esplorare tecniche avanzate di automazione. In questa lezione, ci concentreremo su scenari più complessi, come l'interazione avanzata con siti web dinamici, il caricamento di file, l'uso delle API DevTools e l'esecuzione di operazioni in background. Alla fine di questa lezione, saremo in grado di costruire script sofisticati per automatizzare quasi qualsiasi processo web.
Interazione avanzata con siti web dinamici
Molti siti web moderni sono altamente dinamici e fanno ampio uso di JavaScript per caricare contenuti in modo asincrono. Questo approccio migliora l'esperienza utente, rendendo le pagine più interattive e reattive. Rappresenta però una sfida significativa per l'automazione. Infatti, quando interagiamo con una pagina web tramite uno script, potremmo trovarci di fronte ad elementi che non sono immediatamente disponibili al caricamento iniziale. Se il nostro codice tenta di interagire con questi elementi prima che siano completamente caricati, rischiamo di incorrere in errori o comportamenti inattesi.
Per affrontare questa problematica possiamo sfruttare le funzionalità offerte da Puppeteer, una potente libreria per l'automazione del browser. Essa mette a disposizione diversi metodi che ci consentono di attendere il caricamento degli elementi prima di interagire con essi.
await page.waitForSelector('#elemento-dinamico');
await page.waitForSelector('#elemento-dinamico', { timeout: 5000 });
await page.waitForResponse(response =>
response.url().includes('api/dati') && response.status() === 200
);In particolare, l'ultimo metodo specifica di attendere finché il contenuto caricato via AJAX non è ultimato.
Grazie a questi strumenti, possiamo migliorare la stabilità e l'affidabilità dei nostri script di automazione, riducendo il rischio di errori legati ad elementi non ancora disponibili. In questo modo ottimizziamo le nostre interazioni con le pagine web dinamiche, rendendo i nostri test e processi di scraping più efficienti e robusti.
Upload e download di file
Automatizzare il caricamento e lo scaricamento di file è una necessità comune nei test e nei processi di web scraping. Molte applicazioni web richiedono l'upload di documenti, immagini o altri tipi di file come parte del loro flusso di lavoro. Altre generano file scaricabili, come report in formato PDF o CSV. Automatizzando queste operazioni possiamo testare il comportamento di un'applicazione in modo più efficiente e replicare con precisione le azioni che un utente eseguirebbe manualmente.
Per simulare l'upload di un file, possiamo sfruttare il metodo uploadFile di Puppeteer che ci consente di selezionare un elemento di input di tipo file e assegnargli un percorso locale. Questo approccio è utile nei test di funzionalità che prevedono il caricamento di immagini, documenti o altri file richiesti dall'applicazione.
Il codice seguente mostra come individuare un campo input di tipo file e caricare un file specifico:
const fileInput = await page.$('input[type=file]');
await fileInput.uploadFile('/percorso/del/file.jpg');Dopo aver caricato il file, possiamo eventualmente simulare un clic sul pulsante di invio del modulo per completare l'operazione:
await page.click('button[type=submit]');Possiamo anche verificare che il file sia stato effettivamente caricato controllando la risposta del server o l'aggiornamento del DOM.
Quando un'applicazione web permette il download di file, possiamo intercettare la risposta della rete per catturare il file e salvarlo localmente senza alcuna interazione manuale. Questo è particolarmente utile per testare il corretto funzionamento dei link di download o per automatizzare il recupero di dati da pagine web.
Possiamo utilizzare page.on('response') per monitorare le richieste di rete e identificare i file scaricabili in base alla loro estensione o al tipo di contenuto:
page.on('response', async response => {
if (response.url().endsWith('.pdf')) {
const buffer = await response.buffer();
require('fs').writeFileSync('documento.pdf', buffer);
}
});Se vogliamo gestire più tipi di file, possiamo estendere la logica per salvare altri formati, come CSV o immagini:
page.on('response', async response => {
if (response.url().match(/\.(pdf|csv|jpg|png)$/)) {
const fileName = response.url().split('/').pop();
const buffer = await response.buffer();
require('fs').writeFileSync(fileName, buffer);
}
});Grazie a queste tecniche, possiamo automatizzare il processo di gestione dei file in un ambiente di test o scraping, garantendo maggiore efficienza e precisione nei nostri workflow.
Automazione con API DevTools e Puppeteer
Puppeteer integra direttamente le API di Chrome DevTools, consentendoci di ottenere un controllo avanzato sulla navigazione, le performance e la gestione delle risorse di rete. Grazie a queste API possiamo simulare vari scenari per testare il comportamento delle applicazioni web in diverse condizioni, monitorare le richieste di rete e manipolare le risposte del server. Questo ci permette di migliorare la qualità dei nostri test e di affinare le strategie di scraping.
In molte situazioni è fondamentale valutare il comportamento di un sito in condizioni di rete non ottimali, come connessioni lente o ad alta latenza. Con Puppeteer, possiamo simulare diversi scenari di rete utilizzando emulateNetworkConditions. Esso ci consente di ridurre la velocità di download e upload o di introdurre latenza artificiale.
Ad esempio, per testare la reattività di un sito web su una connessione lenta, possiamo applicare queste restrizioni:
await page.emulateNetworkConditions({
offline: false,
downloadThroughput: 100 * 1024, // 100kb/s
uploadThroughput: 50 * 1024, // 50kb/s
latency: 200 // 200ms di ritardo
});Possiamo anche simulare la modalità offline per verificare come l'applicazione gestisce l'assenza di connessione:
await page.emulateNetworkConditions({
offline: true,
downloadThroughput: 0,
uploadThroughput: 0,
latency: 0
});Intercettazione di richieste e risposte
Un'altra funzionalità potente di Puppeteer è la possibilità di intercettare e modificare le richieste di rete in tempo reale. Questo ci permette di bloccare contenuti indesiderati, come annunci pubblicitari o tracker, oppure di simulare risposte personalizzate per testare il comportamento dell'applicazione in diversi scenari.
Per attivare l'intercettazione delle richieste possiamo usare setRequestInterception(true) che ci permette di analizzare ogni richiesta prima che venga inviata:
await page.setRequestInterception(true);
page.on('request', request => {
if (request.url().includes('ads')) {
request.abort(); // Blocchiamo la richiesta di annunci
} else {
request.continue();
}
});Se vogliamo modificare una risposta prima che venga caricata nel browser possiamo sovrascrivere il contenuto della richiesta utilizzando respond:
page.on('request', request => {
if (request.url().includes('api/dati')) {
request.respond({
status: 200,
contentType: 'application/json',
body: JSON.stringify({ messaggio: 'Risposta personalizzata' })
});
} else {
request.continue();
}
});Questa tecnica è particolarmente utile nei test. Ci permette infatti di simulare risposte del server senza dover effettivamente modificare l'API backend. L'integrazione con le API DevTools ci offre inoltre un livello di controllo più avanzato rispetto ai normali strumenti di automazione, permettendoci di:
- simulare condizioni di rete per testare la resilienza di un'applicazione.
- Bloccare risorse inutili per migliorare le performance di scraping.
- Manipolare richieste e risposte per creare ambienti di test più flessibili.
Grazie a queste funzionalità, possiamo ottimizzare i nostri processi di automazione e testare le applicazioni web in condizioni più vicine alla realtà.
Conclusioni: migliorare l'automazione con Puppeteer
Abbiamo approfondito tecniche avanzate per migliorare l'automazione con Puppeteer, affrontando aspetti fondamentali come il testing di siti dinamici, la gestione dei file, l'utilizzo delle API DevTools e l'esecuzione in ambienti di produzione. Queste competenze ci permettono di sviluppare soluzioni più robuste ed efficienti per scenari complessi. L'evoluzione di Puppeteer e delle tecnologie web offre continuamente nuove opportunità di ottimizzazione e perfezionamento, rendendo l'aggiornamento costante una parte essenziale del nostro lavoro.
