Luca Ferretti illustra Protractor: il framework JavaScript indispensabile alla realizzazione di completi test e2e per web app AngularJS (e non solo). Iscriviti qui per partecipare ad altri Tech Webinar gratuiti: http://goo.gl/iW81VD Scrivici a: training@codemotion.it Tw: http://twitter.com/CodemotionTR

1. Protractor: test
e2e per AngularJS
Codemotion Tech Webinar

2. … e non solo
Codemotion Tech Webinar

3. Hello world!
Io sono Luca Ferretti
Sono qui perché tutti i giorni
mi pagano per rompere siti, con
dedizione, metodo e disciplina
Nel tempo libero provo a rompere
anche ambienti desktop e
applicazioni OpenSource
Potete trovarmi su internet come
elle.uca (o elleuca … non tutti
amano il punto nell’username)

4. 0
Protractor… cosa?
ovvero: dal framework di sviluppo
supereroistico nasce il framework
di test superrealistico

5. Ma che è un
protractor?
È “er goniometro”

6. end-to-end test framework for AngularJS
applications
runs tests against your application
running in a real browser, interacting
with it as a user would
da http://protractortest.org

7. Introdotto durante la presentazione
AngularJS 1.2 and Beyond (giugno 2013)
Versione 1.0 rilasciata a luglio 2014
Ultima versione 1.6.x (gennaio 2015)

8. Tecnicamente è un programma Node.js
Dato un file di configurazione, esegue una
o più specifiche
È anche una API che estende WebDriverJS

9. Test funzionale
Selenium
Protractor
per parlare di Protractor, dobbiamo scavare nel profondo...

10. 1
Testing end-to-end
ovvero: perché sono essenziali
allo sviluppo web se eseguiti in
un vero browser

11. PERCHÉ TESTARE?
Un codice senza test è un
codice che non funziona

12. L’automatizzazione di task
ripetitivi e noiosi è sempre cosa
buona e giusta

13. TIPI DI TEST
(AUTOMATIZZABILI)
FunctionUnit Visual

14. I test funzionali (o end-to-end)
assicurano che l’intero “sistema
software” si comporta nei modi
previsti

15. ovvero: essere in grado di
eseguire determinate
funzioni
REQUISITI

16. AMARA VERITÀ
I TEST FUNZIONALI SONO LENTI,
LENTI, LENTI

17. così tanto da testare e così poco
tempo… da dove cominciare?

18. Da quale funzione
monetizzo o genero valore?
BUSINESS

19. Quali funzioni usano di
più i miei utenti?
PEOPLE

20. Cosa si è rotto spesso in
passato?
HISTORY

21. Quali sono quelli più
usati? Quali meno?
BROWSERS

22. Nel dubbio, ricordati sempre di
confrontarti col tuo team per
decidere i requisiti e le
funzionalità importanti

23. Anche se non segui uno sviluppo
BDD, ricordati di strutturare i
test funzionali sul comportamento
(del sito/webapp e dell’utente)

24. 2
Selenium e WebDriver
ovvero: come ho imparato a non
preoccuparmi e ad amare ogni
browser (anche IE)

25. Selenium
Selenium automates browsers.
That's it!

26. AUTOMAZIONE
Anche se il suo impiego
principale è nel testing,
Selenium automatizza e basta

27. Se WebDriver
API per guidare i browser
Se IDE & Se RC
Old and deprecated
Se Server/Grid
Servizio per impostare un parco
browser

28. COSA OFFRE ESATTAMENTE SELENIUM API
NAVIGAZIONE
Apri un URL, vai
indietro, vai avanti,
aggiorna.
INTERROGAZIONE
Dimmi l’URL o il titolo,
cerca uno specifico
elemento, dimmi lo stato
di certo elemento.
MANIPOLAZIONE
Fai clic, digita del
testo, trascina.
SINCRONIZZAZIONE
Aspetta a interrogare o a
manipolare la pagina fino
a che non è verificata una
certa condizione.
Varie & Eventuali
Alert, iframe, cookie,
javascript, html5, ...
Browser Caps
Usa un browser locale o
remoto con determinate
capability.

29. Do It Yourself
Scegliere il framework più
opportuno per
runner/assertion/other
(Cucumber, JUnit, …)

30. WebDriver
https://w3c.github.
io/webdriver/webdriver-spec.
html

31. Choose a browser to start
“interface's
invocations and
responses that are
to be used by
browser vendors to
ensure
interoperability”
W3C WebDriver vs Se WebDriver
“this specification is strongly based on an existing
Open Source project, Selenium WebDriver”

32. Any
Browser
Come funziona?
(Test)
Code
WebDriver
l’immagine è solo a scopo illustrativo
dell’utilizzo del prodotto

33. 3
Protractor alla riscossa
ovvero: quando il gioco si fa
duro, i duri cominciano a testare

34. Linguaggio
AngularJS
Setup

35. Bootstrap
$ cd project
$ npm install protractor --save-dev

36. Alternate Bootstrap
$ npm install -g protractor

37. Configure It!
$ cd project && mkdir test/
$ touch test/protractor-conf.js

38. Script It!
$ touch test/spec.js

39. Run it!
$ protractor test/protractor-conf.js

40. Regolare l’ambiente di
test
Config

41. exports.config = {
...
seleniumAddress: 'http://host:4444/wd/hub',
...
}
Tweak Configurazione - Dove è Selenium?

