Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке «page object pattern»?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

Page Object Pattern - це підхід в автоматизації UI-тестів, за якого елементи сторінки і дії з ними виносяться в окремий клас (об'єкт сторінки). Тест при цьому не працює напряму з селекторами, а викликає методи цього об'єкта.

## Навіщо він потрібен

- ізолює селектори в одному місці
- зменшує дублювання коду
- спрощує підтримку тестів при змінах у верстці
- робить тести більш читабельними

## Структура

1. **Клас сторінки (Page Object)**: містить селектори і методи: `loginPage.login(email, pass)`, `loginPage.submit()`
2. **Тест**: викликає лише методи сторінки, без знань про деталі DOM

## Схематично

*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);
  }
}
```

*Тест*

```js
test('логін працює', async ({ page }) => {
  const loginPage = new LoginPage(page);

await page.goto('/login');
  await loginPage.login('user@mail.com', '123456');

await expect(page.getByText('Ласкаво просимо')).toBeVisible();
});
```

**Суть в одному реченні:** Page Object Pattern - це шар-обгортка над сторінкою, щоб тести оперували бізнес-діями, а не DOM-локаторами.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати170 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.