Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Protractor example suite using page objects
'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;
'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');
});
});
});
@bmsoko
Copy link

bmsoko commented Apr 23, 2015

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?

@Adzz
Copy link

Adzz commented Jan 31, 2016

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

@swangful
Copy link

@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 👍

@rahulmr
Copy link

rahulmr commented Apr 15, 2016

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

@matisnape
Copy link

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

@macroking
Copy link

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

@nuwanhnk
Copy link

nuwanhnk commented Feb 5, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment