View
4.033
Download
0
Category
Tags:
Preview:
DESCRIPTION
What is Protractor ? How To Use It ? Test Automation Architecture
Citation preview
April 2014 / v0.21.0
Introduction to Protractor
Florian Fesseler RIA Architect
✉ ffesseler@kapit.fr
☏ @ffesseler
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
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
Testing Quadrants
5
Testing Quadrants
Protractor
6
End To End Testing
Testing Vocabulary
Functional testing
Web Integration
testing
Customer testing
Acceptance testing
GUI Testing
7
• Test all layers of the application
• Simulate user interactions
• Functional Testing for webapp => Automating browsers
Functional Testing
8
Automating browsers
Selenium WebDriver
Tests Scripts
9
Automating browsers : WebDriver API
Selenium WebDriver
WebDriver API Remote/Local Selenium Server
JSON Wire Protocol
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
Automating browsers : WebDriverJS
Selenium WebDriver
WebDriver API Bindings
Remote/Local Selenium Server
JSON Wire Protocol
Java
Ruby
node.js
PHP
Python
…
(WebDriverJS)
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
• 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
• 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
Protractor Usage
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
• 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
• 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
• 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
Functional Test architecture
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
Ice cream cone anti-pattern
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
Application Driver
Tests
Application Driver
Selenium
Browser
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
Conclusion
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
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
Other talks
• What I learned from 2 large AngularJS apps
• How to « deploy » AngularJS inside your orgnaization
• Everything about tests in AngularJS
Thanks !
• Florian Fesseler • Architecte RIA
✉ ffesseler@kapit.fr
☏ @ffesseler
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
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
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
Recommended