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
Utilizzare database e servizi con gli add-on di Container App
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Catturare la telemetria degli eventi di output cache in ASP.NET Core
Utilizzare i primary constructor di C# per inizializzare le proprietà
Cache policy su route groups di Minimal API in ASP.NET Core 7
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Definire lo stile CSS in base alle dimensioni del container
Utilizzare le collection expression in C#
Criptare la comunicazione con mTLS in Azure Container Apps
Determinare lo stato di un pod in Kubernetes
Utilizzare ChatGPT con Azure OpenAI
Generare file PDF da Blazor WebAssembly con iText
I più letti di oggi
- Evitare il flickering dei componenti nel prerender di Blazor 8
- Rilasciata la Beta 2 di Visual Studio 2008
- tra pochi minuti inizia la keynote della seconda giornata. seguila live su http://aspitalia.com/mix-11 #mix11
- .@dbochicchio ora su #aspnetcore 2 a #netconfit https://aspit.co/netconf-17
- Utilizzare angular-cli per creare una direttiva in Angular 2
- Windows Vista: il ritorno di WinFS con la beta1
- .@CristianCivera tra poco su #azure con i suoi tips&tricks per lo sviluppatore web: https://aspit.co/web15-live #aspilive
- Le novità di C# 10