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!

score 21 · Accepted Answer · answered Dec 12 '13 at 19:40

21

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

answered Dec 12 '13 at 19:40

Jmr

12,078
4
39
33

score 4 · Answer 2 · answered Feb 23 '14 at 16:02

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.

score 0 · Answer 3 · answered Dec 12 '13 at 07:30

0

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)

answered Dec 12 '13 at 07:30

S Panfilov

16,641
17
74
96

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](http://stackoverflow.com/questions/20137109/how-to-debug-angular-protractor-tests-in-webstorm) – S Panfilov Dec 12 '13 at 07:35
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. – wlingke Dec 12 '13 at 14:54
@wlingke I have a similiar problem here. can you please show me what you did to solve the problem? – Shimu Dec 12 '13 at 18:33
1

@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 https://github.com/stuplum/astrolabe that you could use. I ended up creating my own model though - it's not terribly hard. – wlingke Dec 12 '13 at 19:44

score 0 · Answer 4 · answered Feb 19 '14 at 11:14

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

Page Objects in AngularJS Protractor E2E Testing

4 Answers4