On Investigating on protractor page object model, i came across the below two approaches:
First:
var AngularHomepage = function() {
var nameInput = element(by.model('yourName'));
var greeting = element(by.binding('yourName'));
this.get = function() {
browser.get('http://www.angularjs.org');
};
this.setName = function(name) {
nameInput.sendKeys(name);
};
this.getGreetingText = function() {
return greeting.getText();
};
};
module.exports = new AngularHomepage();
Second
'use strict';
module.exports = {
toDo: {
addField: element(by.css('[placeholder="add new todo here"]')),
checkedBox: element(by.model('todo.done')),
addButton: element(by.css('[value="add"]'))
},
go: function() {
browser.get('https://angularjs.org/'); //overrides baseURL
browser.waitForAngular();
},
addItem: function(item) {
var todo = this.toDo;
todo.addField.isDisplayed();
todo.addField.sendKeys(item);
todo.addButton.click();
}
};
The second approach looked more clean and looked promising, could someone suggest which one should i go for. If you have any additional styles , please do help me with it.