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
Implementare il throttling in ASP.NET Core
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Effettuare il binding di date in Blazor
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Utilizzare politiche di resiliency con Azure Container App
Usare una container image come runner di GitHub Actions
Usare il versioning con i controller di ASP.NET Core Web API
Miglioramenti nell'accessibilità con Angular CDK
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Routing statico e PreRendering in una Blazor Web App
Sfruttare lo streaming di una chiamata Http da Blazor
Usare le collection expression per inizializzare una lista di oggetti in C#
I più letti di oggi
- Cambiare la chiave di partizionamento di Azure Cosmos DB
- ASP.NET 2.0 per tutti
- Definire stili a livello di libreria in Angular
- Utilizzare il trigger SQL con le Azure Function
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- .NET Conference Italia 2023 - Milano e Online
- Come EF 8 ha ottimizzato le query che usano il metodo Contains
- Ottimizzazione dei block template in Angular 17