Page Object Idea for Beginners

Why this matters

Copy-pasting locators across tests creates messy suites. A small Page Object (or fixture) stores selectors and user actions like loginAs(user).

What you will learn

You will create LoginPage with goto, fillCredentials, submit, and expectError; then call it from two tests.

How to do it

Keep objects thin — actions and locators, not huge business frameworks.

Steps (do these in order)

1. Step 1 — Create LoginPage. Class with constructor(page), locators for email/password/button, methods goto() and login(email, password).
2. Step 2 — Use in a test. const login = new LoginPage(page); await login.goto(); await login.login('a@b.com','secret');
3. Step 3 — Second test reuses it. Wrong-password test calls the same login method and asserts an error banner.
4. Step 4 — Do not overbuild. Skip deep inheritance. One file per page is enough for Volume 1.
5. Step 5 — Name clearly. Methods are user actions (submitOrder), not clickDiv3.

Practice

• Add a ForgotPasswordPage with one method requestReset(email).
• Explain in four lines why page objects help when the Sign in button label changes.