Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to Protractor

16,043 views

Published on

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

Published in: Technology
  • ★★ How Long Does She Want You to Last? ★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here's the link to the report ➤➤ https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ■■■ https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Introduction to Protractor

  1. 1. April 2014 / v0.21.0 Introduction to Protractor Florian Fesseler RIA Architect ✉ffesseler@kapit.fr ☏ @ffesseler
  2. 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. 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. 4 Testing Quadrants
  5. 5. 5 Testing Quadrants Protractor
  6. 6. 6 End To End Testing Testing Vocabulary Functional testing Web Integration testing Customer testing Acceptance testing GUI Testing
  7. 7. 7 • Test all layers of the application • Simulate user interactions • Functional Testing for webapp => Automating browsers Functional Testing
  8. 8. 8 Automating browsers Selenium WebDriver Tests Scripts
  9. 9. 9 Automating browsers : WebDriver API Selenium WebDriver WebDriver API Remote/Local Selenium Server JSON Wire Protocol
  10. 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. 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. 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. 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. 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. 15 Protractor Usage
  16. 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. 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. 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. 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. 20 Functional Test architecture
  21. 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. 22 Ice cream cone anti-pattern
  23. 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. 24 Application Driver Tests Application Driver Selenium Browser
  25. 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. 26 Conclusion
  27. 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. 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. 29 Other talks • What I learned from 2 large AngularJS apps • How to « deploy » AngularJS inside your orgnaization • Everything about tests in AngularJS
  30. 30. Thanks ! • Florian Fesseler • Architecte RIA ✉ffesseler@kapit.fr ☏ @ffesseler
  31. 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. 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. 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

×