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');
});
});
});
@macroking
Copy link

macroking commented Sep 7, 2016

@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