Protractor
What`s all the hype about?
...but on other hand
What it is?
- User Interface (end-to-end) test framework primarly for AngularJS applications, but also can be used for non-angular apps.
Let`s run some tests
- Configuration file
- Spec file (the test itself)
That`s all folks!
What it is comprised from?
- is node.js program.
- is built on top of WebDriverJS
- is extended by JavaScript testing frameworks - Jasmine, Mocha, Chai, Cucumber.js
Pros compared to other FW
- supported by Google
-
made specifically for Angular apps
- supports angular-specific locator strategies.
- automatic waiting - synchronization with angular applications
- it is being actively maintained and improved mostly by Google developers with a close cooperation with an angular team - this means that protractor follows the angular release cycle and new changes
High Level Architecture
Problem - Asynchronous execution!
- Since is built on top of WebDrive JS and JavaScript has non-blocking API
- Commands may not be executed sequentilly, hence driver.click(E1) may be executed before driver.get(page1);
How Protractor handles async execution
- promises - 3 states (Pending, Resolved, Rejected)
- control flow maintains a queue of pending promises
How Protractor waits?
- waits until all requests are finished by sending additional pre-request to the driver (browser)
-
element(by.css('button.myclass')).click();
- /session/:sessionId/execute_async
- /session/:sessionId/element -
- /session/:sessionId/element/:id/click
Jasmine
- Jasmine is adapted for Protractor
- on spec level
- on "expect()" level (asserts)
- Instead of
- use
Additional Locators for Ang app
by.binding
by.selectedOption
by.model
by.buttonText
by.partialButtonText
by.repeater
.row
.col
by.cssContainingText
by.options
Reporting
- By default, protractor does not provide much details on test execution results
- ...but we can extend protractor by external node modules (libraries)
-
jasmine-spec-reporter
Test Parametrization (DDT)
- JS Objects
- jasmine-data-provider - data provider as in JUnit
- Since it`s node.js ->
- convert from CSV, Excel;
- connecting to a database
- sending requests/posts via web services
JS Objects
Page Object
CI
- is supported by JS Front End build tools - Grunt, Gulp
- extensive report generation (already mentioned)
Cloud Support
- Sauce Labs
- BrowserStack
Grunt Example
Text
- ...and then just run "grunt e2e"
- can be configured as
Mocking
- You can use http mock
- Reuse existing mock modules
- disable animations
Recommended Plugins/Extensions
| protractor-perf | measure browser performance |
| protractor-console | shows errors of browser`s console |
| grunt-protractor-runner | run protractor together with Grunt |
| jasmine-data-provider | reuse tests with different test data |
| jasmine-reporters | generates report in XML |
| jasmine-spec-reporter | shows test execution status on the fly |
| protractor-jasmine2-html-reporter | generates HTML report from XML with screenshots for each spec |
| protractor-accessibility-plugin | runs a set of accessibility audits |
| protractor-timeline-plugin | gathers test timeline information from various sources and presents the output visually |
| protractor-helpers | helper functions for (mostly) all occasions |
| protractor-testability-plugin | syncs with app even it`s not angular (JQuery, webworkers,websockets) |
Alternatives or other binding
- Basically - no alternatives, just other bindings
- Java
- ngWebDriver - basically the same as protractor but uses Java bindings. (Developed by Paul Hammant)
- sending JS script before each call to the action (as protractor does)
- Python
- pytractor -"It is built on some parts of protractor"
Pros
- automatically syncs with angular app
- supports angular-specific locator strategies
- actively maintained and improved by Go
- easy to set up and use
- already recognized framework
Cons
- asynchronous
- can be slow
- difficult to debug
- difficult to write complex tests with high number of steps
Use
- for Acceptance, Smoke tests
- when application is written in "clean" angular
- when project have non-technical testers
Not so good
- when application have
- non-angular parts
- angular third party libraries
- web sockets/web workers (but can be solved with plugin)
- when need to test long and complex use cases
Conclusion
Thanks
Protractor
By Ilja Pavlovs
