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