Implement page-object pattern


So at this point, the context we would have before going with implementation is that we have read and got at least a fair idea on each of the following.

  1. What is page-object
  2. What is page-factory
  3. Modeling web pages into page-objects
  4. Page navigation (its dependency on page-object modeling)
  5. Road map and Future State (yes we need to align with this road map)
  6. Data-driven framework
  7. Keyword driven framework

Implement Workflow with page-object:

We will be implementing this workflow on automationpractice website. In a nutshell, we will be automating a shopping cart workflow, from sign in to purchase.


Generic Base Page:

Since all web pages have some commonalities, lets define that in a Generic Base Page. We create this under ‘lib/pages/generic_base_page.rb’

There are quite many methods in the above generic base page, however most of them are extra validation methods, that we did not use in this workflow example. When we get to a point, where we understand the framework better, we will revisit these methods. I will explain the key ones below, which we will use extensively.


Instead of declaring a method for every html element in a page-object (as we did before), let’s have a very generic way to define an element. The below method constructs the method once we specify the element and locate it in the page-object. This will be more clearer once we look at the page-objects. The method_missing addresses that part. Scroll below.


The initialize method as you can see connects to the “visit” method we talked on page-factory section. All it goes is assign the browser instance to @browser when the constructor is called.


page_url takes url as argument and just calls browser.goto, simple right.

Automation Home Page:

The sign_out link would appear after logging in, however we associate this element to the home page itself. We create this under ‘lib/pages/automation_home_page.rb’


Login Page:

Apart from elements on login page, I intend to login using data-driven framework concepts [data-helper], hence we have the methods login and login_yml. Once we write the cucumber scenario, it will connect the dots, please bear with me here.

We create this under ‘lib/pages/login_page.rb’


Let’s write Cucumber scenario

With the above two page-objects i.e. AutomationHomePage and LoginPage, let’s write a very simple cucumber scenario before we start building out the entire workflow. MVP, thin slice, whatever we call in Agile world right 😉

Overall Project structure:

The overall project structure should look like this now:

The files we should be interested in at this point are:

  1. login.feature (the above cucumber code)
  2. shopping_card.rb (step_definitions)
  3. default.yml (The second scenario uses data from this file)
  4. automation_home_page.rb (home page-object)
  5. generic_base_page.rb (generic page-object)
  6. login_page.rb (login page-object)
  7. data_helper.rb (what we learnt in data driven framework to parse data)


Let’s Execute:

From RubyMine:

Right click on the page and click Run as shown in the below picture


The output should be like this. Both scenarios should pass



From Command line:



Take a Break:

Guys, if you have reached this point and see the same output as is displayed on this page, pat yourself on the back. We have pretty touched all the points on a Hybrid framework here.

It is a thin slice we have built all the way end-end. We will cover more scenarios and build the entire shopping cart experience. Below is a video of the execution

Project Code base:

The entire project code base is on my github: page-object_framework


Lets continue the workflow of selecting a product, checking out and so on, until we purchase it right.

page-object pattern - login scenario