Suggest an edit

Improve this article

Refine the answer for “What is the "page object pattern"?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

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

1. **The page class (Page Object)**: contains selectors and methods: `loginPage.login(email, pass)`, `loginPage.submit()`
2. **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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts188 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.