Browser Automation with Python and Selenium — 16: Page Object Model

Page Object Model for better structured and maintainable code

In the previous post, we explored managing window position and dimensions and also taking screenshots with Selenium. We will see Page Object Model(POM) to create more structured and maintainable code in this post.

Until now, we have used mostly functions and single modules for our examples. If you try to manage a web page with lots of pages or components with a wide range of interactions among them, things might get complicated with this approach.

This is a general problem and as always there is a common solution for this common problem with a design pattern called “Page Object Model”.

Before starting to use it, let’s first look at what it is.

Page Object Model is a popular design pattern in test automation to create an “Object Repository” for UI elements on a web page. It models web pages as objects.

Without using it, our code contains lines like in the snippet below that make WebDriver calls with unintuitive locators all over the project.

With POM, web pages or components are represented as classes with locator attributes and interaction methods. This abstracts web page interactions for enhanced readability and reusability. It also helps to organize your code in a more structured way.

Example

A few tests for two pages on the sample pythondoctor website are shown below.

The directory structure of the code consists of three packages. The components package includes a navigation module for the header component and a links module for the links section seen on every page. The pages package includes Page Object implementation for home and bopi pages. They also use the modules from the components package. The tests package contains a few tests for the selected two pages.

/components
    __init__.py
    links.py
    navigation.py
/pages
    __init__.py
    bopi.py
    home.py
/tests
    __init__.py
    test_bopi.py
    test_home.py
main.py

The following is the usage of page objects from the view of the client’s perspective in the main.py module.

Here is the execution of the main.py.

Instead of calling WebDriver methods directly, we are hiding them inside specific page or component objects.

BOPI(Bits of Python Information) page implementation contains two simple methods, one for clicking the best practices filter and the other for navigating to the home page. It also defines page url and locators as class attributes.

Page Object implementation of the home page contains more methods such as entering code, submitting the form, or opening an external web page from the links section. It delegates navigation requests to the Navigation component and external link opening requests to the Links component.

Here are the Links and Navigation classes for components used in every web page of the application.

Now, we can write our tests by leveraging these page objects.

Advantages

• Page objects make low-level Selenium WebDriver calls so that tests can make short, readable calls instead of complex ones.
• Page Object Model reduces the amount of duplicated code. If the UI changes, only one place needs to be updated.
• It provides code reusability by writing the code once and use it within different scripts.
• Since there is a clean separation between test code and page specific code such as locators and layout, it increases maintainability.
• It improves the readability of your code.
• It makes it easy to understand and reason about the code because of intuitive method names that can be easily mapped to the operation happening in UI.

Things to Remember

• Page Object Model is a popular design pattern in test automation to create an “Object Repository” for UI elements on a web page. It models web pages as objects.
• With POM, web pages or components are represented as classes with locator attributes and interaction methods.
• Page Object Model increases code reusability, maintainability, and readability.

In the next post, we will see using Selenium with the unittest module.

Thank you for your time.

References

1. https://www.selenium.dev/documentation/en/guidelines_and_recommendations/page_object_models/
2. https://github.com/SeleniumHQ/selenium/wiki/PageObjects
3. https://testautomationu.applitools.com/selenium-webdriver-python-tutorial/chapter4.html
4. https://www.softwaretestingmaterial.com/page-object-model/
5. https://www.toptal.com/selenium/test-automation-in-selenium-using-page-object-model-and-page-factory
6. http://makeseleniumeasy.com/2017/11/24/introduction-of-page-object-model-in-selenium-webdriver-advantages-and-disadvatanges/