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
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)
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
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, …)
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”
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
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(...)
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