Nel mondo dello sviluppo software il testing è una fase cruciale per garantire che le applicazioni funzionino correttamente. Tra le varie tipologie di test, i test End-to-End (E2E) sono fondamentali perché simulano l'esperienza dell'utente finale, verificando che tutti i componenti dell'applicazione interagiscano correttamente.
Puppeteer si rivela un'ottima scelta per eseguire test E2E, grazie alla sua capacità di controllare il browser. In questa lezione, esploreremo come utilizzare Puppeteer per automatizzare test E2E su una web application, eseguendo verifiche su funzionalità critiche, interazioni con gli elementi dell'interfaccia utente e validazioni di contenuto.
Perché scegliere Puppeteer per i test E2E?
Rispetto ad altri strumenti di testing come Selenium o Cypress, Puppeteer offre numerosi vantaggi, rendendolo una scelta ideale per l'automazione dei test su browser basati su Chromium.
- Velocità: Puppeteer è più veloce di Selenium poiché si interfaccia direttamente con il motore di rendering di Chrome, evitando la necessità di un WebDriver intermedio. Questo riduce i tempi di esecuzione dei test e migliora le prestazioni complessive.
- Facilità d'uso: la sua API è intuitiva e ben documentata, permettendoci di scrivere test in modo chiaro e conciso. Grazie ad un approccio dichiarativo e moderno, possiamo interagire con gli elementi della pagina in modo semplice ed efficace.
- Modalità headless: possiamo eseguire i nostri test in modalità headless, ossia senza interfaccia grafica, per migliorare la velocità e l'efficienza, riducendo il consumo di risorse del sistema. Tuttavia, all'occorrenza, possiamo anche eseguire i test in modalità visibile per un migliore controllo durante il debugging.
- Debugging: Puppeteer fornisce strumenti avanzati per il debugging, come la possibilità di catturare screenshot, registrare video durante i test e persino ispezionare il DOM in tempo reale. Questi strumenti ci aiutano a individuare e correggere eventuali anomalie in modo più rapido ed efficace.
- Automazione completa: oltre ai test, possiamo utilizzare Puppeteer per una vasta gamma di automazioni, come la generazione di PDF, lo scraping di dati da pagine web e la simulazione di interazioni utente complesse.
Grazie a queste caratteristiche Puppeteer rappresenta una soluzione potente per l'automazione e il testing, offrendoci maggiore controllo e flessibilità rispetto ad altre alternative.
Impostare un ambiente di testing con Puppeteer
Per iniziare, assicuriamoci di avere installato nel nostro sistema Jest. Jest è un framework di testing JavaScript che permette di scrivere test in modo semplice ed efficace. Fornisce funzioni di asserzione integrate, mocking e una struttura chiara per organizzare i test. Quindi, scriviamo:
mkdir puppeteer-testing
cd puppeteer-testing
npm init -y
npm install jestAggiorniamo il file package.json che si trova nella cartella principale del progetto, per includere uno script per eseguire i test:
"scripts": {
"test": "jest"
}Ora creiamo una cartella tests/ e un file e2e.test.js al suo interno.
Scrivere il primo test E2E con Puppeteer
Per iniziare a testare il nostro sito con Puppeteer creiamo il file tests/e2e.test.js e scriviamo un semplice test per verificare il caricamento della homepage. Nel nostro script utilizziamo beforeAll per avviare un'istanza di Puppeteer in modalità headless e aprire una nuova pagina, rendendo i test più efficienti senza dover visualizzare il browser. Dopo l'esecuzione dei test, con afterAll chiudiamo il browser per liberare le risorse. Nel test vero e proprio visitiamo la homepage con page.goto('https://example.com'), recuperiamo il titolo della pagina con await page.title() e lo confrontiamo con il valore atteso 'Example Domain' usando Jest.
Possiamo estendere il test verificando la presenza di elementi chiave, come un'intestazione, controllando che il testo dentro un tag h1 sia corretto, oppure simulando interazioni come il clic su un link e attendendo la navigazione a una nuova pagina. Inoltre, possiamo acquisire screenshot della pagina per aiutarci nel debugging in caso di errori. Grazie a Puppeteer, possiamo automatizzare il controllo della nostra applicazione web con precisione e flessibilità, rendendo il processo di testing più veloce ed efficace.
const puppeteer = require('puppeteer');
describe('Test E2E con Puppeteer', () => {
let browser;
let page;
beforeAll(async () => {
browser = await puppeteer.launch({ headless: true });
page = await browser.newPage();
});
afterAll(async () => {
await browser.close();
});
test('La homepage si carica correttamente', async () => {
await page.goto('https://example.com');
const title = await page.title();
expect(title).toBe('Example Domain');
});
});In pratica, quello che abbiamo fatto è stato:
beforeAll: avvia il browser e apre una nuova pagina prima di eseguire i test.afterAll: chiude il browser dopo l'esecuzione dei test.- Test della homepage: visita
https://example.come verifica che il titolo della pagina sia quello previsto.
Simulare interazioni dell'utente
Un test E2E deve simulare le azioni di un utente, riproducendo fedelmente l'interazione con l'interfaccia dell'applicazione. Un esempio classico è il login, in cui un utente inserisce le credenziali e accede al sistema. Nel nostro test navighiamo alla pagina di login con page.goto('https://example.com/login'), quindi utilizziamo page.type('#username', 'testuser') e page.type('#password', 'password123') per inserire nome utente e password nei rispettivi campi. Subito dopo, con page.click('#login-button'), simuliamo il clic sul pulsante di accesso e attendiamo la navigazione alla pagina successiva con page.waitForNavigation(), assicurandoci che il processo di login sia completato prima di proseguire.
Infine, verifichiamo che l'utente sia stato autenticato controllando la presenza di un messaggio di benvenuto con page.$eval('.welcome', el => el.textContent), confrontandolo con il valore atteso 'Benvenuto, testuser!'. Questo test ci permette di garantire che il processo di autenticazione funzioni correttamente in condizioni normali, ma possiamo estenderlo per coprire altri scenari, come il login con credenziali errate, la gestione degli errori o il logout.
Per esempio, possiamo testare cosa accade quando un utente inserisce una password sbagliata e verificare la presenza di un messaggio di errore con expect(errorMessage).toBe('Credenziali non valide'). Inoltre, possiamo controllare che, dopo un login riuscito, l'utente rimanga autenticato anche ricaricando la pagina, oppure che venga correttamente disconnesso dopo aver premuto un pulsante di logout.
test('Login con credenziali corrette', async () => {
await page.goto('https://example.com/login');
await page.type('#username', 'testuser');
await page.type('#password', 'password123');
await page.click('#login-button');
await page.waitForNavigation();
const welcomeMessage = await page.$eval('.welcome', el => el.textContent);
expect(welcomeMessage).toBe('Benvenuto, testuser!');
});page.type(selector, text): inserisce del testo in un campo input.page.click(selector): simula un clic su un elemento.page.waitForNavigation(): aspetta il caricamento della pagina successiva.page.$eval(selector, callback): estrae il testo da un elemento della pagina e lo verifica.
Screenshot e debugging
Per facilitare il debugging, possiamo catturare screenshot dei test:
test('Scatta screenshot della homepage', async () => {
await page.goto('https://example.com');
await page.screenshot({ path: 'homepage.png' });
});Se il test fallisce, possiamo analizzare lo screenshot per capire il problema.
Gestire errori e timeout
A volte le pagine possono caricarsi lentamente o contenere errori. Puppeteer permette di gestire timeout e catturare eccezioni:
test('Test con timeout personalizzato', async () => {
await page.goto('https://example.com', { timeout: 60000 });
});
Possiamo anche gestire errori con try/catch:
test('Gestione errori', async () => {
try {
await page.goto('https://example.com/non-esiste');
} catch (error) {
console.error('Errore nel caricamento della pagina:', error);
}
});Conclusioni
Abbiamo esplorato le basi del testing E2E con Puppeteer, imparando a:
- impostare un ambiente di test con Jest e Puppeteer.
- Scrivere test per verificare il caricamento delle pagine.
- Simulare interazioni dell'utente come il login.
- Utilizzare screenshot per il debugging.
- Gestire errori e timeout.
Puppeteer è uno strumento potente che ci permette di automatizzare il testing delle applicazioni web in modo rapido ed efficace. Nella prossima lezione approfondiremo tecniche avanzate di automazione.
