1. Welcome to presentation wizard
Modern Features in ProtractorJS framework
Oleksandr Khotemskyi 2017

2. • Async/Await – a hero we deserved
• Deprecation of control flow – what to do next?
• TypeScript – superset of javascript
• Blocking proxy – waitForAngular for everyone
• Webdriver-manager features
• Bonus

4. Asynchronous code
• Harder for humans, easier for computer
• Task does not wait for previous task to complete
• Order of tasks should be specified explicitly by callbacks
• Consumes much less resources than splitting to threads
• Asynchronous code allows to work with IO operations
much more efficiently

6. Tests are synchronous by their nature
• Each step in UI functional tests should be done in strict
order
• This requires “synchronization” approaches of
asynchronous code:
• Callbacks
• Promises chaining
• Generators
• Fibers, corutines
• Async/Await
• other

7. Control Flow
• WebdriverJS now uses variation of task queue approach

8. Control Flow
• Increased complexity – this module is 3300 lines of code
• One of the hardest thing to understand in WebdriverJS
• Hard to debug

10. Async/Await
• Native approach to synchronize your asynchronous
code
• Hides internal Promises based implementation
• Introduced as part of ECMAscript 7 specification

12. With control flow

13. Without Control Flow

14. Handling errors

15. Iterating

16. More functional style Iterating

17. How to enable
• NodeJS >7.8 or use Babel
• For TypeScript – async/await could be compiled to ES3
compatible code
• Set - SELENIUM_PROMISE_MANAGER: false in your
protractor config file
• DO NOT mix control flow and async/await code –
execution flow will be unpredictable

19. Control flow is deprecated
• https://github.com/SeleniumHQ/selenium/issues/2969
• Phase 1: allow users to optionally turn off of the
control flow
• Phase 2: (October 2017) users must turn on the control
flow
• Phase 3: (October 2018) removing the control flow

20. Be ready for deprecation
• Set - SELENIUM_PROMISE_MANAGER: true in your
protractor config file explicitly right now (or env variable
SELENIUM_PROMISE_MANAGER : 1)
• This will give you one year to migrate your code away
from control flow
• More instructions and tips here:
https://github.com/SeleniumHQ/selenium/wiki/WebDri
verJs#moving-to-asyncawait
SELENIUM_PROMISE_MANAGER

22. TypeScript lang
• Developed by Microsoft, open
source
• Compiles into JavaScript
• Optional types
• ProtractorJS written with
TypeScript

27. Private methods

28. Some features
• ES6 imports/exports
• async/await
• Mixins, Enums, Interfaces, Abstract Classes
• Iterators/Generators
• Generics
• Property/class/parameter decorators (experimental)

30. Blocking Proxy
• Automatically executes waitForAngular before any
selenium action. Blocks actions execution
• Works on network level, not language level
• Can highlight interactions
• Can additionally log requests
• Works with any language

31. Your tests
Selenium
Server
Browser
Blocking
Proxy
Driver
(2) Selenium action
(1) waitForAngular()

33. Webdriver-manager
• Can setup Android SDK and virtual mobile devices
https://github.com/angular/webdriver-
manager/blob/master/docs/mobile.md
• Can install Appium
• Can download and prepare any version of webdriver
and selenium-standalone server
• `clean` and `status` - are useful to check what happens

34. Useful links
• Modern generator with async/await, TS, and other:
https://github.com/Xotabu4/generator-modern-
protractor
• Some examples from this presentation -
https://github.com/Xotabu4/modern_protractor_demo
• Blocking-proxy - https://github.com/angular/blocking-
proxy
• Webdriver-manager -
https://github.com/angular/webdriver-manager

35. http://www.xotabu4.github.io