Part 1: Page Object Model…

Page Object Model or POM is a design concept that is used to make the code more cleaner and easier to maintain. So far we have included all our test case logic and page elements in a single class file. As our test coverage increases, any change in page elements will result in the maintenance of all class files wherever the elements are used. This makes our code harder to maintain. Page Object Model design pattern overcome this problem by separating the test code and page specific code such as locators and reusable methods in different class files.

In this post we will create a new Java Project using TestNG. We will implement Page Object Model design pattern in our framework to complete one flight booking in New Tours web site.

Test Case:

• Navigate to http://newtours.demoaut.com website and login.
• Select an itinerary and complete the booking.
• Log out and close the browser.

Even though there are only three steps in our test case but in actual we will navigate through five different pages to complete our test. They are:

• Home Page or Login Page
• Flight Finder Page
• Select Flight Page
• Book Flight Page
• Flight Confirmation Page

New Project Creation:

We will create a new Java Project for this exercise. Let’s get started.

1. Launch Eclipse. Create a new Java Project by clicking on File -> New -> Java Project. Name the Java Project as ‘NewTour’. Click Next and then Finish to complete the project creation. Once the project is created, we will have ‘src‘ folder and ‘JRE System Library‘ by default.

   

2. Next step is to add the Selenium Jars. Right Click on the project name and click Properties. Click on Java Build Path -> Add External Jars. Go to the local folder where ‘selenium-server-standalone-3.0.1’ is saved. We will be using 3.0.1 version from our last project. Add the Jar and click OK to close the window. Once complete, we will see ‘Referenced Libraries‘ included in our project.

   

3. Next step is to add the Chrome Driver. Right click on the project name and click New -> Folder. Give the folder name as ‘Chrome’ and click Finish to close the window. Now place the Chrome driver that we already downloaded in our last project into the ‘Chrome’ folder.

   

4.  Next step is to add the TestNG libraries into our project. Right click on the project ‘FrameworkDesign’ and click Properties -> Java Build Path -> Add Library. In Add Library window, select TestNG and click on Next. Click on Finish to add the TestNG Library. Click OK to close the Properties window.

   

5. Right click on the ‘src’ folder and click New -> Package. Name the package as ‘com.selenium.pages’ and click Finish to close the window. This is where we will place our page specific code and their methods.

Page Object Model:

We will now create class files for each of the five pages.

1. Right click on ‘com.selenium.pages’ package and click New -> Class. Name the class as ‘HomePage’. In this class we will place Home Page element locators and methods. Click Finish to close the window. Notice that we will not require static main method in any of our class files.
2. This is how our Home Page looks like. Notice that we have three elements that need to be located.

   

3. Copy the below code and paste into ‘HomePage’ class. Notice how the page specific Element locator code and method are written. The method takes two parameters and has a return type object of ‘FlightFinderPage’.

   package com.selenium.pages;
   
   import org.openqa.selenium.By;
   import org.openqa.selenium.WebDriver;
   
   public class HomePage {
   	//Declare WebDriver
   	WebDriver driver;
   	//Element Locators
   	 By userName = By.name("userName");
   	By password = By.name("password");
   	By loginButton = By.name("login");
      
   	//Constructor. Driver Initialization
   	public HomePage(WebDriver driver) {
   		this.driver = driver;
   	}
   
   	// Login method
   	public FlightFinderPage loginUser(String uname, String pwd) {
   		// Enter username
   		driver.findElement(userName).sendKeys(uname);
   		// Enter password
   		driver.findElement(password).sendKeys(pwd);
   		// Click Login button
   		driver.findElement(loginButton).click();
   		/*
   		 * return type of this method is a new object to next          page	 */
   		return new FlightFinderPage(driver);
   	}
   }
   

4. We will create a second class for our next page. Once the login is successful, we will be taken to Flight Finder Page. Flight Finder page has many elements. For now we will be concentrating on ‘One Way’, ‘Departing From’, ‘On Date’ and ‘Continue’ elements. Below is how our Flight Finder page looks like.

   

5. Right click on ‘com.selenium.pages’ package and click New -> Class. Name the class as ‘FlightFinderPage’. In this class we will place Flight Finder Page element locators and methods. Click Finish to close the window. Once done, copy the below code and paste into ‘FlightFinderPage’ class. Notice that the layout is similar to ‘HomePage’ class. We have one method that takes two parameters and has a return type object of ‘SelectFlightPage’ class.

   package com.selenium.pages;
   
   import org.openqa.selenium.By;
   import org.openqa.selenium.WebDriver;
   import org.openqa.selenium.support.ui.Select;
   
   public class FlightFinderPage {
   
   	//Declare WebDriver
   	WebDriver driver;
   	//Element Locators
   	 By onewayRadio = By.xpath("//input[@value='oneway']");
   	By fromPortDrop = By.name("fromPort");
   	By fromDayDrop = By.name("fromDay");
   	By businessRadio = By.xpath("//input[@value='Business']");
   	By findFlightsButton = By.name("findFlights");
   
           //Constructor. Driver Initialization
   	public FlightFinderPage(WebDriver driver) {
   		this.driver = driver;
   	}
   
   	public SelectFlightPage findFlights(String departFrom, String departDate) {
   		// Click one way radio button
   		driver.findElement(onewayRadio).click();
   		// Select Departing From dropdown
   		Select dropFrom = new Select(driver.findElement(fromPortDrop));
   		dropFrom.selectByValue(departFrom);
   
   		// Select Departing Day dropdown
   		Select dropDay = new Select(driver.findElement(fromDayDrop));
   		dropDay.selectByValue(departDate);
   
   		// Click business class
   		driver.findElement(businessRadio).click();
   
   		// Click Find Flights button
   		driver.findElement(findFlightsButton).click();
   
   		/*
   		 * return type of this method is a new object to next page
   		 */
   		return new SelectFlightPage(driver);
   	}
   }
   

