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

jasmine-reporters

protractor-jasmine2-html-reporter

jasmine-allure-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

jasmine-data-provider 

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

Made with Slides.com