Modeling Page Objects

So far, we discussed about…

  1. What is page-object model/framework
  2. What is page-factory

We saw an implementation module for page-factory and saw how step definitions would look more elegant and much less code and readability. In this section, we are going to talk about how to model a web page into a page-object [aka. the ruby class for example, the AutomationHomePage we discussed in the above links]

How to Model?

There is no single answer aka. one size fits all answer for this question. However, I would emphasize this point that your automation tests would run smoothly to the extent on how “good” you have modeled your page-objects and the navigation between the page-objects.

One one-hand we can define a class and then have every html element on this page as a member of this class

On the other hand, I can define every html element as a page-object itself [aka class] 

page-object modeling

Let’s talk about modeling the automationpractice website home page.


Here we represent the top bar elements as members of the page-object and we also represent the header elements i.e. women menu and sub menu item “summer dresses”. You can see that we have represented all elements inside one page-object



We can also make header menu, a page-object as there is a menu and sub-menu underneath the header, that means there is a nested hierarchy of html elements. Also since header, footer and some common blocks on page will exist on every web page, we can separate them out into page-objects themselves.


Page Navigation:

Let’s talk briefly on the navigation between page-objects concept. We have already alluded to this that our automation framework should model the application state and behavior. To an extent, the “state” is being captured by the page-objects, but what about behavior?

Behavior encompasses multiple aspects like page-object state transition between navigation and user operations, events like page-refresh etc. Anyways, for now, lets talk about page navigation.

Page Navigation and interacting with state of application is relatively straight-forward with synchronous web applications. However, it gets a little tricky with asynchronous web applications. There are multiple strategies on handling this behavior. We talked extensively about handling this in two sections as below. Please revise the concepts once again as the conversation on this builds on top of that understanding.

I went ahead and made a video below that extends the concept further making it applicable to page-object pattern. Please watch this video at the end of this page.



On this page, we talked about to model page-objects and how important it is to align with the state and behavior of the application, otherwise we end up in a whole bunch of flaky scripts.

We also talked about Page Navigation and how it is inter-related to modeling page-objects

If there is one summary line for this page, then it is

The better we model the web pages into page-objects, the less flakier our scripts are

Next we will talk about a concrete workflow and build page-objects and use the page-factory pattern to automate the entire workflow.