Page Object Model concept in Testing Fundamentals - Full Explanation

Introduction

Testing web applications can get messy when test code mixes with page details. This makes tests hard to read and maintain. The Page Object Model helps organize tests by separating page structure from test logic.

Explanation

Separation of Concerns

Page Object Model (POM) separates the code that interacts with the web page from the test code. It creates a class or object for each page that contains methods to interact with page elements. This keeps tests clean and focused on behavior, not page details.

POM keeps page details separate from test logic to improve clarity and maintenance.

Page Classes

Each web page or part of a page is represented by a class or object. This class holds locators for elements like buttons and fields, and methods to perform actions like clicking or typing. Tests use these classes instead of raw selectors.

Page classes encapsulate element locators and actions for a specific page.

Reusability and Maintainability

If the page changes, only the page class needs updating, not every test. This reduces duplicated code and makes tests easier to maintain. It also allows reusing page classes across multiple tests.

POM improves test maintainability by centralizing page changes in one place.

Improved Readability

Tests become easier to read because they use meaningful method names like loginPage.enterUsername() instead of raw selectors. This makes tests more understandable for anyone reading them.

POM makes tests more readable by using clear, descriptive methods.

Real World Analogy

Imagine a restaurant kitchen where chefs have a recipe book. The recipe book tells them exactly how to prepare each dish without needing to know where every ingredient is stored. If the kitchen layout changes, only the recipe book needs updating, not the chefs' cooking steps.

Separation of Concerns → Chefs focusing on cooking steps, not ingredient storage details

Page Classes → Recipe book pages describing how to prepare each dish

Reusability and Maintainability → Updating the recipe book when kitchen layout changes, not the cooking steps

Improved Readability → Clear recipe instructions that anyone can follow easily

Diagram

Diagram

┌───────────────┐       uses       ┌───────────────┐
│   Test Code   │──────────────────▶│  Page Object  │
└───────────────┘                   └───────────────┘
                                      │       ▲
                                      │       │
                           contains   │       │  encapsulates
                                      ▼       │
                              ┌───────────────┐
                              │ Page Elements │
                              └───────────────┘

Diagram showing test code using page objects which encapsulate page elements.

Key Facts

Page Object Model → A design pattern that separates web page structure from test code by using page classes.

Page Class → A class representing a web page with element locators and interaction methods.

Locator → A way to find elements on a web page, like by ID, class, or XPath.

Test Maintainability → The ease with which test code can be updated and kept working over time.

Reusability → Using the same code components in multiple tests without duplication.

Code Example

Testing Fundamentals

class LoginPage:
    def __init__(self, driver):
        self.driver = driver
        self.username_input = 'id=username'
        self.password_input = 'id=password'
        self.login_button = 'id=loginBtn'

    def enter_username(self, username):
        self.driver.find_element(self.username_input).send_keys(username)

    def enter_password(self, password):
        self.driver.find_element(self.password_input).send_keys(password)

    def click_login(self):
        self.driver.find_element(self.login_button).click()

# Test code example
login_page = LoginPage(driver)
login_page.enter_username('user1')
login_page.enter_password('pass123')
login_page.click_login()

Common Confusions

Believing Page Object Model means writing tests inside page classes.

Believing Page Object Model means writing tests inside page classes. Page classes only contain page details and actions; test logic stays separate in test files.

Thinking POM eliminates the need to understand selectors.

Thinking POM eliminates the need to understand selectors. Selectors are still needed but are centralized inside page classes for easier management.

Summary

Page Object Model organizes test code by separating page details into page classes.

It improves test readability and makes maintenance easier by centralizing page changes.

Tests interact with page classes through clear methods, not raw selectors.

Practice

1. What is the main purpose of the Page Object Model in software testing?

easy

A. To combine multiple test cases into one large script

B. To write all test steps inside the test script without abstraction

C. To separate page structure from test logic for easier maintenance

D. To avoid using classes and methods in test automation

Solution

1. Step 1: Understand the role of Page Object Model

   The Page Object Model (POM) is designed to separate the page details like locators and actions from the test scripts.

2. Step 2: Identify the benefit of separation

   This separation makes tests easier to read, write, and maintain because changes in the UI only affect the page objects, not the test logic.

3. Final Answer:

   To separate page structure from test logic for easier maintenance -> Option C

4. Quick Check:

   Separation of concerns = A [OK]

Hint: POM separates page details from tests for easy updates [OK]

Common Mistakes:

• Thinking POM combines all tests into one script
• Believing POM avoids using classes and methods
• Confusing POM with writing test steps directly in scripts

2. Which of the following is the correct way to define a page object class for a login page in Python?

easy

A. class LoginPage:
def __init__(self, driver):
self.driver = driver

