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!

Abubekr

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

Chally

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.

Cosmo

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)

Aaron

Unfortunately I didn't know yet, how to launch tests in single file without changing 'specs' in config. Also, if you want to debug tests in IDE, this post may be helpfull: How to debug protractor's tests in Webstorm – Aaron

I discovered last night as I tried to implement this that you can't include page objects in the specs like this. Each file is run independently of the others. I ended up building a system around node's require. – Abubekr

@Abubekr I have a similiar problem here. can you please show me what you did to solve the problem? – Hathcock

@shimu The way I ended up setting this up was using require(). The example posted by Jmr is great. I also came across this project github.com/stuplum/astrolabe that you could use. I ended up creating my own model though - it's not terribly hard. – Abubekr

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

Agitprop