Value Proposition canvas- Customer needs and pains
Олександр Хотемський “ProtractorJS як інструмент браузерної автоматизації для AngularJS 1x/2x додатків”
1. Selenium WebDriverJS based framework for automated
testing of Angular 1.x/2.x applications
OLEKSANDR KHOTEMSKYI
https://xotabu4.github.io/website
2. 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
3.
4. 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
5. 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
6. 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
7. 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.
8. 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
9. • 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!
10. 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
11. • 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
15. 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
16.
17.
18. 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
19. 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
Мое мнение – для новых проектов использовать уже TypeScript, старые можно частично мигрировать на TypeScript, или оставить как есть. ПОКАЖИ ВИДЕО!!!
Здесь важно сказать что протрактор работает по точно такому же протоколу как и Java bindings. То есть в браузере разницы видно не будет.+ javascript бингинги официальные, и поддерживаются практически наравне с джавашными и остальными.WebDriver wire protocol
Protractor element EXTENDS WebDriverJS element, so all functions are accessible.
Here is exampe of simple Protractor interaction with the page:First, Protractor tells the browser to run a snippet of JavaScript. This is a custom command which asks Angular to respond when the application is done with all timeouts and asynchronous requests, and ready for the test to resume.
Then, the command to find the element is sent.
Finally the command to perform a click action is sent.
Summary: Protractor uses the same API to manipulate browser as any other language bindings, so browser won’t notice any difference here
Protractor element EXTENDS WebDriverJS element, so all functions are accessible.
Protractor element EXTENDS WebDriverJS element, so all functions are accessible.
ProtractorBy.prototype.deepCss - Find an element by css selector within the Shadow DOM.ProtractorBy.prototype.options - Find an element by ng-options expression.
Тут рассказать про асинхронность и контрол флоуБольше всего у людей которые начинают переходить в мир JS взрывает мозг именно асинхронность. Попытаемся рассказать основные моменты
Это вернет Promise, который станет или текущим именем пользователя, или пустой строкой, в случае если такого элемента не существует.
Explicit creating and closing of browser is needed
Explicit creating and closing of browser is needed