Implement Page Object Pattern

Pre-Requisites

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.

We will also be using the code base – https://github.com/machzqcq/CucumberJVMExamples (cucumberjvm-selenium-pageobject)
  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.

workflow

Generic Base Page:

Since all web pages have some commonalities, lets define that in a Generic Base Page. We create this under ‘src/test/java/pageobjects/BaseClass.java’

All we  are doing here is a Base Class that every page object would extend from. It has a static WebDriver, which is the handle to the current browser instance [At some point when we implement DI ,we will remove the static, but for now this model works for all our examples]. The bResult is not being used at this point, it is just a flag to set the test case pass or fail at global level [I have used this in TestNG framework and let it remain here]

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 ‘src/test/java/pageobjects/AutomationHomePage.java’

automation_home_page

Login Page:

We create this under ‘src/test/java/pageobjects/LoginPage.java’

login_page

Contact us Page:

We create this under ‘src/test/java/pageobjects/ContactusPage.java’

contact_us_page

Let’s write Cucumber scenario

With the above three page-objects i.e. AutomationHomePage, LoginPage,ContactusPage 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 ;)

Step Definitions

 

Overall Project Structure

selenium-page-object-project-structure

Let’s Execute:

From IntelliJ:

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

 

selenium-page-object-execute

The output should be like this. Both scenarios should pass

selenium-page-object-intellij_output

Command line output

selenium-page-object-cmd_output

CI Server Output

selenium-page-object-ci_server_output

selenium-page-object-ci_server_output1

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.

Project Code base:

The entire project code base is on my github: https://github.com/machzqcq/CucumberJVMExamples

Next:

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