Downloaded 24 times
![Tweak Configurazione - Quali browser voglio?
exports.config = {
...
multiCapabilities: [
{
browserName: 'internet explorer'
...
},
{ … },
{ … }
]
}](https://image.slidesharecdn.com/codemotionwebinarprotractor-150204061058-conversion-gate02/85/Tech-Webinar-Test-e2e-per-AngularJS-e-non-solo-43-320.jpg)
Uploaded byCodemotion
Tech Webinar: Test e2e per AngularJS e non solo
Il documento presenta Protractor, un framework di test end-to-end per applicazioni AngularJS, evidenziando la sua importanza nel garantire il corretto funzionamento delle funzionalità attraverso test automatizzati. Viene descritto come configurarlo per utilizzare Selenium e WebDriver, nonché strategie per scrivere test efficaci e gestire le promesse. Infine, si forniscono risorse e riferimenti utili per approfondire l'argomento.
More Related Content
Similar to Tech Webinar: Test e2e per AngularJS e non solo
Tech Webinar: Test e2e per AngularJS e non solo
- 1. Protractor: test e2e perAngularJS Codemotion Tech Webinar
- 2. … e nonsolo Codemotion Tech Webinar
- 3. Hello world! Io sonoLuca 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: dalframework di sviluppo supereroistico nasce il framework di test superrealistico
- 5. Ma che èun protractor? È “er goniometro”
- 6. end-to-end test frameworkfor 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 lapresentazione AngularJS 1.2 and Beyond (giugno 2013) Versione 1.0 rilasciata a luglio 2014 Ultima versione 1.6.x (gennaio 2015)
- 8. Tecnicamente è unprogramma Node.js Dato un file di configurazione, esegue una o più specifiche È anche una API che estende WebDriverJS
- 9. Test funzionale Selenium Protractor per parlaredi 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 codicesenza test è un codice che non funziona
- 12. L’automatizzazione di task ripetitivie noiosi è sempre cosa buona e giusta
- 13.
- 14. I test funzionali(o end-to-end) assicurano che l’intero “sistema software” si comporta nei modi previsti
- 15. ovvero: essere ingrado di eseguire determinate funzioni REQUISITI
- 16. AMARA VERITÀ I TESTFUNZIONALI SONO LENTI, LENTI, LENTI
- 17. così tanto datestare e così poco tempo… da dove cominciare?
- 18. Da quale funzione monetizzoo genero valore? BUSINESS
- 19. Quali funzioni usanodi più i miei utenti? PEOPLE
- 20. Cosa si èrotto spesso in passato? HISTORY
- 21. Quali sono quellipiù usati? Quali meno? BROWSERS
- 22. Nel dubbio, ricordatisempre di confrontarti col tuo team per decidere i requisiti e le funzionalità importanti
- 23. Anche se nonsegui 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.
- 26. AUTOMAZIONE Anche se ilsuo impiego principale è nel testing, Selenium automatizza e basta
- 27. Se WebDriver API perguidare i browser Se IDE & Se RC Old and deprecated Se Server/Grid Servizio per impostare un parco browser
- 28. COSA OFFRE ESATTAMENTESELENIUM 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 Scegliereil framework più opportuno per runner/assertion/other (Cucumber, JUnit, …)
- 30.
- 31. Choose a browserto 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.
- 35. Bootstrap $ cd project $npm install protractor --save-dev
- 36. Alternate Bootstrap $ npminstall -g protractor
- 37. Configure It! $ cdproject && mkdir test/ $ touch test/protractor-conf.js
- 38. Script It! $ touchtest/spec.js
- 39. Run it! $ protractortest/protractor-conf.js
- 40.
- 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.jssu github sia la vostra guida link Tweak Configurazione - all in!
- 46. Definire la sequenzadi azioni da compiere e verificare Script
- 47.
- 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(); Sonooggetti 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 Emularele 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, arriverannole ExpectedConditions (e saranno anche concatenabili a suon di AND e OR)
- 62. USA I PAGEOBJECT, 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’ dilink 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 specialeal 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 codeside (we have cookies) potete trovarmi: @elleuca elle.uca@gmail.com