getting started with protractor

What is protractor?

A set of browser testing tools that comprise a set of best practices

jasmine BDD framework

selenium webdriver

angular locator scripts

sugar and glue!

How does it work?

jasmine

WebDriverJS

Selenium WebDriver

browser

1 ↓

2
→

↑ 3

1

jasmine choreographs test execution flow

WebDriverJS API is invoked within test specs

2

WebDriverJS makes a REST call to Selenium WebDriver

A promise is returned to our test code

3

Selenium opens a browser to the URL we specify

Selenium runs the locator script and returns the resulting object

Our WebDriverJS promise is now resolved!

Writing Asynchronous Test Code

In the beginning...

it('should add a todo',function(){

  ptor.get('http://todomvc.com').then(function(){

    ptor.findElement(protractor.By.model('newTodo')).then(function(el){

				el.sendKeys('first test item\n');

    });
  });
});

WebDriverJS
Protractor

Can we break the pyramid?

it('should open browser',function(){
  ptor.get('http://todomvc.com/architecture-examples/angularjs');
});


it('should add a todo',function(){
  ptor.findElement(protractor.By.model('newTodo')).then(function(el){
    el.sendKeys('first test item\n');
  });
});

Jasmine won't wait for ptor.get - This will always fail!

We can tell jasmine to wait...

it('should open browser',function(done){
  ptor.get('http://todomvc.com/architecture-examples/angularjs')
    .then(done);
});


it('should add a todo',function(done){
  ptor.findElement(protractor.By.model('newTodo')).then(function(el){
    el.sendKeys('first test item\n')
      .then(done);
  });
});

but this can be tedious for complex scenarios

A better way

it('should open in a browser',function(){

  browser.get('http://todomvc.com/architecture-examples/angularjs');

});

it('should add a todo',function(){

  element(by.model('newTodo')).sendKeys('first test item\n');

});

Glue and Sugar

it()

enhanced by protractor to implicitly wait for execution flow to complete!

uses wrapInControlFlow() internally to wrap both it() and describe()

browser

instantiates and wraps WebDriverJS instance for us

use this for low level browser config and interaction

element()

accepts a locator and returns an Element Finder object

Element Finder objects allows us to lazy query the DOM

by.model

locator script that returns a Web Element by its ng-model attribute

ensures the digest cycle is complete before we query the DOM

uses waitForAngular under the covers

expect()

enhanced to accept accept WebDriverJS promises!