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
Eseguire operazioni con timeout in React
Generare file PDF da Blazor WebAssembly con iText
Usare le variabili per personalizzare gli stili CSS
Utilizzo di Map e Object in Javascript
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Eseguire attività con Azure Container Jobs
Load test di ASP.NET Core con k6
Organizzare il codice JavaScript utilizzando i moduli
Condividere i workflow tra più repository in GitHub
Installare le Web App site extension tramite una pipeline di Azure DevOps
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Ottimizzare la persistenza che coinvolge un solo oggetto con Entity Framework Core 7
I più letti di oggi
- .NET Conference Italia 2023 - Milano e Online
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Microsoft Visual Studio Code: un nuovo editor gratuito per Windows, MacOSX e Linux per sviluppatori ASP.NET e Node.js
- Registrare servizi multipli tramite chiavi in ASP.NET Core 8
- Chiamare direttamente un numero di telefono con HTML5