What is page-object/ Page Object?

Context:

When we interact with web pages on a browser and have to interact with an element on the page, we find the element using selenium api (remember find elements section) and perform an operation on it. The concept of page object is to be able to have the element initialized by the time we want to interact with it, so that we don’t have to dig into the DOM every time we need to interact with it.

The concept looks awesome and one might think – well, then all I have to do is to create a class, have the html elements as its members and probably have some methods of the class as keywords [yes the same keywords we talked in keyword driven framework]. And yes, that is where we will start ! This section falls under the category of selenium framework

Synchronous applications:

Modeling a page-object on synchronous applications is easier because the page-object represents the underlying html source of the web page. So for example, if the web page is fully loaded into the DOM, then our page-object [once initialized] will represent the web page and all we need to do is to call the members of the page-object and interact with it [vs. trying to locate the element before we interact with it]

Asynchronous applications:

However, some of us who already know this would question – well, that is not as easy on asynchronous applications [yes the ajax calls]. That is correct too ! Asynchronous calls have to be dealt with extreme care and we will talk about some strategies to have listeners [callbacks] that will make our life a tad bit easier. At the end of this block of sections on page-object frameworks, we will talk about the caveats, misconceptions and assumptions that most of us have around page-object frameworks and how “trappy” [not sure if that is a word] it is to think implementing a page-object framework that aligns with the our overall goal of framework is extremely easy [the goal being model the state and behavior of an application]

That said, lets go ahead start with some basics, implement a model and then refactor it and then talk about more exceptions to rules right 😉

Agenda:

The agenda topic span across multiple pages, but will remain under the section page object framework in the menu on the left. So please navigate to the next page once you reach the bottom of this page.

  1. Define a page-object
  2. Define page factory
  3. A concrete workflow
  4. Modeling page-objects
  5. Implement page factory pattern
  6. Dealing with asynchronous web applications
  7. Caveats and closing thoughts

Define page-object

Coming back to our discussion on page-object, let’s say I want to represent the home page for seleniumframework website. The page looks as below:

seleniumframework_home

HTML elements:

Email element:

The email link in the top bar has an html as shown below. It has class=”email”

email_element

Address element:

Similarly in the above picture, we have address element which has class=”address”.

Phone element:

Similarly in the above picture, we have phone element which has class=”address”.

seleniumframework home page-object:

So if we go ahead and represent this as a class, it might look something as below.

This represents the page-object for seleniumframework home page.

  • We create a class
  • The constructor (initialize method) initializes the elements
  • The getter methods return the corresponding elements [some of us want to jump ahead here and say we have attr_reader, attr_writer and attr_accessor methods in ruby right ! Yes that is correct, but that is not the focus of this discussion here, you can feel free to use them however]

Obviously this is not the most mature way to represent the page-object, however I believe you get the idea here.

Consuming page-object:

So how do we consume a page-object. An extremely simple way is to instantiate the page-object in the calling code and access the elements, for example:

 

Next:

So we have seen how to implement an extremely easy page-object pattern here where we represented the home page. This way, we can go ahead and represent the web pages with page-objects and use them in step definitions and interact with them. Is it so simple ?

Well, the understanding of the pattern is pretty much what we discussed here, there are of course more nuances such as the following:

  1. Do I initialize the elements in the constructor always ?
  2. How many times do I initialize the page-objects if it is being used in multiple step definitions [calling code]
  3. The “@” symbols doesn’t look really pretty as they keep growing in number – is there a way to abstract that since seems like we are repeating the code
  4. We know that there are some commonalities across all web pages – For example , the @browser object [selenium/watir webdriver object] applies to all web pages. Can I abstract it out ? Can I declare a base page? Can all my web pages inherit from base page ?

All of the above questions are valid and there are more. Let’s take it step by step and by the end this tutorial on page-object framework, I am sure you will appreciate some patterns we talk about here.