Tech Webinar: Test e2e per AngularJS e non solo
-
Upload
codemotion -
Category
Technology
-
view
200 -
download
0
Transcript of Tech Webinar: Test e2e per AngularJS e non solo
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)
0Protractor… cosa?
ovvero: dal framework di sviluppo
supereroistico nasce il framework
di test superrealistico
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
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)
Tecnicamente è un programma Node.js
Dato un file di configurazione, esegue una
o più specifiche
È anche una API che estende WebDriverJS
I test funzionali (o end-to-end)
assicurano che l’intero “sistema
software” si comporta nei modi
previsti
Nel dubbio, ricordati sempre di
confrontarti col tuo team per
decidere i requisiti e le
funzionalità importanti
Anche se non segui uno sviluppo
BDD, ricordati di strutturare i
test funzionali sul comportamento
(del sito/webapp e dell’utente)
2Selenium e WebDriver
ovvero: come ho imparato a non
preoccuparmi e ad amare ogni
browser (anche IE)
Se WebDriverAPI per guidare i browser
Se IDE & Se RCOld and deprecated
Se Server/GridServizio per impostare un parco
browser
COSA OFFRE ESATTAMENTE SELENIUM API
NAVIGAZIONEApri un URL, vai
indietro, vai avanti,
aggiorna.
INTERROGAZIONEDimmi l’URL o il titolo,
cerca uno specifico
elemento, dimmi lo stato
di certo elemento.
MANIPOLAZIONEFai 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.
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”
Any
Browser
Come funziona?
(Test)
CodeWebDriver
l’immagine è solo a scopo illustrativo
dell’utilizzo del prodotto
exports.config = {
...
seleniumAddress: 'http://host:4444/wd/hub',
...
}
Tweak Configurazione - Dove è Selenium?
Tweak Configurazione - Quale browser voglio?
exports.config = {
...
capabilities: {
browserName: 'internet explorer',
version: ‘11’,
...
}
}
Tweak Configurazione - Quali browser voglio?
exports.config = {
...
multiCapabilities: [
{
browserName: 'internet explorer'
...
},
{ … },
{ … }
]
}
exports.config = {
onPrepare: function() {
...
},
onComplete: function() {
...
},
}
Tweak Configurazione - setUp & tearDown
il file referenceConf.js su github
sia la vostra guida
link
Tweak Configurazione - all in!
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.
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’))
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)
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
Manipolazione - II
browser
.actions()
.dragAndDrop(element,
{x: 400, y: 20})
.perform();
Non specifica di Protractor, ma
derivata come altro da WebDriverJS
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”
Promise - don'ts
if(elem.getText() === ‘Hello’ ) {
...
}
Quello che stiamo facendo è il
confronto tra un oggetto promise e
una stringa
Promise - do’s
elem.getText()
.then(function(text) {
if (text === ‘Hello’ ) {
...
)
Risolvo la promise, ne ricavo il
valore, uso il valore, sono felice
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.
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(...)
ECMerge recentissimo, arriveranno le
ExpectedConditions (e saranno anche
concatenabili a suon di AND e OR)
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()
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()
...
}
Facciamo un po’ di pratica
dal vivo?
https://github.com/elleuca/codemotion-webinar-ferretti
Go Live!
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
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