17

The Question:

What is the canonical way to define nested Page Objects in Protractor?

Use Case:

We have a complicated page that consists of multiple parts: a filter panel, a grid, a summary part, a control panel on a side. Putting all the element and method definitions into a single file and a single page object does not work and scale - it is becoming a mess which is difficult to maintain.

3 Answers 3

10
+100

This is more of a general topic when it comes to Page Objects and how to maintain them. Sometime back I stumbled upon one of the Page Object Design Pattern techniques which I liked and made a lot of sense to me.

Rather than instantiating child page objects in the parent page objects, it would be ideal to follow javascript's Prototypal Inheritance concept. This has quite a number of benefits but first let me show how we can achieve it:

First we would create our parent page object ParentPage:

// parentPage.js
var ParentPage = function () {
// defining common elements
this.someElement = element(by.id("someid"));

// defining common methods
ParentPage.prototype.open = function (path) {
browser.get('/' + path)
}
}

module.exports = new ParentPage();  //export instance of this parent page object

We will always export an instance of a page object and never create that instance in the test. Since we are writing end to end tests we always see the page as a stateless construct the same way as each http request is a stateless construct.

Now let's create our child page objects ChildPage, we would use Object.create method to inherit the prototype of our parent page:

//childPage.js
var ParentPage = require('./parentPage')
var ChildPage = Object.create(ParentPage, {
/**
 * define elements
 */
username: { get: function () { return element(by.css('#username')); } },
password: { get: function () { return element(by.css('#password')); } },
form:     { get: function () { return element(by.css('#login')); } },
/**
 * define or overwrite parent page methods
 */
open: { value: function() {
    ParentPage.open.call(this, 'login'); // we are overriding parent page's open method
} },
submit: { value: function() {
    this.form.click();
} }
});
module.exports = ChildPage

we are defining locators in getter functions, These functions get evaluated when you actually access the property and not when you generate the object. With that you always request the element before you do an action on it.

The Object.create method returns an instance of that page so we can start using it right away.

// childPage.spec.js
var ChildPage = require('../pageobjects/childPage');
describe('login form', function () {
it('test user login', function () {
    ChildPage.open();
    ChildPage.username.sendKeys('foo');
    ChildPage.password.sendKeys('bar');
    ChildPage.submit();
});

Notice above that we are only requiring the child page object and utilizing/overriding parent page objects in our specs. Following are the benefits of this design pattern:

  • removes tight coupling between parent and child page objects
  • promotes inheritance between page objects
  • lazy loading of elements
  • encapsulation of methods and action
  • cleaner & much easier to understand the elements relationship instead of parentPage.childPage.someElement.click();

I found this design pattern in webdriverIO's developer guide, most of the above methods I explained are taken from that guide. Feel free to explore it and let me know your thoughts!

5
  • 1
    Thank you for the detailed answer. I'm still not sure prototypical inheritance is better for the nested page objects. We are using it in the project as well but where we need to inherit from common objects like - yes/no, confirmation dialogs, screens with a similar underlying element structure. In terms of readability, I look at parentPage.childPage.someElement.click(); as a good thing - in the example it might look bulky, but in real project it is, for example, queue.filters.refresh.click() - quite good - we immediately have an understanding where is this coming from..just thoughts.
    – alecxe
    Commented Dec 22, 2016 at 8:10
  • 1
    The other point is..I think there is even a logical confusion for me here - for us, the parent page represents a big screen, child pages represent parts of the screen - it is "one contains many". But, if we take it from inheritance perspective, it would mean sort of like a part inherits from the big screen..hope you understand what I mean. Thanks.
    – alecxe
    Commented Dec 22, 2016 at 8:14
  • 3
    In the article you have mentioned it states - "First off we need a main page object that we call Page. It will contain general selectors or methods all page objects will inherit from." I think it does not deal with a 'big' page containing components which can be reused across pages or having too much logic. Also not sure if inheritance reduce coupling at all. It actually makes it tightly coupled. Though prototype inheritance is not the same traditional inheritance concept as in java etc... Commented Dec 22, 2016 at 8:23
  • 1
    Sure, in your case readability of child page objects makes more sense. My idea was to instantiate page objects independently and use them in our scripts. Would it be good if we instantiate multiple page objects in a single page object? bcoz when you are calling them in the scripts that is how it looks, I am just trying to understand its benefits!
    – Ram Pasala
    Commented Dec 22, 2016 at 8:29
  • 1
    @RamPasala yeah, I guess these are two different ways to approach the problem. Would be interesting to know what the Protractor team would recommend in general. Thanks again for your insights!
    – alecxe
    Commented Dec 22, 2016 at 14:50
6

The idea is define the Page Object as a package - directory with index.js as an entry point. The parent page object would act as a container for child page objects which in this case have a "part of a screen" meaning.

The parent page object would be defined inside the index.js and it would contain all the child page object definitions, for example:

var ChildPage1 = require("./page.child1.po"),
    ChildPage2 = require("./page.child2.po"),

var ParentPage = function () {
    // some elements and methods can be defined on this level as well
    this.someElement = element(by.id("someid"));

    // child page objects
    this.childPage1 = new ChildPage1(this);
    this.childPage2 = new ChildPage2(this);
}

module.exports = new ParentPage();

Note how this is passed into the child page object constructors. This might be needed if a child page object would need access to the parent page object's elements or methods.

The child Page Object would look like this:

var ChildPage1 = function (parent) {
    // element and method definitions here
    this.someOtherElement = element(by.id("someotherid"));
}

module.exports = ChildPage1;

Now, it would be quite convenient to use this kind of page object. You simply require the parent page object and use the dot notation to get access to the sub page objects:

var parentPage = requirePO("parent");

describe("Test Something", function () {
    it("should test something", function () {
        // accessing parent
        parentPage.someElement.click();

        // accessing nested page object
        parentPage.childPage1.someOtherElement.sendKeys("test");
    });
});

requirePO() is a helper function to ease imports.


Sample nested page object directory structure from one of our test automation projects:

enter image description here

2
  • Trying to get to grips with protractor for a week and ready to shoot myself dealing with the async js and Promises, so your post is pretty helpful. 1) In the ParentPage constructor you are instantiating all the child page objects, is it acceptable to return the individual child page from the parent page method? The test spec will be calling the parent page method and get the child page object. 2) Is it a good idea to abstract common methods like waits to a base page object and assign it to the prototype of the other page objects. 3) Any pointers to links which makes sense of Promises. Thx Commented Dec 22, 2016 at 7:25
  • @Grasshopper 1) yeah, you can probably wrap getting the child page objects into method(s), should work just as well. 2) the more you abstract away, the more readable your tests would be (there is always too much to everything of course) 3) As far as promises in Protractor, please see protractortest.org/#/control-flow. Hope that helps and thanks!
    – alecxe
    Commented Dec 22, 2016 at 7:39
