Implementing Page Object Model (POM) in Test Automation

In the world of test automation, ensuring your tests are easy to read, maintain, and scale is essential for long-term success. One popular design pattern that helps achieve this is the Page Object Model (POM). In this blog, we’ll explore what POM is, why it’s important, and how to implement it step by step in a layman-friendly way.

What is the Page Object Model (POM)?

The Page Object Model is a design pattern in test automation where each web page (or a distinct section of a web page) is represented as a class in the code. These classes act as a layer that abstracts the complexities of the web page, such as locators and interactions, making test scripts cleaner and easier to maintain.

Think of POM as creating a blueprint for each web page in your application. Instead of writing raw locators and actions directly in your test cases, you define them in the page class. Your tests then call the methods from these classes to interact with the application.

Why Use POM in Test Automation?

• 1.Improved Readability: Test scripts are easier to read and understand since the code focuses on the logic of the test rather than the technical details of the UI.
• 2.Ease of Maintenance: Changes to the UI (e.g., updated locators or new elements) need to be updated only in the respective page object class, not across multiple test cases.
• 3.Reusability:Common actions (like logging in, clicking a button, or entering data) can be reused across multiple tests, reducing redundancy. Using these common actions in your test scripts will be the best practice to streamline test development and ensure consistency.
• 4.Modularize Common Actions: If multiple pages share actions (e.g., navigation), create a base page class with shared methods and use it in the tests
• 5.Scalability: As your application grows, POM allows you to scale your tests efficiently by adding new page classes and methods.

Key Components of POM

• 1.Page Classes:Represent a web page or component. These classes contain locators (e.g., CSS selectors, XPath) and methods to interact with the elements.
• 2.Locators: Unique identifiers for web elements (e.g., buttons, input fields).
• 3.Methods:Actions that can be performed on the web elements, such as click(),enterText() , or isDisplayed().
• 4.Test Scripts:Separate from the page classes, these scripts use methods from the page classes to execute test scenarios

Step-by-Step Guide to Implement POM

1. Setup Your Project

Choose your test automation framework (e.g., Selenium, Cypress, Playwright) and programming language (e.g., Java, Python, JavaScript). Install the necessary dependencies and create the project structure.

                  
      project-directory/
      |-- tests/             # Test scripts
      |-- pages/             # Page classes
      |-- utils/             # Helper functions or utilities
      |-- config/            # Configuration files
                  
                  
              

2. Create a Page Class

For each web page or section, create a corresponding class in the pages directory. This class will house all locators and methods for that page.

                  
    package pages;

    import com.microsoft.playwright.Page;
    
    public class LoginPage {
        private final Page page;
    
        // Locators
        private final String usernameInput = "#username";
        private final String passwordInput = "#password";
        private final String loginButton = "#loginBtn";
    
        // Constructor
        public LoginPage(Page page) {
            this.page = page;
        }
    
        // Methods
        public void enterUsername(String username) {
            page.locator(usernameInput).fill(username);
        }
    
        public void enterPassword(String password) {
            page.locator(passwordInput).fill(password);
        }
    
        public void clickLogin() {
            page.locator(loginButton).click();
        }
    
        public boolean isLoginButtonDisplayed() {
            return page.locator(loginButton).isVisible();
        }
    }
                    
                  
              

3. Write Test Scripts

Write test cases that use the methods from your page classes. Test scripts should focus only on the test logic, relying on page classes for interactions.

Login Test Script in Playwright (Java)

                  
    package tests;

    import com.microsoft.playwright.*;
    import org.junit.jupiter.api.*;
    import pages.LoginPage;
    
    import static org.junit.jupiter.api.Assertions.assertTrue;
    import static com.microsoft.playwright.assertions.PlaywrightAssertions.assertThat;
    
    public class LoginTest {
        private Playwright playwright;
        private Browser browser;
        private Page page;
        private LoginPage loginPage;
    
        @BeforeEach
        public void setUp() {
            playwright = Playwright.create();
            browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
            page = browser.newPage();
            page.navigate("https://example.com/login");
            loginPage = new LoginPage(page);
        }
    
        @Test
        public void testValidLogin() {
            loginPage.enterUsername("testuser");
            loginPage.enterPassword("password123");
            assertTrue(loginPage.isLoginButtonDisplayed(), "Login button should be visible before clicking.");
            loginPage.clickLogin();
    
            // Assertion to validate successful login (example: checking page title)
            assertThat(page).hasTitle("Dashboard");
        }
    
        @AfterEach
        public void tearDown() {
            browser.close();
            playwright.close();
        }
    }                    
                  
              

4. Handle Dynamic Elements

Web elements may not always load immediately. Use explicit waits to handle these scenarios and make your tests more robust.

Adding Explicit Wait in Playwright (Java)

                  
    public void clickLogin() {

      page.locator(loginButton).waitFor(); // Wait until the element is ready
      page.locator(loginButton).click();
      
  }                  
                  
              

5. Organize Tests and Use Configuration

Use configuration files for storing environment details (e.g., URLs, credentials). Keep tests modular and reusable by avoiding hardcoded values

Best Practices for POM

• 1.Keep Locators and Methods in the Same Class: Each page class should contain both locators and methods specific to that page.
• 2.Avoid Assertions in Page Classes:Page classes should only return results (e.g., isLoginButtonDisplayed() should return a boolean). Perform assertions in test scripts.
• 3.Use Meaningful Names:Name your locators and methods descriptively to improve code readability.
• 4.Modularize Common Actions: If multiple pages share actions (e.g., navigation), create a base page class with shared methods.
• 5.Regular Maintenance:Update locators and methods as the UI evolves to keep tests functional.
• 6.Handle Navigations Separately:Create a dedicated navigation handler to manage page-to-page transitions, ensuring better modularity and reducing clutter in page classes.

Conclusion

The Page Object Model is a proven design pattern that simplifies test automation by organizing your codebase, improving maintainability, and reducing redundancy. By following the steps and best practices outlined here, you can create robust and scalable automated tests for your applications. Whether you’re a beginner or an experienced tester, POM is a must-have technique in your automation toolbox.