Page Object Model in Selenium

What is the Selenium Page Object model?

If you are working with Selenium Webdriver (or you are just learning selenium webdriver) you probably faced the challenge of having to interact with different web or mobile elements in your tests cases.

The selenium page object model allows you to model an application by storing the elements in different classes.

Each one of the classes represents a page or screen on the application under test.

Page Object Model in Selenium

Page Object Model example:

To put it in a more graphic way, let me show an example:

Suppose that you need to test an application that allows you to:

  1. Log in
  2. Follow people,
  3. Post a message of no more than 140 characters.

Now, imagine the following 2 test cases:

<strong>Scenario</strong>: Follow someone new
<strong>Steps</strong>:

Given I am on the application home page
And I login using my credentials
Then I should me able to follow someone
<strong>Scenario</strong>: Post a new Twip
<strong>Steps</strong>:

Given I am on the application home page
And I login using my credentials
Then I should me able to post a message under 140 characters

As you can see, the first two steps are shared between both test cases, so when we start coding them we use to do something like this:

Test 1:

driver.get("https://twipper.com");
driver.findElement(By.className("username")).sendKeys("santius");
driver.findElement(By.className("password")).sendKeys("mypass");
driver.findElement(By.className("button")).click();
... rest of the test
Test 2:

driver.get("https://twipper.com");
driver.findElement(By.className("username")).sendKeys("santius");
driver.findElement(By.className("password")).sendKeys("mypass");
driver.findElement(By.className("button")).click();
... rest of the test

Both have the same logic at the beginning, they share the same code and they interact with the same elements on the screen. This is a problem because application flows can change, and elements on screen may vary over time, and if we have several test cases sharing the same elements and flows, then we have to update each one of them with the correct values and logic.

To solve this problem, we have the Page Object design pattern. A design pattern is a convention that make things easier for us, defining how things must be done for us.

The page object pattern divides the pages for screens so our application and implements them into different classes that encapsulate the interactions with the different elements in the screen.

Page Object Model: Login Page example

public class loginPage extends BasePage {

	public loginPage(WebDriver driver) {
		super(driver);
		driver.get("http://twipper.com");
	}

	@FindBy(id = "username")
	private WebElement username;

	@FindBy(id = "password")
	private WebElement password;

	@FindBy(id = "buttonContinue")
	private WebElement buttonContinue;

	public mainPage login(String user, String pass) {
		username.sendKeys(user);
		password.sendKeys(pass);
		buttonContiinue.click();
		return new mainPage(getDriver());
	}
}

Now, every time that we create an object using this class, we can just call the login method on our tests and it will return a new page, the main page, to interact with.

Page Object Model: Test case example

public void test1() {
	loginPage = new loginPage();
	MainPage mainPage = loginPage.login('santius', 'mypass');
	mainPage.doSomething();
}

public void test2() {
	loginPage = new loginPage();
	MainPage mainPage = loginPage.login('santius', 'mypass');
	mainPage.doSomethingElse();
}

Now, if anything on our page changes, we just need to update the elements or flow on our classes, and our test cases will be fixed as they share the same classes.

What are the advantages of Page Model Model?

  • It reduces the code duplication
  • Is easier to maintain
  • Promotes code reusability
  • Has a clean separation between test logic and locators
  • Offers a single repository for services provided by the page objects

Leave a Comment

Scroll to Top