Tech Webinar: Test e2e per AngularJS e non solo

Protractor: test

e2e per AngularJS

Codemotion Tech Webinar

… e non solo

Codemotion Tech Webinar

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

Ma che è un

protractor?

È “er goniometro”

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

Test funzionale

Selenium

Protractor

per parlare di Protractor, dobbiamo scavare nel profondo...

1Testing end-to-end

ovvero: perché sono essenziali

allo sviluppo web se eseguiti in

un vero browser

PERCHÉ TESTARE?

Un codice senza test è un

codice che non funziona

L’automatizzazione di task

ripetitivi e noiosi è sempre cosa

buona e giusta

TIPI DI TEST

(AUTOMATIZZABILI)

FunctionUnit Visual

I test funzionali (o end-to-end)

assicurano che l’intero “sistema

software” si comporta nei modi

previsti

ovvero: essere in grado di

eseguire determinate

funzioni

REQUISITI

AMARA VERITÀ

I TEST FUNZIONALI SONO LENTI,

LENTI, LENTI

così tanto da testare e così poco

tempo… da dove cominciare?

Da quale funzione

monetizzo o genero valore?

BUSINESS

Quali funzioni usano di

più i miei utenti?

PEOPLE

Cosa si è rotto spesso in

passato?

HISTORY

Quali sono quelli più

usati? Quali meno?

BROWSERS

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)

SeleniumSelenium automates browsers.

That's it!

AUTOMAZIONEAnche se il suo impiego

principale è nel testing,

Selenium automatizza e basta

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.

Do It YourselfScegliere il framework più

opportuno per

runner/assertion/other

(Cucumber, JUnit, …)

WebDriverhttps://w3c.github.

io/webdriver/webdriver-spec.

html

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

3Protractor alla riscossa

ovvero: quando il gioco si fa

duro, i duri cominciano a testare

Linguaggio

AngularJS

Setup

Bootstrap

$ cd project

$ npm install protractor --save-dev

Alternate Bootstrap

$ npm install -g protractor

Configure It!

$ cd project && mkdir test/

$ touch test/protractor-conf.js

Script It!

$ touch test/spec.js

Run it!

$ protractor test/protractor-conf.js

Regolare l’ambiente di

test

Config

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!

Definire la sequenza di

azioni da compiere e

verificare

Script

browser.get(url)

expect(this).toEqual(that)

element.doSomethingCool()

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

PromiseOgni “azione” è una promise,

coordinate da un promise

“manager”

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

Ready to goConfig + Script

4Strategie per sopravvivere

ovvero: controlla il codice prima

che il codice controlli te

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

Thanks!join the code side

(we have cookies)

potete trovarmi:

@elleuca

[email protected]