Page Objects in AngularJS Protractor E2E Testing

Question

What is the right way to handle the Page Objects model for writing Protractor E2E testing for AngularJS? I feel like I should write them in separate files (like homepage.js, page2.js, etc) then include somehow them into the specs like modules as need. However, I don't know how to inject them. Would appreciate any suggestions. Thanks!

Answer 1

Keep them in separate files, and use Node's require to pull in any helpers or page objects you need. Check out this super simple example: https://github.com/juliemr/ng-page-e2e/blob/master/test/angularsite_test.js#L2

Answer 2

Have you tried with astrolabe? It's a PageObject implementation on top of Protractor that could guide your structure: https://github.com/stuplum/astrolabe

There you can see that the recommended structure is one page object per file.

E.g.: singInPage.js

var Page = require('astrolabe').Page;

module.exports = Page.create({

   url: { value: 'http://<somesite>.com/signin' },

   username: { get: function() { return this.findElement(this.by.input('username')); } }, // finds an input element with the name 'username'
   submit:   { get: function() { return this.findElement(this.by.id('submit')); } }       // finds an element with the id 'submit'
});

it makes the writing of test cases and even page object very compact and readable.

Answer 3

You should keep them in separate files, yes.

And in your protractor referenceConf.js (config to launch protractor with) you should write:

specs: ['<your_path>/test/pages/*Test.js']

In this case< protractor will launch all files from dir "/test/pages" with mask *Test.js (loginPageTest.js, homePageTest.js)

Answer 4

I'm afraid that there's no common standards when it comes to testing with page objects. You could find several proposals among protractor's issues: https://github.com/angular/protractor/issues/401 and https://github.com/angular/protractor/issues/78

For my needs I created very simple page objects in my open source project, see: https://github.com/9ci/angle-grinder/pull/124

Also quite interesting implementation you could find in https://github.com/juliemr/ng-page-e2e/tree/master/test