Page Object Model

1 The Hook — Why This Matters

In 2022, a Wellington SaaS company refactored their login form. A developer changed the submit button from id="login-btn" to data-testid="login-submit" as part of an accessibility push. It was a one-line change in the frontend.

Forty-three automation tests broke overnight. Selectors were scattered across seventeen different test files. Three QA engineers spent two days hunting down every #login-btn reference. Two tests were missed and started failing in CI the following week. The team nearly missed a client demo.

If the selectors had lived in one place, the fix would have taken five minutes. The Page Object Model (POM) is that one place. It is the difference between maintainable automation and a brittle mess that collapses every time the UI breathes.

2 The Rule — The One-Sentence Version

When a test says loginPage.login("alice", "password"), nobody needs to know which selector found the password field. If the field changes from an ID to a label-based locator, only the page object changes. Every test using it stays green.

3 The Analogy — Think Of It Like...

4 Watch Me Do It — Step by Step

Here is a real Playwright example for a New Zealand payroll login page. Follow these steps every time you automate a new page.

1. Identify a reusable page or component The login page is used by every test that needs an authenticated session. Prime candidate for a page object.
2. Create a class that owns the locators Store every selector as a property. Use stable locators like labels and roles, not brittle CSS paths.
3. Add interaction methods Wrap common sequences like login() into single method calls. Return page objects after navigation.
4. Return page objects for flow continuation After login, return a DashboardPage so the test can chain actions fluently.
5. Write the test using only page object methods The test should contain zero raw selectors. Zero.

class LoginPage:
    def __init__(self, page):
        self.page = page
        self.username = page.get_by_label("Email")
        self.password = page.get_by_label("Password")
        self.submit   = page.get_by_role("button", name="Sign in")

    def goto(self):
        self.page.goto("https://payroll.example.co.nz/login")
        return self

    def login(self, user: str, pw: str):
        self.username.fill(user)
        self.password.fill(pw)
        self.submit.click()
        return DashboardPage(self.page)

def test_admin_can_view_payslips(page):
    login = LoginPage(page)
    login.goto().login("admin@example.co.nz", "SecurePass123!")

    dashboard = DashboardPage(page)
    expect(dashboard.payslips_link).to_be_visible()

class HeaderComponent:
    def __init__(self, page):
        self.page = page
        self.logo = page.get_by_role("link", name="Payroll")
        self.user_menu = page.get_by_role("button", name="User menu")

    def logout(self):
        self.user_menu.click()
        self.page.get_by_text("Logout").click()
        return LoginPage(self.page)

class DashboardPage:
    def __init__(self, page):
        self.page = page
        self.header = HeaderComponent(page)
        self.payslips_table = page.locator("table[data-testid='payslips']")
        self.export_btn = page.get_by_role("button", name="Export CSV")

    def export_payslips(self):
        self.export_btn.click()
        return self

# Test using components
def test_export_and_logout(page):
    dashboard = DashboardPage(page)
    dashboard.export_payslips()
    login = dashboard.header.logout()
    expect(login.username).to_be_visible()

5 When to Use It / When NOT to Use It

6 Common Mistakes — Don't Do This

7 Now You Try — Interview Warm-Up

def test_order(page):
    page.goto("/shop")
    page.locator("#product-12").click()
    page.locator("[data-testid='add-to-cart']").click()
    page.locator(".cart-icon").click()
    page.locator("#checkout-btn").click()
    assert page.url == "/checkout"

class ShopPage:
    def __init__(self, page): self.page = page
    def goto(self): self.page.goto("/shop"); return self
    def add_product_to_cart(self, testid: str):
        self.page.locator(f"[data-testid='{testid}']").click()
        self.page.locator("[data-testid='add-to-cart']").click()
        return self
    def open_cart(self):
        self.page.locator(".cart-icon").click()
        return CheckoutPage(self.page)

class CheckoutPage:
    def __init__(self, page): self.page = page
    def start_checkout(self):
        self.page.locator("#checkout-btn").click()
        return self

def test_order(page):
    shop = ShopPage(page).goto()
    shop.add_product_to_cart("product-12")
    checkout = shop.open_cart().start_checkout()
    assert checkout.page.url == "/checkout"

8 Self-Check — Can You Actually Do This?

Click each question to reveal the answer. If you got all three, you're ready to practice.

9 Interview Prep — What They'll Ask