Page Object Pattern — UI Test Abstraction

In this tutorial, you'll learn how the Page Object pattern encapsulates web page elements and interactions in reusable classes for UI tests.

What You'll Learn

how the Page Object pattern encapsulates web page elements and interactions in reusable classes for UI tests.

Why It Matters

UI selectors scattered across tests break when the UI changes. Page Objects centralize selectors.

Real-World Use

Selenium Page Object Model, Playwright page objects, and Cypress page object utilities.

The Page Object Pattern

The Page Object pattern addresses a specific recurring design problem by providing a reusable solution structure. Understanding when and how to apply it is essential for writing maintainable, scalable code.

Key Concepts

• Isolation: Testing units independently of dependencies.
• Control: Simulating specific conditions and edge cases.
• Verification: Asserting interactions occurred as expected.
• Coverage: Ensuring all code paths are exercised.

Structure

The following diagram shows the structure of this pattern:

flowchart LR
    Test --> PageObject
    PageObject -->|stub| Service
    PageObject -->|mock verify| Repository

Implementation

from typing import List
from dataclasses import dataclass
from unittest.mock import Mock

@dataclass
class User:
    id: int
    name: str
    is_active: bool = True

class UserService:
    def __init__(self, repo):
        self._repo = repo

    def get_active_users(self) -> List[User]:
        return [u for u in self._repo.find_all() if u.is_active]

# Test with PageObject
def test_get_active_users():
    mock_repo = Mock()
    mock_repo.find_all.return_value = [
        User(id=1, name="Alice", is_active=True),
        User(id=2, name="Bob", is_active=False),
        User(id=3, name="Charlie", is_active=True),
    ]
    service = UserService(mock_repo)
    result = service.get_active_users()
    assert len(result) == 2
    assert result[0].name == "Alice"
    assert result[1].name == "Charlie"
    print("Test passed!")

test_get_active_users()

Expected output:

Test passed!

Key Participants

• Client: Code that uses the Page Object.
• Page Object: The main abstraction provided by the pattern.
• Implementation: Concrete realization of the pattern.
• Data/State: Information managed by the pattern.

Real-World Examples

• DodaTech uses this pattern internally for consistent cross-cutting concerns.
• Major frameworks and libraries implement this pattern as a core architectural element.
• Production systems at scale depend on this pattern for reliability.

Related Patterns

• Test Double

• Object Mother

• Facade

• Design Patterns — the complete patterns catalog.

Pros and Cons

Common Mistakes

1. **Over-engineering: Applying Page Object where a simpler solution suffices, adding unnecessary complexity.

2. **Wrong granularity: Implementing Page Object at the wrong level of abstraction.

3. **Thread Safety ignored: Using Page Object in concurrent context without proper synchronization.

4. **Tight coupling: Violating the pattern intent by creating hidden dependencies.

5. **Premature optimization: Introducing Page Object before there is evidence it is needed.

Practice Questions

1. What problem does the Page Object pattern solve? Describe a real-world scenario where using it improves code quality.

2. How does Page Object differ from alternative approaches? What are the trade-offs?

3. What testing Strategy would you use for code that implements Page Object?

4. How would you refactor legacy code to introduce Page Object?

5. When should you NOT use Page Object? Describe scenarios where it adds unnecessary complexity.

Challenge

Implement a complete Page Object example in Python with unit tests. Include error handling, edge cases (empty data, null values, concurrent access), and a performance comparison against a simpler alternative. Document your design decisions.

Real-World Task

Find a section of code in your current project that could benefit from the Page Object pattern. Refactor it, write tests, and measure the improvement in testability, coupling, and cohesion.

Security Tip: When implementing Page Object, ensure proper input validation, avoid exposing internal state, and follow Least Privilege. At DodaTech, all implementations undergo security review.

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro.