Avendo la necessità di testare un’applicazione implementata con Sencha Ext JS Carlo Mandelli ha provato ad utilizzare Sencha Test e Sencha Studio, protagonisti di questo articolo e del numero di Febbraio della rubrica Cosa abbiamo imparato?
Testare un’interfaccia utente Web
Esistono molti tools che permettono di implementare ed automatizzare i test, ognuno con le sue particolarità.
Alcune delle caratteristiche da tenere in considerazione riguardano la possibilità di:
- Velocizzare la scrittura di test registrando le operazioni che l’utente effettua sull’interfaccia per poi trasformare la registrazione in passi dei test.
- Organizzare i test in uno spazio organizzato, un workspace.
- Eseguire i test da riga di comando ovvero anche integrati in sistemi automatici.
- Archiviare i risultati dei test per recuperarli successivamente.
- Effettuare i test su sistemi operativi e browser differenti.
- Valutare un test non solamente con i metodi tradizionali basati sui dati recuperati nel DOM ma, ad esempio, anche confrontando degli screenshot della situazione desiderata e attuale.
- Scrivere il codice dei test con un linguaggio non troppo complesso e se possibile integrato con l’eventuale framework utilizzato per realizzare l’applicazione web.
Ext JS e Sencha Test
Sencha Test è la soluzione di test end-to-end più completa per Ext JS, incluso il supporto per i test end-to-end di applicazioni sviluppate in ExtAngular, Angular, ExtReact e React.
Una volta installato Sencha Test, Sencha Studio è l’interfaccia utente grafica che consente di scrivere test Jasmine in un editor di test Sencha integrato.
Brevemente, Jasmine è un framework open-source per il test di applicazioni Javascript.
Sencha Test
Integrazioni a parte, in pratica qualsiasi applicazione web può essere testata con questa soluzione.
E’ possibile scrivere i test in Jasmine e organizzarli in scenari e folder che aiutano nel tenere sotto controllo le funzionalità coperte dai test.
Uno dei principali problemi nella scrittura di questo tipo di test è quello di identificare gli elementi nel DOM in quanto la generazione automatica dell’HTML e il riutilizzo di elementi nella pagina può renderne difficile l’identificazione univoca.
I test possono essere scritti a mano dall’utente oppure è possibile registrare direttamente sulla pagina web i passi da eseguire.
Questa funzionalità, anche se molto attraente, non restituisce sempre i risultati attesi in termini di pulizia del codice generato o di identificazione degli elementi sulla pagina, cosa che rende impraticabile la riproduzione del test.
Esiste però il plugin Sencha Component Locator che permette, selezionato un elemento Ext JS nella pagina web, di sapere in che modo quell’elemento può essere identificato e quindi facilita la scrittura del test.
I browser su cui testare l’applicazione possono essere quelli installati sulla macchina client oppure, sfruttando il framework Selenium, installare dei WebDriver per allargare la rosa di browser.
Sencha Test e Selenium
Selenium è una suite open source per automatizzazione dei test per applicazioni web su diversi browser e piattaforme (Windows, Linux, macOS).
E’ composto da quattro componenti:
- Selenium Integrated Development Environment (IDE)
- Selenium Remote Control (RC)
- WebDriver
- Selenium Grid
Selenium WebDriver è una raccolta di API open source che vengono utilizzate per automatizzare il test di un’applicazione web.
Viene utilizzato per automatizzare i test per verificare che funzionino come previsto. Supporta differenti browser come Firefox, Chrome, IE e Safari.
Come funziona
Una volta avviato Selenium con i relativi WebDriver è possibile censirli all’interno di Sencha Test rendendo così più facile la selezione dell’ambiente di test.
Con l’installazione di Sencha Test si ha anche a disposizione un’applicazione che permette di eseguire i test presenti in un progetto direttamente da riga di comando.
Questo consente di integrare i test all’interno di un sistema che ne automatizzi l’esecuzione.
I risultati dell’esecuzione possono essere inviati all’archive server integrato in Sencha Test o ad uno esterno.
Sencha Test si può collegare a questo server per mostrare i risultati dei test con il dettaglio di eventuali fallimenti.
La possibilità di acquisire in maniera automatica degli screenshot durante i test permette di dichiarare un’immagine come corretta e di confrontarla con quella dei successivi test.
Il test viene dichiarato fallito nel momento in cui le immagini si differenziano rispetto a dei parametri di tolleranza stabiliti.
Ciò permette di verificare il funzionamento dell’applicazione per quelle sezioni in cui non sono presenti elementi con valori confrontabili in maniera tradizionale come numeri e testo.
Sencha Test permette, per i test falliti, un confronto delle immagini evidenziandone le difformità.
Integra Istanbul per poter mostrare la code coverage in maniera automatica.
Infine, dai risultati dei test archiviati, è possibile creare direttamente dei bug su Jira.
Nella galleria di immagini seguente è possibile vedere screenshot di un progetto di test sulla UI del sito aziendale.
Conclusioni
Con le applicazioni Sencha Test e Sencha Studio si riesce a raggruppare in unico ambiente e interfaccia tutto quello che serve per poter implementare, eseguire ed analizzare i test su un’interfaccia web.
Inoltre il fatto di scrivere i test in Jasmine, la possibilità di utilizzare Selenium per virtualizzate gli ambienti su cui eseguirli e le funzionalità da riga di comando consentono di poter trasportare il lavoro fatto anche su altri sistemi senza essere legati al prodotto.