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