4

I don't use Protractor, but maybe you can try the idea below - at least, it's been working well for me so far:

I use something you can call "Component Object" - I divide a page into components or parts, and suppose I am given the scope of each component, I search and add elements to the components based on their scopes. This way, I can easily reuse the same/similar components in different pages.

For example, with the page http://google.com, I divide it into 3 parts: enter image description here Let's say we will name those 3 parts as: Header, SearchForm, Footer

The code for each part will be something like this:

class Header {
   public Header(SearchContext context){
       _context = context;
   }

   WebElement GmailLink {
       get {
           return _context.FindElement(By.CssSelector("[data-pid='23']"));
       }
   }
   WebElement ImagesLink {
       get {
           return _context.FindElement(By.CssSelector("[data-pid='2']"));
       }
   } 

   SearchContext _context;
}

class SearchForm{
   public Header(SearchContext context){
       _context = context;
   }

   WebElement SearchTextBox {
       get {
           return _context.FindElement(By.Name("q")):
       }
   }

   WebElement SearchButton {
       get {
           return _context.FindElement(By.Name("btnK")):
       }
   }

   SearchContext _context;
}
..

And the code for the page google.com will be like:

class GoogleComPage{
   WebDriver _driver;
   public GoogleCompage(driver){
       _driver = driver;
   }
   public Header Header{
       get {
           return new Header(_driver.FindElement(By.Id("gb")));
       }
   }

   public SearchForm SearchForm{
       get {
           return new SearchForm(_driver.FindElement(By.Id("tsf")));
       }
   }
}
4
  • 1
    Yeah, this is exactly what my answer is about - a parent page object acts like a "container" for sub page objects - components. Glad we have the same ideas. Thanks!
    – alecxe
    Commented Dec 27, 2016 at 15:44
  • Which difficulty do you have while implementing it then? Actually I do write in JavaScript too, but using theIntern, it works well. Commented Dec 27, 2016 at 19:49
  • No difficulties, just presented the approach we currently have working and needed a feedback. It appears that there is also a different solution based on inheritance.
    – alecxe
    Commented Dec 28, 2016 at 0:31
  • I see. With my automation, I do write UIMap (it's how I call it) for basic elements like a combobox, checkbox list, datepicker... A small component is a collection of those elements, and a bigger component is a collection of small components and basic elements too. Commented Dec 28, 2016 at 5:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.