Protractor example suite using page objects

angular.page.js

'use strict';

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

AngularPage.prototype  = Object.create({}, {
  todoText:  {   get: function ()     { return element(by.model('todoText'));             }},
  addButton: {   get: function ()     { return element(by.css('[value="add"]'));          }},
  yourName:  {   get: function ()     { return element(by.model('yourName'));             }},
  greeting:  {   get: function ()     { return element(by.binding('yourName')).getText(); }},
  todoList:  {   get: function ()     { return element.all(by.repeater('todo in todos')); }},
  typeName:  { value: function (keys) { return this.yourName.sendKeys(keys);              }} ,
  todoAt:    { value: function (idx)  { return this.todoList.get(idx).getText();          }},
  addTodo:   { value: function (todo) {
    this.todoText.sendKeys(todo);
    this.addButton.click();
  }}
});

module.exports = AngularPage;

example_pages_spec.js

'use strict';

var AngularPage = require('../pages/angular.page.js');

describe('angularjs homepage', function () {
  var page;

  beforeEach(function () {
    page = new AngularPage();
  });

  it('should greet the named user', function () {
    page.typeName('Julie');
    expect(page.greeting).toEqual('Hello Julie!');
  });

  describe('todo list', function () {
    it('should list todos', function () {
      expect(page.todoList.count()).toEqual(2);
      expect(page.todoAt(1)).toEqual('build an angular app');
    });

    it('should add a todo', function () {
      page.addTodo('write a protractor test');
      expect(page.todoList.count()).toEqual(3);
      expect(page.todoAt(2)).toEqual('write a protractor test');
    });
  });

});

Every time you call the " page.typeName('XXX');" from the AngularPage, are you also clicking the button? " this.addButton.click();"?? shouldn't you have the method for clicking the btn separately?

Why expect(page.todoList.count()).toEqual(2); ? Don't you need to add two todos first?

@bmsoko: Everytime he is calling the function typeName he is only sending keys to that element (yourName). So, no. He does not need to call a method to click a button as he is filling out a field.

@Adzz: He is expecting that the todoList count to equal 2 at its current state. If they didn't exist previously, then yes he would have to add two todos before asserting on them just like he does in lines 23-26. I think it was mainly used as an example of how to use pageObjects not how to properly test a todoList 👍

Small fix needed here to make the gist work as expected.
https://gist.github.com/rahulmr/8f7f45b397ff593435c71b2ed0ce0111
todoText should be replaced by todoList.todoText and todos should be replaced by todoList.todos in the angular.page.js file.
Thanks

Is this Object.create an old syntax or something? I didn't find it in Protractor tutorial :|

@matisnape Object.create is not related to protractor, it is JavaScript way..

I have a suggestion for this model itself. Here we used expect clause in the spec file.What if we use that clause within the page object. So that we only see method name and parameters in the Spec file. Here is some example from above page object and spec files.

angular.page.js

 validateSizeoftheToDoList(count){

expect(element.all(by.repeater('todo in todos')).Count()).toEqual(count);
}

In the spec file (example_pages_spec.js) we just use

var AngularPage = require('../pages/angular.page.js');

describe('angularjs homepage', function () {
  var page;

  beforeEach(function () {
    page = new AngularPage();
  });

  it('should greet the named user', function () {
    page.validateSizeoftheToDoList(3);
  });