Introduction to Protractor

  • 2,280 views
Uploaded on

What is Protractor ? …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,280
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
35
Comments
0
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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