Introduction to Protractor
32 likes18,320 views
Protractor is an end-to-end test framework for AngularJS applications built on top of Selenium WebDriver. It runs tests against an application in a real browser, interacting with it as a user would. Protractor provides AngularJS-specific APIs and tools to help with debugging on top of WebDriverJS. Functional tests are the foundation of quality but should be isolated and decoupled from the UI using patterns like page objects. Protractor is ready to use today for testing AngularJS applications.
Introduction to Protractor
- 1. April 2014 / v0.21.0 Introduction to Protractor Florian Fesseler RIA Architect ✉[email protected] ☏ @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.”
- 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
- 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
- 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
- 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
- 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 ✉[email protected] ☏ @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