What's the correct Protractor's syntax for Page Objects?

Question

I've come across different types of syntax for Protractor's Page Objects and I was wondering, what's their background and which way is suggested.

This is the official PageObject syntax from Protractor's tutorial. I like it the most, because it's clear and readable:

use strict;

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.getGreeting = function() {
    return greeting.getText();
  };
};
module.exports = AngularHomepage;

However, I've also found this kind:

'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;

What are the pros/cons of those two approaches (apart from readability)? Is the second one up-to-date? I've seen that WebdriverIO uses that format.

I've also heard from one guy on Gitter that the first entry is inefficient. Can someone explain to me why?

Answer 1

Page Object Model framework becomes popular mainly because of:

1. Less code duplicate
2. Easy to maintain for long
3. High readability

So, generally we develop test framework(pom) for our convenience based on testing scope and needs by following suitable framework(pom) patterns. There are NO such rules which says that, strictly we should follow any framework.

NOTE: Framework is, to make our task easy, result oriented and effective

In your case, 1st one looks good and easy. And it does not leads to confusion or conflict while in maintenance phase of it.

Example: 1st case-> element locator's declaration happens at top of each page. It would be easy to change in case any element locator changed in future.

Whereas in 2nd case, locators declared in block level(scatter across the page). It would be a time taking process to identify and change the locators if required in future.

So, Choose which one you feel comfortable based on above points.