Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Welcome to presentation wizard
Modern Features in ProtractorJS framework
Oleksandr Khotemskyi 2017
• Async/Await – a hero we deserved
• Deprecation of control flow – what to do next?
• TypeScript – superset of javascript
...
Asynchronous code
• Harder for humans, easier for computer
• Task does not wait for previous task to complete
• Order of t...
Tests are synchronous by their nature
• Each step in UI functional tests should be done in strict
order
• This requires “s...
Control Flow
• WebdriverJS now uses variation of task queue approach
Control Flow
• Increased complexity – this module is 3300 lines of code
• One of the hardest thing to understand in Webdri...
Async/Await
• Native approach to synchronize your asynchronous
code
• Hides internal Promises based implementation
• Intro...
With control flow
Without Control Flow
Handling errors
Iterating
More functional style Iterating
How to enable
• NodeJS >7.8 or use Babel
• For TypeScript – async/await could be compiled to ES3
compatible code
• Set - S...
Control flow is deprecated
• https://github.com/SeleniumHQ/selenium/issues/2969
• Phase 1: allow users to optionally turn ...
Be ready for deprecation
• Set - SELENIUM_PROMISE_MANAGER: true in your
protractor config file explicitly right now (or en...
TypeScript lang
• Developed by Microsoft, open
source
• Compiles into JavaScript
• Optional types
• ProtractorJS written w...
Private methods
Some features
• ES6 imports/exports
• async/await
• Mixins, Enums, Interfaces, Abstract Classes
• Iterators/Generators
• G...
Blocking Proxy
• Automatically executes waitForAngular before any
selenium action. Blocks actions execution
• Works on net...
Your tests
Selenium
Server
Browser
Blocking
Proxy
Driver
(2) Selenium action
(1) waitForAngular()
Webdriver-manager
• Can setup Android SDK and virtual mobile devices
https://github.com/angular/webdriver-
manager/blob/ma...
Useful links
• Modern generator with async/await, TS, and other:
https://github.com/Xotabu4/generator-modern-
protractor
•...
http://www.xotabu4.github.io
QA Fest 2017. Александр Хотемской. Современные возможности в организации ProtractorJS фреймворка
QA Fest 2017. Александр Хотемской. Современные возможности в организации ProtractorJS фреймворка
QA Fest 2017. Александр Хотемской. Современные возможности в организации ProtractorJS фреймворка
QA Fest 2017. Александр Хотемской. Современные возможности в организации ProtractorJS фреймворка
QA Fest 2017. Александр Хотемской. Современные возможности в организации ProtractorJS фреймворка
QA Fest 2017. Александр Хотемской. Современные возможности в организации ProtractorJS фреймворка
QA Fest 2017. Александр Хотемской. Современные возможности в организации ProtractorJS фреймворка
QA Fest 2017. Александр Хотемской. Современные возможности в организации ProtractorJS фреймворка
QA Fest 2017. Александр Хотемской. Современные возможности в организации ProtractorJS фреймворка
QA Fest 2017. Александр Хотемской. Современные возможности в организации ProtractorJS фреймворка
QA Fest 2017. Александр Хотемской. Современные возможности в организации ProtractorJS фреймворка
QA Fest 2017. Александр Хотемской. Современные возможности в организации ProtractorJS фреймворка
QA Fest 2017. Александр Хотемской. Современные возможности в организации ProtractorJS фреймворка
QA Fest 2017. Александр Хотемской. Современные возможности в организации ProtractorJS фреймворка
Upcoming SlideShare
Loading in …5
×

QA Fest 2017. Александр Хотемской. Современные возможности в организации ProtractorJS фреймворка

191 views

Published on

Мир автоматизации на JS развивается семимильными шагами. Один из популярных фреймворков ProtractorJS так же не стоит на месте и обзавелся поддержкой TypeScript, ControlFlow вскоре будет убран в пользу нативных средств синхронизации типа async/await. Мы рассмотрим эти и другие фичи, которые упрощают жизнь автоматизаторам.

Published in: Education
  • Be the first to comment

  • Be the first to like this

QA Fest 2017. Александр Хотемской. Современные возможности в организации ProtractorJS фреймворка

  1. 1. Welcome to presentation wizard Modern Features in ProtractorJS framework Oleksandr Khotemskyi 2017
  2. 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
  3. 3. 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
  4. 4. 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
  5. 5. Control Flow • WebdriverJS now uses variation of task queue approach
  6. 6. Control Flow • Increased complexity – this module is 3300 lines of code • One of the hardest thing to understand in WebdriverJS • Hard to debug
  7. 7. Async/Await • Native approach to synchronize your asynchronous code • Hides internal Promises based implementation • Introduced as part of ECMAscript 7 specification
  8. 8. With control flow
  9. 9. Without Control Flow
  10. 10. Handling errors
  11. 11. Iterating
  12. 12. More functional style Iterating
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. TypeScript lang • Developed by Microsoft, open source • Compiles into JavaScript • Optional types • ProtractorJS written with TypeScript
  17. 17. Private methods
  18. 18. Some features • ES6 imports/exports • async/await • Mixins, Enums, Interfaces, Abstract Classes • Iterators/Generators • Generics • Property/class/parameter decorators (experimental)
  19. 19. 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
  20. 20. Your tests Selenium Server Browser Blocking Proxy Driver (2) Selenium action (1) waitForAngular()
  21. 21. 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
  22. 22. 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
  23. 23. http://www.xotabu4.github.io

×