Page Object Model

Keep page details in one place so tests stay easy to read.

Big Picture

One small picture can make this idea easier to hold.

Raw selectors

• Selectors repeat in many tests.
• Tests are long.
• Small UI change breaks many lines.
• Hard to read.

Page objects

• Selectors live in one class.
• Tests read like stories.
• UI change has one fix.
• Easy to reuse actions.

VerdictPage objects win when many tests touch the same page.

How It Moves

Short steps make the flow easier to see.

Find parts

List the buttons, fields, and links on the page.

Wrap them

Put locators inside one page class.

3

Add actions

Create methods like login or search.

4

Use in tests

Call clear methods instead of raw selectors.

Step By Step

This is the same idea, stretched across time.

1. 1

   Start with selectors

   You first find the page elements you need.

2. 2

   Build the page class

   You move locators and actions into one object.

3. 3

   Write simple tests

   Tests call methods like a user flow.

4. 4

   Change only one place

   A UI update should touch one page object.

One Small Model

Think of this like a tiny card you can keep in your pocket.

LoginPage

5 fields

url:"/login"

usernameInput:"getByLabel('Email')"

passwordInput:"getByLabel('Password')"

submitButton:"getByRole('button', { name: 'Sign in' })"

signIn():"fills form and submits"

Quick Check

Question 1 of 10 correct

What is the main job of a page object?

Store page actions and locatorsSpeed up the browserReplace all testsWrite screenshots

HintSubmit

Map It

One more picture helps you see where this lesson matters most.

Where page objects help most

Test reuse

Many repeated actions

Small and simple

One test for one page

Best fit

Many tests reuse login

Still useful

Few screens but shared steps

Very useful

Large app with shared flows

Simple checks

Few screensMany screens

App size

Final Quiz

Question 1 of 30 correct

Why use a page object?

To keep selectors in one placeTo avoid running testsTo make the browser fasterTo remove assertions

HintSubmit