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

1. April 2014 / v0.21.0
Introduction to Protractor
Florian Fesseler
RIA Architect
✉ffesseler@kapit.fr
☏ @ffesseler

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
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
Testing Quadrants

5. 5
Testing Quadrants
Protractor

6. 6
End To End Testing
Testing Vocabulary
Functional
testing
Web
Integration
testing
Customer
testing
Acceptance
testing
GUI Testing

7. 7
• Test all layers of the application
• Simulate user interactions
• Functional Testing for webapp => Automating browsers
Functional Testing

8. 8
Automating browsers
Selenium WebDriver
Tests Scripts

9. 9
Automating browsers : WebDriver API
Selenium WebDriver
WebDriver API
Remote/Local
Selenium Server
JSON Wire
Protocol

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
Automating browsers : WebDriverJS
Selenium WebDriver
WebDriver API
Bindings
Remote/Local
Selenium Server
JSON Wire
Protocol
Java
Ruby
node.js
PHP
Python
…
(WebDriverJS)

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
• 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
• 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
Protractor Usage

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
• 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
• 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
• 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
Functional Test architecture

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
Ice cream cone anti-pattern

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
Application Driver
Tests
Application Driver
Selenium
Browser

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
Conclusion

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
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
Other talks
• What I learned from 2 large AngularJS apps
• How to « deploy » AngularJS inside your orgnaization
• Everything about tests in AngularJS

30. Thanks !
• Florian Fesseler
• Architecte RIA
✉ffesseler@kapit.fr
☏ @ffesseler

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
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
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