This presentation introduces several modern features of the ProtractorJS framework, including async/await, TypeScript support, and the blocking proxy. It notes that control flow is being deprecated in favor of async/await. It also discusses features of webdriver-manager like installing mobile apps and drivers, and blocking proxy for automatically waiting for Angular across tests.

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