Nel panorama dello sviluppo con JavaScript per il Web, bisogna oggi considerare sia una molteplicità di framework (jQuery, Backbone o Underscore, giusto per citarne alcuni), sia il moltiplicarsi browser e tutte le relative versioni di questi ultimi.
Quindi permane il problema di sempre, quello di testare il buon funzionamento delle nostre applicazioni su tutti i browser, anche quelli un poì datati.
Possiamo pensare di effettuare test su tutti browser utilizzando macchine virtuali (cosa che ci permette di fare il sito Modern IE per quanto riguarda Internet Explorer). Oltre a questo possiamo servirci di strumenti come BrowserSwarm nato dalla collaborazione di appendTo, Sauce Labs e il team di Internet Explorer.
BrowserSwarm permette di testare il codice dei nostri progetti sfruttando il sistema cloud realizzato da Sauce Labs, che permette di gestire in automatico il testing su tutti gli engine e tutte le versioni dei browser, fornendo anche il supporto di framework come QUnit.
Sfruttando l'integrazione con i repository su Github, il sistema monitora costantemente i fix introdotti: per ogni singolo commit partono nuovi test e, senza dover fare niente, una volta configurato BrowserSwarm testa di volta in volta la nostra codebase in totale autonomia.
Come funziona BrowserSwarm
Gli step da seguire per iniziare sono: l'iscrizione al servizio, il collegamento con Github e l'iscrizione su SauceLabs. Fatto questo potremo aggiungere un progetto di prova e creare il "job" di BrowserSwarm per il nostro progetto.
Iniziamo con l'inserimento del progetto per poi esaminare più a fondo la schermata di configurazione del singolo progetto, per effettuare le personalizzazioni.
Iscrizione e Configurazione
Per l'iscrizione al servizio, dalla home page di BrowserSwarm, clicchiamo su "Add Your Project". Dopo aver inserito email e password basterà confermare: saremo dentro e la schermata che ci accoglierà sarà la seguente:
Effettuato il primo login, possiamo collegare Github. Cliccando su "Link Github Account" verremo automaticamente rimandati su Github, nella pagina di autorizzazione dell'applicazione. Qui viene spiegato quali permessi servono.
Clicchiamo su "Allow Access", inseriamo la nostra password Github (se richiesto) e confermiamo. Verremo quindi rimandati sulla nostra Dashboard, dove ad accoglierci troveremo (eventualmente) l'elenco dei nostri progetti, pronti per essere testati a dovere.
Come prima prova useremo un progetto già esistente, per semplificarci la vita: come suggerito anche altrove, prenderemo un fork di underscore .
A questo punto creiamo un account su https://saucelabs.com/home (SauceLabs). Proprio su SauceLabs, infatti, si trova il sistema di testing su cloud che dobbiamo interfacciare con BrowserSwarm.
La registrazione è semplice e possiamo optare per un account "Free", che ci consente di usufruire di 200 minuti gratis di testing. Una volta effettuata la registrazione, clicchiamo sul nostro username (in alto a destra), quindi su "Account".
Nota: In basso a sinistra c'è la nostra Access Key, che useremo molto presto.
Torniamo ora su BrowserSwarm e clicchiamo su Dashboard: selezioniamo "Add a Repo" per scegliere il nostro primo progetto da testare.
Selezionare un progetto su BrowserSwarm.
Anche se abbiamo integrato Github, per il primo test è conveniente fare un'aggiunta manuale, per capire al meglio tutto il meccanismo. Clicchiamo quindi su "Manual Add". Nella casella di testo specifichiamo l'indirizzo del repository su Github: nel mio caso (dal fork fatto prima):
https://github.com/francescomalatesta/underscoreA questo punto, proseguendo, troveremo tre campi di testo, che contengono webhook e deploy key. Il contenuto del primo va tra i Service Hooks del repository (ci si accede da Github attraverso "Settings" a destra nella schermata del repo). Gli altri due campi compongono la deploy key. Troviamo elencati gli hooks e le "Deploy Keys"cliccando su "Settings".
Una volta sistemate queste chiavi e creato il test, torniamo alla Dashboard.
L'ingranaggio in corrispondenza del test gira, ma in realtà questo non è ancora attivo: dobbiamo specificare le credenziali per la connessione a SauceLabs, aggiungere uno script necessario allo start e indicare a BrowserSwarm l'ubicazione dei test da effettuare.
Cominciamo dall'impostazione della connessione con SauceLabs. Clicchiamo sulla chiave inglese in corrispondenza del nostro job, dalla pagina dashboard: selezioniamo "Sauce Config" e specifichiamo nelle due caselle di testo il nostro username (su SauceLabs, non su BrowserSwarm) e la nostra access key.
Scendiamo giù e scegliamo qualche browser su cui effettuare i test: nel mio caso ho scelto, sotto Windows 2012, Internet Explorer 10, Chrome (ultima versione) e Mozilla Firefox 21. Come prima prova è sufficiente.
Torniamo in alto e clicchiamo su "Save".
Passiamo quindi a "Custom Scripts" ed inseriamo questa stringa in corrispondenza di Prepare:
sed -i.bak 's/phantomjs/true/' package.json && sed -i.bak 's/coffee/true/' package.json && cat package.json && echo "POLYFILLED PHANTOM"Infine possiamo configurare QUnit selezionando "QUnit Config". I valori da inserire qui saranno:
- il path di riferimento del progetto (in questo caso
/, perchè lavoriamo dalla root folder); - il nome del file di test (
test/index.html, per la precisione). Clicchiamo su "Save".
Ora ci siamo davvero: è arrivato il momento di avviare il test!
Il primo test
Ora che è tutto pronto ed opportunamente configurato, il test partirà automaticamente. Basterà tenere sottocontrollo la dashboard, che riporterà gli esiti dei vari test e gli eventuali errori.
Leggere i risultati di un test è molto semplice: prendiamo come esempio quelli proposti dal sito, già effettuati per Underscore e visibili da tutti.
Un'immagine piuttosto esplicativa della potenza di BrowserSwarm: in una sola tabella tutti i risultati di tutti i test effettuati. I segni di spunta permettono di capire velocemente dove e cosa è andato storto, per garantire la massima semplicità di interpretazione.
La cosa non si ferma qui, ovviamente: cliccando in corrispondenza dei singoli test, sulla colonna a sinistra, si potranno esplorare tutti i dettagli dei singoli job. Prendiamo come esempio il terzo test, che restituisce un errore in corrispondeza di Firefox 19 (639/640).
Anche qui la schermata è di semplice lettura: tutti gli errori che si sono verificati vengono mostrati nella finestra "Error Output". Per avere tutte le informazioni sull'esecuzione del singolo Job, invece, si potrà ricorrere alla finestra "Full Job Output".
Conclusioni
In conclusione, BrowserSwarm ha un sacco di potenziale. Si tratta di un prodotto ancora in beta, che per ora però si è rivelato utile e facilmente configurabile. Ottimo il livello di assistenza: contattando il team degli sviluppatori tramite twitter (@browserswarm), la risposta è quasi immediata. Da non sottovalutare.
