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.