42. Tweak Configurazione - Quale browser voglio?
exports.config = {
...
capabilities: {
browserName: 'internet explorer',
version: ‘11’,
...
}
}

43. Tweak Configurazione - Quali browser voglio?
exports.config = {
...
multiCapabilities: [
{
browserName: 'internet explorer'
...
},
{ … },
{ … }
]
}

44. exports.config = {
onPrepare: function() {
...
},
onComplete: function() {
...
},
}
Tweak Configurazione - setUp & tearDown

45. il file referenceConf.js su github
sia la vostra guida
link
Tweak Configurazione - all in!

46. Definire la sequenza di
azioni da compiere e
verificare
Script

47. browser
.get(url)
expect
(this).toEqual(that)
element
.doSomethingCool()

48. Interrogazione - elementi
▪ element(by.locator)
▪ element(…).element(by.locator)
▪ element.all(by.locator)
In realtà sono degli ElementFinder
(ElementArrayFinder) per i
WebElement di WebDriver, la
conversione è trasparente.

49. Interrogazione - locator
▪ binding, model, repeater …
▪ id, css, tagName …
I locator più classici sono estesi
da locator specifici per AngularJS.
Funzionano per strategia + target
es: element(by.id(‘login-psw’))

50. Interrogazione - stati
▪ getQualcosa()
▪ isUncertoStato()
Attributi, posizioni, presenza,
visibilità e altro.
In pratica tutto quello che sa il
browser di un certo elemento del
DOM (notare: il browser)

51. Manipolazione - I
▪ el1.click()
▪ el2.clear().sendKeys(‘abc’)
▪ form.submit()
Asincrone + fluent (ove possibile),
si limitano alle azioni base che si
può eseguire su un elemento.
Non fidatevi del sendKeys() :P

52. Manipolazione - II
browser
.actions()
.dragAndDrop(element,
{x: 400, y: 20})
.perform();
Non specifica di Protractor, ma
derivata come altro da WebDriverJS

53. Promise
Ogni “azione” è una promise,
coordinate da un promise
“manager”

54. Promise - how
browser.get(url);
element.clear();
element.sendKeys();
element1.click();
Sono oggetti promise non risolte;
pianificate, non eseguite, nel
control flow. API volutamente
“snella”

55. Promise - don'ts
if(elem.getText() === ‘Hello’ ) {
...
}
Quello che stiamo facendo è il
confronto tra un oggetto promise e
una stringa

56. Promise - do’s
elem.getText()
.then(function(text) {
if (text === ‘Hello’ ) {
...
)
Risolvo la promise, ne ricavo il
valore, uso il valore, sono felice

57. Ready to go
Config + Script

58. 4
Strategie per sopravvivere
ovvero: controlla il codice prima
che il codice controlli te

59. QUESTO NON È UN FRAMEWORK PER UNIT TEST
Usa i test
funzionali per
codificare le user
story, mantienili
semplici da leggere,
verifica solo gli
“happy path”.
Mantienili
aggiornati o muori.

60. TIMEOUT E SINCRONIZZAZIONE
Emulare le azioni di
un utente non vuol
dire farle alla
stessa velocità.
Prima di interagire
con un elemento
accertati che sia
nello stato in cui
dovrebbe essere.
select1.click()
select1.option1.click()
select2.click()
browser.wait(...).then(...)

61. EC
Merge recentissimo, arriveranno le
ExpectedConditions (e saranno anche
concatenabili a suon di AND e OR)

62. USA I PAGE OBJECT, GIOVANE PADAWAN
Crea degli oggetti
che interagiscano
con gli “elementi”
della pagina, usa i
loro metodi nei file
spec.
var Login = function() {
this.user = element(...);
this.pwd = element(...);
this.btn = element(...);
this.do = function(){...}
};
module.exports = Login;
-----
var lg = new Login();
login.do();
expect(hp.isIn()).toBeTruty()

63. TELL DON’T ASK, SE SEI UN JEDI
Se hai creato un
page object, lascia
che tutta la logica
sia nel page object.
Gli expect nella
spec possono essere
sostituiti da errori
gestiti nel page
object.
homepage.load()
homepage.doLogin()
-----
this.doLogin = function() {
...
login.do();
// start checks here
this.userMenu.isPresent()
this.userMenu.isDisplayed()
...
}

64. Facciamo un po’ di pratica
dal vivo?
https://github.com/elleuca/codemotion-webinar-ferretti
Go Live!

65. RIFERIMENTI
Un po’ di link sparsi con risorse importanti da
approfondire:
▪ https://code.google.com/p/selenium/wiki/WebDriverJs
▪ https://github.
com/angular/protractor/blob/master/docs/referenceConf.
js
▪ http://angular.github.io/protractor/#/api
▪ https://code.google.
com/p/selenium/wiki/InternetExplorerDriver
▪ http://martinfowler.com/bliki/PageObject.html
▪ http://martinfowler.com/bliki/TellDontAsk.html
e mi raccomando, non credete mai troppo a quello che
trovate scritto su Internet

66. CREDITS
Un grazie speciale al team di Codemotion e Codemotion
Training
Un dovuto riconoscimento a
▪ Busy Icons di Olly Holovchenko
▪ Il template di SlidesCarnival
▪ Le fotografie di Dean Hochman
▪ The Internet Chuck Norris Database

67. Thanks!
join the code side
(we have cookies)
potete trovarmi:
@elleuca
elle.uca@gmail.com