6. From Flight Finder page we will be taken to Select Flight page. Next step is to create a class file for Select Flight page. We will go with the default selection of flights and click continue to go to next page. Below is how our Select Flight page looks like.

   

7. Right click on ‘com.selenium.pages’ package and click New -> Class. Name the class as ‘SelectFlightPage’. In this class we will place Select Flight Page element locators and methods. Click Finish to close the window. Once done, copy the below code and paste into ‘SelectFlightPage’ class. Notice that we have only one method that takes no parameters and has a return type object of ‘BookFlightPage’ class.

   package com.selenium.pages;
   
   import org.openqa.selenium.By;
   import org.openqa.selenium.WebDriver;
   
   public class SelectFlightPage {
   
   	//Declare WebDriver
   	WebDriver driver;
   	//Element Locators
   	By reserveFlightsButton = By.name("reserveFlights");
           
           //Constructor. Driver Initialization
   	public SelectFlightPage(WebDriver driver) {
   		this.driver = driver;
   	}
   
   	// Reserve Flight method
   	public BookFlightPage reserveFlight() {
   		// Click reserve Flights button
   		driver.findElement(reserveFlightsButton).click();
   		/*
   		 * return type of this method is a new object to next page
   		 */
   		return new BookFlightPage(driver);
   	}
   }
   

8. From Select Flight page we will navigate to Book Flight page. We will create a class file for Book Flight page. Although Book Flight page has many elements but we will be concentrating on ‘First Name’, ‘Last Name’ and ‘Number’ elements. Below is how our Book Flight page looks like.

   

9. Right click on ‘com.selenium.pages’ package and click New -> Class. Name the class as ‘BookFlightPage’. In this class we will place Book Flight Page element locators and methods. Click Finish to close the window. Once done, copy the below code and paste into ‘BookFlightPage’ class. Notice that we have only one method that take three parameters and has a return type object of ‘FlightConfirmationPage’.

   package com.selenium.pages;
   
   import org.openqa.selenium.By;
   import org.openqa.selenium.WebDriver;
   
   public class BookFlightPage {
   
   	//Declare WebDriver
   	WebDriver driver;
   	//Element Locators
   	 By firstNameTextBox = By.name("passFirst0");
   	By lastNameTextBox = By.name("passLast0");
   	By ccNumberTextBox = By.name("creditnumber");
   	By buyFlightsButton = By.name("buyFlights");
   
   	//Constructor. Driver Initialization
   	public BookFlightPage(WebDriver driver) {
   		this.driver = driver;
   	}
   
   	public FlightConfirmationPage bookFlight(String fname, String lname, String ccNumber) {
   		// Enter first name
   		driver.findElement(firstNameTextBox).sendKeys(fname);
   		// Enter last name
   		driver.findElement(lastNameTextBox).sendKeys(lname);
   		// Enter credit card number
   		driver.findElement(ccNumberTextBox).sendKeys(ccNumber);
   		// Confirm purchase
   		driver.findElement(buyFlightsButton).click();
   		/*
   		 * return type of this method is a new object to next page
   		 */
   		return new FlightConfirmationPage(driver);
   	}
   }
   

10. Finally we will create one more class file for Flight Confirmation page. We will verify the confirmation message by using Assert statement and then log out from the page. Below is how our Flight Confirmation page looks like.

    

11. Right click on ‘com.selenium.pages’ package and click New -> Class. Name the class as ‘FlightConfirmationPage’. In this class we will place Flight Confirmation Page element locators and methods. Click Finish to close the window. Notice that we have only one method that takes no parameters and has no return type. This is because our test case ends here and we don’t have any other page to navigate. Copy the below code and paste into ‘FlightConfirmationPage’ class.

    package com.selenium.pages;
    
    import org.openqa.selenium.By;
    import org.openqa.selenium.WebDriver;
    import org.testng.Assert;
    
    public class FlightConfirmationPage {
    
    	//Declare WebDriver
    	WebDriver driver;
    	//Element Locators
    	 By confirmationText = By.xpath("//font[contains(text(),'Confirmation')]");
    	By logOutButton = By.xpath("//img[@src='/images/forms/Logout.gif']");
    
    	//Constructor. Driver Initialization
    	public FlightConfirmationPage(WebDriver driver) {
    		this.driver = driver;
    	}
    
    	//Verify and Log out method
    	public void clickLogOut() {
    		// Assert if Confirmation text is displayed
    		Assert.assertTrue(driver.findElement(confirmationText).isDisplayed());
    		// Click Logout button
    		driver.findElement(logOutButton).click();
    	}
    }
    

12. This is how our Project structure looks like. We have successfully implemented Page Object Model in our framework. We created five class files for five different pages and each class file have its own page specific code.

    

We will continue with test case creation using TestNG in our next post. Till then, Happy Learning!