Nell'universo della programmazione si può senza dubbio affermare che i test siano un grande elemento contraddittorio: hanno un altissimo valore strategico, in quanto ci permettono di tenere sotto controllo ogni parte della nostra applicazione rispetto a possibili modifiche o errori; al tempo stesso la loro scrittura incide sensibilmente sui tempi di sviluppo e per tale motivo sono spesso accantonati o svolti con superficialità, senza testare ogni singolo caso.
La letteratura conta tre diverse tipologie di test: unit test, integration test e end-to-end test. In questo script focalizzeremo la nostra attenzione sugli end-to-end test in ambito HTML, i quali puntano a emulare l'utilizzo finale dell'applicazione. Molto spesso sono svolti da persone in carne e ossa che, utilizzando il nostro prodotto, verificano la correttezza di tutte le operazioni previste; in altri casi, dove risulterebbe troppo oneroso a causa delle dimensioni del prodotto, si ricorre all'utilizzo di script che emulano la mano umana.
[Puppeteer](https://pptr.dev/) è una libreria Node che espone delle funzionalità in grado di eseguire delle operazioni all'interno del browser Chrome attraverso un canale chiamato DevTools Protocol, permettendoci di navigare, cliccare su bottoni, compilare form, o verificare lo stato della pagina attraverso degli script JavaScript.
Come tutte le librerie e framework Node, si installa partendo da una cartella correttamente inizializzata e dal comando npm per l'installazione.
npm init -y npm i puppeteer
A questo punto non resterà altro che istruire il sistema rispetto alle operazioni da eseguire. Se volessimo, ad esempio, navigare su una pagina, cliccare su un link e verificare la correttezza della navigazione, il codice sarebbe il seguente.
// ./esempio.js const puppeteer = require('puppeteer'); (async () => { // inizializzazione const browser = await puppeteer.launch(); // apertura di una pagina const page = await browser.newPage(); // navigazione await page.goto('https://miosito.com'); // click su elemento 'a' con classe 'carrello' await page.click('a.carrello') // attesa che nella pagina venga caricato un elemento 'h4' con classe 'titolo-carrello' await page.waitForSelector('h4.titolo-carrello') // recupero del titolo const name = await page.$eval('h4.titolo-carrello', el => el.innerText) console.log(name) await browser.close(); })();
Per eseguire il flusso appena creato utilizziamo il comando.
node esempio.js
La procedura appena descritta, benché semplice, può risultare molto impattate in termini di tempo: per ogni singolo test dovremmo trovare gli elementi che ci consentiranno di interagire e stabilire lo stato della pagina. Nell'esempio utilizziamo un tag a, al cui click la pagina dovrà presentare un h4 con una specifica classe.
Le tempistiche di scrittura subiscono un'ulteriore dilatazione quando la complessità del test aumenta. Per ottimizzare questa fase possiamo registrare le operazioni più comuni, come click, compilazione form, ricerche e navigazione; utilizzando [Headless Recorder](https://chrome.google.com/webstore/detail/headless-recorder/djeegiggegleadkkbgopoonhjimgehda), un'estensione di chrome, sarà possibile convertire tutte le operazioni effettuate manualmente sul browser in script puppeteer. Consentendo poi in un secondo momento di aggiungere la logica di validazione all'interno del flusso registrato.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
Come EF 8 ha ottimizzato le query che usano il metodo Contains
Gestire i null nelle reactive form tipizzate di Angular
Code scanning e advanced security con Azure DevOps
Miglioramenti nelle performance di Angular 16
Evitare (o ridurre) il repo-jacking sulle GitHub Actions
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Eseguire operazioni con timeout in React
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Utilizzare Tailwind CSS all'interno di React: installazione
I più letti di oggi
- Utilizzare WebAssembly con .NET, ovunque
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Utilizzare il trigger SQL con le Azure Function
- Ottimizzazione dei block template in Angular 17
- Disabilitare automaticamente un workflow di GitHub (parte 2)