PROTRACTOR JSSelenium WebDriverJS based framework for automated testing of Angular 1.x/2.x applications

OLEKSANDR KHOTEMSKYIhttps://xotabu4.github.io/website

HISTORY 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

LIBRARY OVERVIEW

WHY JS? 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

WHY JS? 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

TYPESCRIPT LANGUAGE 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

DIFFERENCEProtractorJS 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.

PROTRACTOR PLACE IN SELENIUM WEBDRIVER ECOSYSTEM

Test Runner(JasmineJS,

Cucumber …)ProtractorJSSelenium JavaScript

official bindings

NodeJS environment

Test Runner

extensions

Selenium Standalone Server (JAVA)

Other JS modules

HTTPJSON

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!

LIBRARY ARCHITECTURE

LIBRARY ARCHITECTURE

One of the key features of ProtractorJS that it is uses same JSON WebDriver Wire protocol as other language bindings.

/session/:sessionId/execute_async /session/:sessionId/elemen

t/session/:sessionId/element/:id/click

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

LIBRARY ARCHITECTURE• 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

actionstouchActionsexecuteScriptexecuteAsyncScriptcallwaitsleepgetPageSourceclosegetCurrentUrlgetTitletakeScreenshotswitchTo

LIBRARY ARCHITECTUREElementFinder

+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

LIBRARY ARCHITECTUREProtractor 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

HOW DOES THE PROMISES IN PROTRACTOR WORKS?

JAVASCRIPT IS ASYNCHRONOUS 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

JAVASCRIPT IS ASYNCHRONOUS

PYRAMID OF DOOM (CALLBACK HELL)

PROMISE BASICS 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

WRONG!

PROMISES BASICS 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

CODE EXAMPLES

TEST EXAMPLE

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

PAGEOBJECT EXAMPLE

https://gist.github.com/Xotabu4/79ece1d104f2557a70cd079b62f46f45

Example of simple pageObject pattern usage

JAVA + Selenium PageObjectFactory (@FindBy)

TypeScript + ProtractorJShttps://gist.github.com/Xotabu4/a9334f22933d1d6a16c820ccb4bd6635

WAITING FOR ELEMENT EXAMPLEJAVA:

ProtractorJS:

QUESTIONS?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 KHOTEMSKYIhttps://xotabu4.github.io/website 2016