Chrome Headless: automatizzazione di task e testing

Chrome Headless Software Slope Test automatici e Task Quotidiani Hotel Albergo

Uno degli obiettivi principali di Slope è quello di garantire un software di altissima qualità che semplifichi il più possibile la vita degli albergatori e che al contempo sia il più possibile esente da bug e problemi

Proprio per questo motivo ogni componente di Slope è corredato dalla sua suite di test automatici che ne verificano il corretto comportamento in ogni circostanza. 

A tal proposito, in questo articolo ti illustrerò uno degli strumenti utilizzati per eseguire i test di Slope: Google Chrome Headless.

Che cos’è Chrome Headless

Secondo le statistiche elaborate da W3Schools a Luglio 2019 circa l’80% delle persone che navigano in Internet utilizza Google Chrome come browser.

Nonostante una quota di mercato così ampia solo in pochi sanno che è possibile utilizzare Google Chrome senza interfaccia grafica grazie ad una modalità chiamata “headless”. In questa modalità snellita del browser viene rimossa tutta la GUI (chiamata appunto “head”) per cui è necessario interagire con il browser tramite un API da riga di comando. 

Pur non avendo interfaccia grafica il funzionamento di Chrome rimane inalterato e quindi i file HTML, CSS e Javascript vengono elaborati esattamente dallo stesso motore di rendering (Blink) e dallo stesso motore Javascript (V8) della versione classica del browser.

A cosa serve un browser senza interfaccia grafica?

Chiaramente Chrome headless è uno strumento pensato principalmente per gli sviluppatori che possono utilizzarlo per l’automazione di compiti in cui l’interfaccia grafica sarebbe solo un impiccio.
Ad esempio alcuni casi tipici di utilizzo sono:

  • estrazione di dati da pagine web: la stessa Google utilizza Chrome headless per analizzare e indicizzare i siti web da mostrare nel proprio motore di ricerca (crawling),
  • test funzionali automatizzati: utilizzando lo stesso browser utilizzato dai visitatori dell’applicazione web è possibile verificare che l’applicazione funzioni correttamente agli occhi dell’utente finale.

Di seguito sono riportati un paio di esempi pratici di come puoi utilizzare Chrome headless per automatizzare alcuni compiti ripetitivi.

Esempi pratici

NOTA: da qui in avanti utilizzerò il comando `google-chrome` per fare riferimento alla versione di Google Chrome installata nel tuo computer. A seconda del sistema operativo che stai utilizzando potrebbe essere necessario creare un alias che punti alla tua versione di Google Chrome.

Salvare una pagina come PDF

Una delle preoccupazioni principali degli albergatori è quella di verificare le recensioni lasciate dagli utenti. Quindi piuttosto che visitare quotidianamente la pagina web con le recensioni (ad esempio di Facebook) perchè non automatizzare il tutto e risparmiarsi un po’ di click? E magari tanto che ci siamo perchè non scaricarsi l’elenco delle recensioni direttamente in PDF?

Con Chrome Headless è possibile fare tutto ciò sfruttando un unico comando da terminale:  

google-chrome –headless –print-to-pdf https://www.facebook.com/pg/slope.it/reviews/

Una volta che Google Chrome avrà finito di scaricare la pagina troverai un file PDF chiamato `output.pdf` con tutte le recensioni lasciate nella pagina Facebook.

Salvare una pagina come immagine PNG

Analogamente a quanto fatto poco fa puoi catturare lo screenshot di una pagina in formato PNG utilizzando un unico comando:
google-chrome –headless –screenshot  –window-size=1920,2600 https://www.facebook.com/pg/slope.it/reviews/

Automatizzare task con Node.js e Puppeteer

Finora abbiamo usato Google Chrome headless da terminale per eseguire dei semplici compiti tramite un singolo comando ma la vera potenza sta nell’automatizzare task molto più complessi costituiti da più passaggi.

A tal proposito ti mostrerò come è possibile scaricare automaticamente il planning del giorno di Slope dal BackOffice. 

Per fare questa operazione a mano la procedura da seguire sarebbe:

  • aprire la pagina di login backoffice.slope.it, 
  • autenticarsi inserendo username e password, 
  • clickare sulla voce del menù “planning del giorno”,
  • catturare una schermata

Più o meno immagino che un utente medio per fare tutto ciò impieghi indicativamente un minuto.

Automatizzando questa procedura con Chrome headless il tempo necessario ad eseguire lo script è stato poco meno di 4 secondi.

NOTA: Lo script riportato di seguito è stato realizzato in Node.js, sfruttando la libreria per il controllo remoto di Chrome headless chiamata Puppeteer.

Puoi scaricare questo script nel tuo PC da questo repository GitHub.

Come utilizziamo Chrome Headless su Slope

Il test di un’applicazione è uno step fondamentale nello sviluppo di software di qualità. Ad ogni nuova funzionalità aggiunta al progetto andrebbe eseguito un test globale dell’applicazione per evitare che non ci siano effetti collaterali in punti inaspettati.

Siccome testare manualmente il software è un’operazione abbastanza noiosa, per Slope è stata scritta un’intera suite di test funzionali che, sfruttando Chrome Headless, simulano il comportamento dell’utente sulla pagina web.

Come riportato in un precedente articolo del blog, ad ogni push del codice di Slope il server di Continuous Integration (CI) esegue tutta la suite di test automatici che, tra le altre cose, replicano esattamente i click che farebbe l’utente all’interno di Slope. In questo modo è possibile individuare fin da subito se è stata introdotta qualche regressione o qualche bug.

Di seguito è riportato un test reale del BackOffice il cui compito è verificare che la pagina di inserimento degli extra all’interno di un conto funzioni correttamente:

Chrome Headless Slope

NOTA: a differenza di quanto illustrato negli esempi precedenti su Slope Chrome Headless è pilotato utilizzando PHP come linguaggio di programmazione, ma i concetti alla base rimangono gli stessi dell’esempio in Node.js.


Lorenzo Millucci – Twitter @LorenzoMillu

Con il software gestionale Slope hai sempre sotto controllo ogni aspetto del tuo hotel.

Articoli consigliati