• Do all the pieces work together?
• Can I release my code to production?
• Is my view working the way it should?

• Installing and configuring selenium is painful
• Tests are difficult to write
• Tests are hard to debug
• Keeping tests up to date is requires a lot of work

• Install node.js
• npm install -g protractor
  
• webdriver-manager update

exports.config = { 
  seleniumAddress: 'http://localhost:4444/wd/hub', 
  specs: ['spec.js'] 
}

describe('angularjs homepage', function() { 
  it('should have a title', function() { 
    browser.get('http://juliemr.github.io/protractor-demo/'); 
    expect(browser.getTitle()).toEqual('Super Calculator');
  });
});

• Browser: get(), refresh(), close()
• Element: by.model(), by.binding, by.className()
• Protractor: waitForAngular()

 describe('slow calculator', function() {
  beforeEach(function() {
    browser.get('http://localhost:3456');
  });

  it('should add numbers', function() {
    element(by.model('first')).sendKeys(4);
    element(by.model('second')).sendKeys(5);

    element(by.id('gobutton')).click();

    expect(element(by.binding('latest')).getText()).
        toEqual('9');
  });

  describe('memory', function() {
    var first, second, goButton;
    beforeEach(function() {
      first = element(by.model('first'));
      second = element(by.model('second'));
      goButton = element(by.id('gobutton'));
    });

    it('should start out with an empty memory', function () {
      var memory =
          element.all(by.repeater('result in memory'));

      expect(memory.count()).toEqual(0);
    });

    it('should fill the memory with past results', function() {
      first.sendKeys(1);
      second.sendKeys(1);
      goButton.click();

      first.sendKeys(10);
      second.sendKeys(20);
      goButton.click();

      var memory = element.all(by.repeater('result in memory').
          column('result.value'));
      memory.then(function (arr) {
        expect(arr.length).toEqual(2);
        expect(arr[0].getText()).toEqual('30'); // 10 + 20 = 30
        expect(arr[1].getText()).toEqual('2'); // 1 + 1 = 2
      });
    });
  });
});

 element(by.binding('name'));

 <div>{{ name }}</div>

 element(by.model('age'));

 <input type="text" ng-model="age" />

 element(by.repeater('cat in pets').row(1));

<div ng-repeat="cat in pets">
  <span>{{cat.name}}</span>
  <span>{{cat.age}}</span>
</div>

 element(by.cssContainingText('.pet', 'Dog'));

 <ul>
  <li class="pet">Dog</li>
  <li class="pet">Cat</li>
</ul>

 element(by.css('[ng-click="submit()"]')).click();

 <button ng-click="submit()"><button>

 element(by.model('commentText')).sendKeys("Hi!", protractor.Key.ENTER);

 <textarea ng-model="commentText"><textarea>

• webdriver-manager start
• ./bin/elementexplorer.js http://angularjs.org

var AngularHomepage = function() {
  this.nameInput = element(by.model('yourName'));
  this.greeting = element(by.binding('yourName'));

  this.get = function() {
    browser.get('http://www.angularjs.org');
  };

  this.setName = function(name) {
    this.nameInput.sendKeys(name);
  };
};

• Use Protractor's by.model, by.binding and by.repeater instead of by.className or other dom specific methods
• Use page objects to make the tests easier to maintain
• Separate specs into different files and use node's .require() to run them

• E2E tests don't replace unit tests but compliment them to create ultra safe production deployments
• Protractor makes it easier to write and maintain E2E tests for angular apps
• Try to ship a version to production 10 times a day or even more
• Have fun (: