Frontend testing tips

Eseguire test funzionali con Protractor e Angular-cli: le basi per iniziare

Il test funzionale detto anche E2E (end to end) consiste nel verificare la funzionalità completa di un’applicazione. Al contrario di quello unitario che si prefigge il test di funzionalità atomiche, il test E2E ha come obiettivo verificare che tutte funzionalità lavorino correttamente assieme.

Lo strumento principale utilizzato con Angular è Protractor, un framework di test E2E che viene integrato in applicazioni generate con Angular cli.

Questa è una guida introduttiva per un quick setup, che ci porterà alla scrittura del primo test che approfondiremo in articoli successivi.

Note

Questo articolo fa parte di una serie di pubblicazioni che ha come obiettivo conoscere ed approfondire con alcuni casi concreti riscontrati nello sviluppo quotidiano il testing funzionale di applicazioni Angular 2 eseguito tramite Protractor.

Repository di riferimento

Un esempio funzionante del progetto angular base su cui  girano i test di cui parleremo è reperibile presso: https://github.com/mzuccaroli/angular-cli-tests-example, si tratta di un semplice progetto angular2 generato con angular CLI col comando “ng new”. Per maggiori informazioni vedere il quickstart di un progetto angular2.

Test funzionali o E2E

I test E2E sono progettati per garantire che l’applicazione si comporti come previsto dal punto di vista dell’utente, inoltre, i test non riguardano l’effettiva implementazione del codice ma solo la sua funzionalità. Nel contesto di applicazioni web, come quelle realizzate con Angular, questo significa dover interagire in maniera automatica con browser, click, touch e tempi di caricamento.

frontend testing tipsSi tratta di un testing di alto livello, di una granularità del tutto diversa di quello tipico del TDD, per sua natura più lento e difficile da scrivere di quello unitario; è normale quindi avere una quantità contenuta di test funzionali a fronte di un alto numero di test unitari.

Solitamente i test e2e rispecchiano i test fatti “manualmente” per verificare il corretto funzionamento di interi flussi di un’applicazione e, nel contesto dello sviluppo frontend, sono uno strumento essenziale per garantire il funzionamento cross-browser e cross-platform, ci danno la possibilità di verificare in maniera automatica che la nostra applicazione funzioni sui browser che abbiamo scelto di supportare.

Un esempio tipico di test E2E può essere rappresentato dal flusso di registrazione utente: partendo dall’homepage si clicca sul bottone “registrati” si compila il form, si esegue la validazione dei dati inseriti, si esegue il submit del form e magari successivamente si verifica che l’utente appena registrato riesca ad eseguire il login.

 

Protractor


Protractor è framework di test E2E che consente di testare applicazioni frontend su un browser reale simulando le interazioni nel modo in cui un utente reale si comporterebbe con esso.

Protractor Logo

Protractor gira su Selenium WebDriver, che è un’API per l’automazione e testing su browser, al quale aggiunge funzionalità per interagire con i componenti UI di un’applicazione Angular.

 

Quickstart con Protractor e Angular CLI

Angular CLI fornisce in maniera predefinita due framework per il testing:

  • testing unitario basato su Jasmine e Karma
  • testing E2E basato su Protractor

Abbiamo già parlato in un altro articolo del test unitario con Angular CLI e di come questo sia integrato.

 

L’applicazione base viene fornita con un test di esempio già pronto e per eseguirlo è sufficiente eseguire il comando:

$ ng e2e

Tutti i test con estensione ‘.e2e-spec.ts’ presenti nella cartella e2e situata nella root del nostro progetto saranno eseguiti in sequenza.

Nella console vedremo un risultato del genere:

