javascript - Canonical way to define page objects in Protractor -

we've been using page object pattern quite while. helps organize end-to-end tests , makes tests more readable , clean.

as using page objects organize tests protractor documentation page shows us, defining every page object function , use new "instantiate" it:

"use strict";  var headerpage = function () {     this.logo = element(by.css("div.navbar-header img")); }  module.exports = headerpage; 

usage:

"use strict";  var headerpage = require("./../po/header.po.js");  describe("header , feel", function () {     var header;      beforeeach(function () {         browser.get("/#login");         header = new headerpage();     });      it("should show logo", function () {         expect(header.logo.isdisplayed()).tobe(true);     });  }); 

but, in protractor: angular testing made easy google testing blog post, i've noticed page object defined object:

var angularhomepage = {     nameinput : element(by.model('yourname')),     greeting : element(by.binding('yourname')),     : function() {         browser.get('index.html');     },     setname : function(name) {         this.nameinput.sendkeys(name);     } }; 

what difference between these 2 ways introduce page objects? should prefer 1 against other?

ultimately, think question of personal preference.

yes, can use constructor pattern , instantiate singleton in each test suite... yes use simple object literal above... yes use factory function...

structuring code using inheritance via "classes" (whether pseudo- or es2015 syntax) vs objects extended via mixins wider debate within application development in general, never mind e2e tests!

the main thing clear, consistent practice across test suites , promoting code reusability wherever possible.