What is the "page object pattern"?
The Page Object Pattern is an approach in UI test automation where the page's elements and the actions on them are moved into a separate class (a page object). The test then does not work directly with selectors but calls methods of this object.
Why it is needed
- isolates selectors in one place
- reduces code duplication
- simplifies test maintenance when the markup changes
- makes tests more readable
Structure
- The page class (Page Object): contains selectors and methods:
loginPage.login(email, pass),loginPage.submit() - The test: calls only the page's methods, without knowledge of DOM details
Schematically
Page Object
js
class LoginPage {
constructor(page) {
this.page = page;
this.emailInput = '#email';
this.passwordInput = '#password';
this.submitButton = '#submit';
}
async login(email, password) {
await this.page.fill(this.emailInput, email);
await this.page.fill(this.passwordInput, password);
await this.page.click(this.submitButton);
}
}Test
js
test('login works', async ({ page }) => {
const loginPage = new LoginPage(page);
await page.goto('/login');
await loginPage.login('user@mail.com', '123456');
await expect(page.getByText('Welcome')).toBeVisible();
});The essence in one sentence: the Page Object Pattern is a wrapper layer over the page, so tests operate on business actions rather than DOM locators.
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.