** NG Live Development Server is listening on localhost:49152, open your browser on http://localhost:49152/ **
Date: 2018-06-14T08:37:09.680Z
Hash: 7178076d4c3f42891352
Time: 9436ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 2.31 MB {inline} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 221 kB {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.3 kB {inline} [initial] [rendered]

webpack: Compiled successfully.
[10:37:11] I/update - chromedriver: unzipping chromedriver_2.40.zip
[10:37:11] I/update - chromedriver: setting permissions to 0755 for /Users/myuser/workspace/angular-cli-single-tests-example/node_modules/protractor/node_modules/webdriver-manager/selenium/chromedriver_2.40
[10:37:11] I/launcher - Running 1 instances of WebDriver
[10:37:11] I/direct - Using ChromeDriver directly...
Jasmine started

 angular-cli-single-tests-example App
   ✓ should display welcome message

Executed 1 of 1 spec SUCCESS in 0.595 sec.
[10:37:14] I/launcher - 0 instance(s) of WebDriver still running
[10:37:14] I/launcher - chrome #01 passed

Potremo notare che un’istanza di chrome verrà velocemente aperta e richiusa, si tratta del browser reale con cui Protractor e a sua volta Selenium interagiscono:

Protractor browser

Vedremo dettagliatamente in seguito tutti i test che vengono eseguiti sul nostro codice di riferimento.

 

Quickstart senza Angular CLI

Per installare Protractor senza basarsi su Angular CLI seguire la seguente procedura,

lanciare il comando

$ npm install -g protractor

Configurare il server Selenium: sarà necessario creare un file con le configurazioni necessarie per far girare i test come timeout, directory dei sorgenti ecc..

Creiamo quindi il file tests.conf.js.

exports.config = {  
   seleniumAddress: 'http://localhost:4444/wd/hub',  
   getPageTimeout: 60000,  
   allScriptsTimeout: 500000,  
     
   specs: ['*.e2e-spec.js'],  
 
   suites: {  
       suite1: 'spec/suite1/*.e2e-spec.js',  
       suite2: 'spec/suite2/*.e2e-spec.js'  
   }, 
 
   baseURL: 'http://localhost:8080/',  
   framework: 'jasmine',  
};

Lanciare il server Selenium: in un altro terminale aggiorniamo e lanciamo il server Selenium ci cui avremo bisogno per far girare protractor:

$ webdriver-manager update  
$ webdriver-manager start

A questo punto sarà possibile eseguire i nostri test lanciando il comando:

$ protractor tests.conf.js

Primo test di esempio

Un primo test di esempio ridotto al minimo è quello che segue:

import {browser, by, element} from 'protractor';

describe('angular-cli-single-tests-example App', () => {

   it('should display welcome message', () => {
       browser.get('/');
       expect(element(by.css('app-root h1')).getText()).toEqual('Welcome to app!');
   });

});

sarà sufficiente inserire questo codice nel file ‘basicExample.e2e-spec.ts’ nella cartella e2e e lanciare il comando per eseguire il test:

$ ng e2e --specs=e2e/basicExample.e2e-spec.ts

Chi ha già confidenza con i test unitari e jasmine non farà fatica a scrivere test del genere, molto semplicemente all’avvio del test verrà caricata la pagina principale della nostra applicazione (  ‘/ ‘) nel browser di riferimento e verrà verificata la presenza del contenuto testuale ‘Welcome to app!’ nell’elemento identificato dal selettore css ‘app-root h1’.

Si tratta naturalmente di un test di esempio utile comunque a prendere confidenza con l’ambiente protractor e Angular CLI, ci sono molte metodologie per fare test più approfonditi che vedremo in seguito.

Da notare come al contrario dei test unitari eseguiti con Karma (abbiamo parlato di questo inconveniente in questo articolo ) è possibile eseguire un test specifico specificando il parametro ‘–spec’:

$ ng e2e --specs=path/to/myTest.ts

mentre con

$ ng e2e

verranno eseguiti tutti i test presenti nella cartella e2e.

0 commenti

Lascia un Commento

Vuoi partecipare alla discussione?
Fornisci il tuo contributo!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *