Your SlideShare is downloading. ×
0
April 2014 / v0.21.0
Introduction to Protractor
Florian Fesseler
RIA Architect
✉ffesseler@kapit.fr
☏ @ffesseler
2
Agenda
• What is Protractor
• Testing Quandrants
• Selenium/WebDriver
• Comparison with existing
tools
• Test Automation...
3
Protractor
… “is an end to end test framework for AngularJS applications built on top of WebDriverJS.
Protractor runs te...
4
Testing Quadrants
5
Testing Quadrants
Protractor
6
End To End Testing
Testing Vocabulary
Functional
testing
Web
Integration
testing
Customer
testing
Acceptance
testing
GUI...
7
• Test all layers of the application
• Simulate user interactions
• Functional Testing for webapp => Automating browsers...
8
Automating browsers
Selenium WebDriver
Tests Scripts
9
Automating browsers : WebDriver API
Selenium WebDriver
WebDriver API
Remote/Local
Selenium Server
JSON Wire
Protocol
10
Automating browsers : WebDriver API Bindings
Selenium WebDriver
WebDriver API
Bindings
Remote/Local
Selenium Server
JSO...
11
Automating browsers : WebDriverJS
Selenium WebDriver
WebDriver API
Bindings
Remote/Local
Selenium Server
JSON Wire
Prot...
12
Automating browsers : Browsers implementations
Selenium WebDriver
WebDriver API
Bindings
Remote/Local
Selenium Server
J...
13
• Built on top of WebDriverJS
• Add AngularJS integration
• Waits for AngularJS to be bootstrapped
• Listen to AngularJ...
14
• Ng-scenario
• First e2e framework for AngularJS
• Deprecated probably because
• JS Sandbox limitations
• Other limita...
15
Protractor Usage
16
• Install protractor npm module
• Add a config file
• Add some tests
• Update selenium server + Browser Driver
• Launch...
17
• API
• 3 globals :
• browser : browser navigation methods + WebDriverJS wrapped (browser.driver)
• element : find & in...
18
• With grunt
• Get/Update selenium webdriver
• Npm install grunt-shell
• Launching selenium webdriver :
• npm install g...
19
• Doesn’t handle manual angular bootstrap
• Take care of how you do polling
• Take care of the browser support (not tie...
20
Functional Test architecture
21
Testing Pyramid
• High quality comes from a strategy
that combines unit testing,
integration testing and functional
tes...
22
Ice cream cone anti-pattern
23
Functional tests limitations
• Fragile
• Coupled to the UI (or Model)
• -> Need to
• Isolate changes
• Decouple interfa...
24
Application Driver
Tests
Application Driver
Selenium
Browser
25
Application Driver
• Put complexity in an application driver
• Isolate changes
• Ease manipulation for the QA team
• DS...
26
Conclusion
27
Conclusion
• Can use it as of today 
• Don’t invest anymore on ng-scenario
• Docs & debugging tools are getting better...
28
Summary
• Protactor is a tool to do functional testing for your angularjs app
• Based on Selenium Webdriver
• Provide A...
29
Other talks
• What I learned from 2 large AngularJS apps
• How to « deploy » AngularJS inside your orgnaization
• Every...
Thanks !
• Florian Fesseler
• Architecte RIA
✉ffesseler@kapit.fr
☏ @ffesseler
31
• Services et logiciels RIA depuis 2005
• 50 experts et 4 pôles dédiés aux RIA :
• Méthodologie et Assurance Qualité
• ...
32
Une offre complète pour les applications métiers
Audit et Conseil
• Méthodologie et organisation
• Architecture et déve...
33
Ergonomie
4 pôles d'expertise pour produire des RIA innovantes de haute qualité
Méthodologie Agile
Industrialisation
Te...
Upcoming SlideShare
Loading in...5
×

Introduction to Protractor

4,841

Published on

What is Protractor ?
How To Use It ?
Test Automation Architecture

Published in: Technology
0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,841
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
105
Comments
0
Likes
18
Embeds 0
No embeds

No notes for slide

Transcript of "Introduction to Protractor"

  1. 1. April 2014 / v0.21.0 Introduction to Protractor Florian Fesseler RIA Architect ✉ffesseler@kapit.fr ☏ @ffesseler
  2. 2. 2 Agenda • What is Protractor • Testing Quandrants • Selenium/WebDriver • Comparison with existing tools • Test Automation Architecture • Code Vs View Based • What to test • How to organize tests • How to use it • Installation • Usage/API • Debugging • Build/CI Integration
  3. 3. 3 Protractor … “is an end to end test framework for AngularJS applications built on top of WebDriverJS. Protractor runs tests against your application running in a real browser, interacting with it as a user would.”
  4. 4. 4 Testing Quadrants
  5. 5. 5 Testing Quadrants Protractor
  6. 6. 6 End To End Testing Testing Vocabulary Functional testing Web Integration testing Customer testing Acceptance testing GUI Testing
  7. 7. 7 • Test all layers of the application • Simulate user interactions • Functional Testing for webapp => Automating browsers Functional Testing
  8. 8. 8 Automating browsers Selenium WebDriver Tests Scripts
  9. 9. 9 Automating browsers : WebDriver API Selenium WebDriver WebDriver API Remote/Local Selenium Server JSON Wire Protocol
  10. 10. 10 Automating browsers : WebDriver API Bindings Selenium WebDriver WebDriver API Bindings Remote/Local Selenium Server JSON Wire Protocol Java Ruby node.js PHP Python …
  11. 11. 11 Automating browsers : WebDriverJS Selenium WebDriver WebDriver API Bindings Remote/Local Selenium Server JSON Wire Protocol Java Ruby node.js PHP Python … (WebDriverJS)
  12. 12. 12 Automating browsers : Browsers implementations Selenium WebDriver WebDriver API Bindings Remote/Local Selenium Server JSON Wire Protocol Java Ruby node.js PHP Python … (WebDriverJS) InternetExplorerDriver
  13. 13. 13 • Built on top of WebDriverJS • Add AngularJS integration • Waits for AngularJS to be bootstrapped • Listen to AngularJS internals ($http, $timeout, …) to determine when to go to the next steps • Provide 2 sets of API : • Wrapped WebdriverJS API • + New API AngularJS specific (find by binding, repeaters, …) • Provide tools to help debugging • Facilitator for setting up (download & launch) easily a local RemoteWebDriver and launching tests for Chrome, Firefox & IE • Saucelabs integration Protractor
  14. 14. 14 • Ng-scenario • First e2e framework for AngularJS • Deprecated probably because • JS Sandbox limitations • Other limitations (login screen not on angular, …) • Reinventing the wheel • Protractor is kind of ng-scenario but based on a standard • Nightwatch.js • Also built on top of WebDriverJS but without AngularJS support • Casperjs • Only target headless browsers : PhantomJS, SlimerJS • Doesn’t use selenium Comparison with existing/similar tools
  15. 15. 15 Protractor Usage
  16. 16. 16 • Install protractor npm module • Add a config file • Add some tests • Update selenium server + Browser Driver • Launch selenium server + Browser Driver • Launch tests • Let’s try it with the well known angular-app  Installation & Tests launching
  17. 17. 17 • API • 3 globals : • browser : browser navigation methods + WebDriverJS wrapped (browser.driver) • element : find & interacting with elements • by : locator strategies • https://github.com/angular/protractor/blob/master/docs/api.md • https://github.com/angular/protractor/blob/master/spec/basic/findelements_spec.js • Debugging • Pause + step by step tests • browser.pause(); • Use API interactively • Element explorer utility • Preparing the app • onPrepare Usage
  18. 18. 18 • With grunt • Get/Update selenium webdriver • Npm install grunt-shell • Launching selenium webdriver : • npm install grunt-protractor-webdriver --save-dev • Launching protractor • npm install grunt-protractor-runner --save-dev • Reporting • Add jasmine JUnitXMLReporter in onPrepare function Automating installation & launch
  19. 19. 19 • Doesn’t handle manual angular bootstrap • Take care of how you do polling • Take care of the browser support (not tied to protractor itself actually) • https://github.com/angular/protractor/blob/master/docs/browser-setup.md Caveats/Limitations
  20. 20. 20 Functional Test architecture
  21. 21. 21 Testing Pyramid • High quality comes from a strategy that combines unit testing, integration testing and functional testing. • Unit tests are the foundation of the quality
  22. 22. 22 Ice cream cone anti-pattern
  23. 23. 23 Functional tests limitations • Fragile • Coupled to the UI (or Model) • -> Need to • Isolate changes • Decouple interface from tests • Isolate complexity • Slow • Don’t try to test eveything • Start with smoke tests and build on top of that • Hard to debug • Keep tests small • Keep tests isolated
  24. 24. 24 Application Driver Tests Application Driver Selenium Browser
  25. 25. 25 Application Driver • Put complexity in an application driver • Isolate changes • Ease manipulation for the QA team • DSL around the business side rather than technical side • Use Page Object Pattern • Demo • View Centric Vs Model Centric approch
  26. 26. 26 Conclusion
  27. 27. 27 Conclusion • Can use it as of today  • Don’t invest anymore on ng-scenario • Docs & debugging tools are getting better • New features coming : tests sharding, … • But still in beta version • Lots of API changes • Code used in demo : • https://github.com/ffesseler/angular-app/tree/protractor
  28. 28. 28 Summary • Protactor is a tool to do functional testing for your angularjs app • Based on Selenium Webdriver • Provide AngularJS specific APIs (Model centric) on top of webdriverjs • Provide tools to help you start quickly • Provide tools to help you debug easily • Unit tests are the foundation of your test strategy • Create a DSL to test your app based on Page Object Pattern
  29. 29. 29 Other talks • What I learned from 2 large AngularJS apps • How to « deploy » AngularJS inside your orgnaization • Everything about tests in AngularJS
  30. 30. Thanks ! • Florian Fesseler • Architecte RIA ✉ffesseler@kapit.fr ☏ @ffesseler
  31. 31. 31 • Services et logiciels RIA depuis 2005 • 50 experts et 4 pôles dédiés aux RIA : • Méthodologie et Assurance Qualité • Experience Utilisateur (UX) et Ergonomie-Design • Architecture et Développement HTML5/JS, Flex, Java,… • Centre de recherche sur les techno RIA, les usages collaboratifs et les nouvelles interactions utilisateurs • Fournisseur de composants innovants : lab.kapit.fr • Depuis 2008, + de 15 000 développeurs • Data Visualization (gratuit et commercial) • Outils de développement (open source) • Fournisseur d’applications d’entreprise • Savoir-faire de l’édition logicielle adapté au Service • Conduite de projet Agile : KapITerative (Scrum, Kanban, Lean) • Service outillé vs. Offshore • Editeur de logiciel : www.iobeya.com • 1ere solution de management visuel (« réunion post-it™ ») pour le Lean Management, l’Agile, le Brainstorming,… • +40 clients grands comptes, +15 000 utilisateurs quotidien, +40 pays KAP IT : RIA pour entreprise depuis 2005 Applications Métier Applications B2B/B2C Composants iObeya RIA
  32. 32. 32 Une offre complète pour les applications métiers Audit et Conseil • Méthodologie et organisation • Architecture et développement • Ergonomie/Design IHM • Qualité et industrialisation Recherche & Créativité • Benchmarking et Veille • Brainstorming, Conception collaborative • Prototypage itératif • Cadrage de projet Projets de A-Z • Stratégie Produit, Accompagnement utilisateur • Création et modernisation d’applications métiers, Extensions progiciels (ERP, CRM, ...) • Réalisation de librairies de composants (BI, BPM, Dashboard, Custom, ...) • Tierce maintenance agile « all inclusive »
  33. 33. 33 Ergonomie 4 pôles d'expertise pour produire des RIA innovantes de haute qualité Méthodologie Agile Industrialisation Test Assurance Qualité Data Visualisation Outils de développement Centre R&D Architecture et Développement Design graphique UI-UX Design Architecture de l’Info. & Conception IHM Accessibilité HTML5 / JS Node.js iOS / Android / Windows 8 PHP / .NET Flex J2EE Nouveaux usages Nouvelles interactions
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×