Selenium WebDriverJS based framework for
automated testing of Angular 1.x/2.x applications
OLEKSANDR KHOTEMSKYI
xotabu4.github.io

 Julie Ralph(Google) is one of the main
contributors, made first commits in
January 2013
 Created as an answer to question:
”How to make end to end tests for
AngularJS applications easier?”
 Now ProtractorJS reached version 4.x,
with over 1300 commits, 5700 GitHub
stars, 200 contributors

 JS is one of the most popular languages today, and
TypeScript is as primary in Angular 2.0
https://dou.ua/lenta/articles/language-rating-jan-2016/
JAVA C# JavaScript PHP PythonC++ Ruby

 Easier than Java
 Thousands of libraries already exist for JS/NodeJS. Friendly
community, tons of open source code. Package manager already
included in NodeJS
 Much easier common code like JSON parsing, sending HTTP requests,
and others
 Duck-typing, monkey-patching
 Tools are smaller, and project start is faster
 Newest versions of TypeScript or ECMAScript 6 makes code much
easier to write and understand
 Same language for front-end, back-end and tests means that same code
execution environment

 Developed by Microsoft team
 Superset of JavaScript (includes JavaScript)
 Compiles to JavaScript (ECMAScript 3, 5 or 6)
 Optional types! This allows to have autocomplete in IDE
 Easier refactoring of code
 Has features that not yet in JavaScript specification
(@Annotations, async/await)
 Compilation errors, instead of runtime errors in JavaScript

ProtractorJS Java Selenium WebDriver
High-level framework Low-level automation library (not framework)
Uses script languages: TypeScript or JavaScript
or both same time
Uses Java
JasimineJS (test runner and assertions),
SauceLabs/BrowserStack integration, basic
reporting, interactive debugger, command line
parameters, configuration files

Node Package Manager shows ~628 results for
‘protractor’
Maven shows ~422 results for ‘selenium
webdriver’
Asynchronous, uses own control-flow, and
Promises objects
Synchronous, traditional approach
Ability to run tests in parallel Parallel running should be done with additional
libraries/frameworks
PageObjects are just objects with attributes and
functions
PageObjects require @FindBy annotations and
PageObjectFactory usage.
Plugins. Extra element locators. Mobile browsers
support (with Appium).
Mobile browsers support.

Test Runner
(JasmineJS,
Cucumber …)
ProtractorJS
Selenium JavaScript official
bindings
NodeJS environment
Test Runner
extensions
Selenium Standalone Server (JAVA)
Other JS modules
HTTP
JSON
ChromeDriver GeckoDriver EdgeDriver SafariDriver Other drivers

• Runs on NodeJS 4.x, 5.x, 6.x
• Can be used with different Test Runners (JasmineJS, CucumberJS, Mocha, others)
• Can connect to browser using WebDriver server or directly (Chrome and Firefox only)
• Supports all browsers that WebDriver does: Chrome, Firefox, Edge, Safari, Opera,
PhantomJS and mobile
• Angular 1.x and Angular 2.x ready!

One of the key features of ProtractorJS that it is uses same JSON WebDriver Wire protocol as
other language bindings.
This code will be executed as 3 separate JSON WebDriver Wire Protocol commands:
Synchronizing with
AngularJS application
Locating element on the
page
Sending ‘click’ action for
element

• Protractor uses ‘Wrapper’ pattern to add own features to standard WebDriver, WebElement, Locators objects
Browser(WebDriver instance)
+
Inherited from WebDriver
• getProcessedConfig
• forkNewDriverInstance
• restart
• useAllAngular2AppRoots
• waitForAngular
• findElement
• findElements
• isElementPresent
• addMockModule
• clearMockModules
• removeMockModule
• getRegisteredMockModules
• get
• refresh
• navigate
• setLocation
• getLocationAbsUrl
• debugger
• enterRepl
• pause
• wrapDriver
actions
touchActions
executeScript
executeAsyncScri
pt
call
wait
sleep
getPageSource
close
getCurrentUrl
getTitle
takeScreenshot
switchTo

ElementFinder
+
Inherited from WebElement• then
• clone
• locator
• getWebElement
• all
• element
• $$
• $
• isPresent
• isElementPresent
• evaluate
• allowAnimations
• equals
• getDriver
• getId
• getRawId
• serialize
• findElement
• click
• sendKeys
• getTagName
• getCssValue
• getAttribute
• getText
• getSize
• getLocation
• isEnabled
• isSelected
• submit
• clear
• isDisplayed
• takeScreenshot

Protractor Locators
+
Inherited from WebDriver Locators• addLocator
• binding
• exactBinding
• model
• buttonText
• partialButtonText
• repeater
• exactRepeater
• cssContainingText
• options
• deepCss
• className
• css
• id
• linkText
• js
• name
• partialLinkText
• tagName
• xpath

 JavaScript is single threaded (mostly)
 To have possibility to do multiple tasks at once – JavaScript run them
all in single thread, and quickly switch between them
 Async tasks are running in isolation. To make execution step by step
– callbacks are used
 Callbacks are just functions, that will be called when async function
is finished. It is like – “call this when you are done”. You can pass any
arguments to them

 Pattern to avoid callback hell, extension of callbacks
 Almost every function from API returns special object – Promise
 Promise is a object, that will be resolved to a value (any), or
rejected if value can’t be returned

 Do not try to write in synchronous manner! You
should think differently when writing async code
 When you asserting results – promises
automatically resolved. Do not worry to resolve
promise before assertion
 To wait something on the page – use
browser.wait() or browser.sleep()
 ES7 features are on their way! async/await will
make our life much easier
 Be brave and good luck

https://gist.github.com/Xotabu4/f26afb9e24397c9d059bb984d30a6b0a
Example of simple test case
JAVA + Pure Selenium JAVA + JUNIT
TypeScript + ProtractorJS + JasmineJS
https://gist.github.com/Xotabu4/dcfe83bc98ad304f58f3b05de9cd6c69

https://gist.github.com/Xotabu4/79ece1d104f2557a70cd079b62f46f45
Example of simple pageObject pattern usage
JAVA + Selenium PageObjectFactory (@FindBy)
TypeScript + ProtractorJS
https://gist.github.com/Xotabu4/a9334f22933d1d6a16c820ccb4bd6635

And useful links:
 Protractor site: http://www.protractortest.org
 Promises, WebDriver Control Flow documentation:
http://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/lib/promise.html
 Gitter chat: https://gitter.im/angular/protractor
 StackOverflow(top questions): http://stackoverflow.com/questions/tagged/protractor?sort=votes&pageSize=20
 GitHub: https://github.com/angular/protractor
 TypeScript documentation: https://www.typescriptlang.org/docs/tutorial.html
 ES6 features: http://es6-features.org/
 Protractor TypeScript example: https://github.com/angular/protractor/tree/master/exampleTypescript
OLEKSANDR KHOTEMSKYI
xotabu4.github.io 2016