Downloaded 732 times
Uploaded byFlorian Fesseler
Introduction to Protractor
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.
More Related Content
![[Hoang nguyen] The Psychology in Software Testing](https://cdn.slidesharecdn.com/ss_thumbnails/hoangnguyenthepsychologyinsoftwaretesting-140717225649-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Introduction to Protractor
Introduction to Protractor
- 1. April 2014 /v0.21.0 Introduction to Protractor Florian Fesseler RIA Architect ✉ffesseler@kapit.fr ☏ @ffesseler
- 2. 2 Agenda • What isProtractor • 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 anend 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.
- 5.
- 6. 6 End To EndTesting Testing Vocabulary Functional testing Web Integration testing Customer testing Acceptance testing GUI Testing
- 7. 7 • Test alllayers of the application • Simulate user interactions • Functional Testing for webapp => Automating browsers Functional Testing
- 8.
- 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 ontop 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 • Firste2e 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.
- 16. 16 • Install protractornpm 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 • 3globals : • 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 handlemanual 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.
- 21. 21 Testing Pyramid • Highquality 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 coneanti-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.
- 25. 25 Application Driver • Putcomplexity 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.
- 27. 27 Conclusion • Can useit 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 isa 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 • WhatI learned from 2 large AngularJS apps • How to « deploy » AngularJS inside your orgnaization • Everything about tests in AngularJS
- 30. Thanks ! • FlorianFesseler • Architecte RIA ✉ffesseler@kapit.fr ☏ @ffesseler
- 31. 31 • Services etlogiciels 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ètepour 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'expertisepour 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