What is protractor?

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

How does it work?

1

jasmine choreographs test execution flow

WebDriverJS API is invoked within test specs

2

3

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');

    });
  });
});

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');
  });
}); 

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);
  });
}); 

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!