B. def LoginPage(driver):
self.driver = driver

C. class LoginPage:
driver = driver

D. LoginPage = function(driver) { this.driver = driver; }

Solution

1. Step 1: Check Python class syntax for page object

   In Python, a page object is a class with an __init__ method that accepts the driver and assigns it to self.driver.

2. Step 2: Identify correct syntax

   class LoginPage: def __init__(self, driver): self.driver = driver correctly defines a class with __init__ and assigns driver properly. Options A, B, and D have syntax errors or misuse of class variables. LoginPage = function(driver) { this.driver = driver; } is JavaScript syntax, not Python.

3. Final Answer:

   class LoginPage: def __init__(self, driver): self.driver = driver -> Option A

4. Quick Check:

   Python class with __init__ = C [OK]

Hint: Python page objects use class with __init__ for driver [OK]

Common Mistakes:

• Using function instead of class for page object
• Assigning driver outside __init__ method
• Mixing JavaScript syntax in Python code

3. Given this Python page object method, what will login_page.get_title() return if the page title is "Welcome"?

class LoginPage:
    def __init__(self, driver):
        self.driver = driver
    def get_title(self):
        return self.driver.title

medium

A. "Welcome"

B. self.driver

C. None

D. Error: method missing return

Solution

1. Step 1: Understand the get_title method

   The method returns self.driver.title, which is the page title property from the driver object.

2. Step 2: Determine the returned value

   If the page title is "Welcome", calling get_title() returns the string "Welcome".

3. Final Answer:

   "Welcome" -> Option A

4. Quick Check:

   Method returns driver.title = "Welcome" [OK]

Hint: Method returns driver.title property value [OK]

Common Mistakes:

• Confusing method return with driver object itself
• Assuming method returns None without explicit return
• Thinking method causes error due to missing return

4. Identify the error in this page object method and select the fix:

class LoginPage:
    def __init__(self, driver):
        self.driver = driver
    def click_login(self):
        self.driver.find_element_by_id('loginBtn').click()

medium

A. Change method name to clickLogin

B. Use correct locator method: replace find_element_by_id with find_element(By.ID, 'loginBtn')

C. Remove self.driver assignment in __init__

D. Add return statement after click()

Solution

1. Step 1: Check Selenium locator method usage

   In recent Selenium versions, find_element_by_id is deprecated. The correct usage is find_element(By.ID, 'loginBtn') with proper import.

2. Step 2: Identify the fix

   Use correct locator method: replace find_element_by_id with find_element(By.ID, 'loginBtn') correctly updates the locator method. Other options do not fix the locator error or are unrelated.

3. Final Answer:

   Use correct locator method: replace find_element_by_id with find_element(By.ID, 'loginBtn') -> Option B

4. Quick Check:

   Update deprecated locator method = D [OK]

Hint: Use updated Selenium locators with By.ID [OK]

Common Mistakes:

• Ignoring deprecated locator methods
• Adding unnecessary return statements
• Changing method names without reason

5. You want to create a page object for a search page that has a method to enter text and submit the search. Which design best follows the Page Object Model principles?

hard

A. class SearchPage:
def __init__(self):
self.driver = None
def search(self, text):
self.driver.find_element(By.ID, 'searchBox').send_keys(text)

B. class SearchPage:
def search(self, text):
input = driver.find_element(By.NAME, 'q')
input.send_keys(text)
input.submit()

C. def search(text):
driver.find_element(By.NAME, 'q').send_keys(text)
driver.find_element(By.NAME, 'q').submit()

D. class SearchPage:
def __init__(self, driver):
self.driver = driver
def search(self, text):
box = self.driver.find_element(By.NAME, 'q')
box.clear()
box.send_keys(text)
box.submit()

Solution

1. Step 1: Check for proper driver initialization

   class SearchPage: def __init__(self, driver): self.driver = driver def search(self, text): box = self.driver.find_element(By.NAME, 'q') box.clear() box.send_keys(text) box.submit() correctly initializes the driver in __init__, so the page object has access to it.

2. Step 2: Verify method encapsulates actions

   The search method finds the input box, clears it, sends keys, and submits, all encapsulated in one method, following POM principles.

3. Final Answer:

   class SearchPage: def __init__(self, driver): self.driver = driver def search(self, text): box = self.driver.find_element(By.NAME, 'q') box.clear() box.send_keys(text) box.submit() -> Option D

4. Quick Check:

   Driver init + encapsulated method = A [OK]

Hint: Initialize driver in __init__ and encapsulate actions in methods [OK]

Common Mistakes:

• Not initializing driver in constructor
• Using global driver without passing it
• Splitting one action into multiple unrelated methods