Патерн Page Object Model (POM) та кастомні фікстури

+-----------------------------------------------------------------------------+
|                                Test Runner                                  |
|   test('користувач купує тариф Enterprise', async ({ checkoutPage }) => {}) |
+-----------------------------------------------------------------------------+
                                       │
                                       ▼ (Впровадження залежності через IoC)
+-----------------------------------------------------------------------------+
|                    Playwright Fixtures Engine (test.extend)                 |
|   Автоматичний Setup -> Ініціалізація сторінок -> Teardown ресурсів         |
+-----------------------------------------------------------------------------+
                                       │
                                       ▼ (Виклики бізнес-методів)
+-----------------------------------------------------------------------------+
|                         Page Object Model Layer                             |
|                                                                             |
|   +--------------------------+           +------------------------------+   |
|   |       ShopPage           |           |        CheckoutPage          |   |
|   |  - selectProduct()       |           |  - fillPaymentDetails()      |   |
|   |  - openCart()            |           |  - placeOrder()              |   |
|   +--------------------------+           +------------------------------+   |
|                 │                                       │                   |
|                 ▼ (Композиція)                          ▼ (Композиція)      |
|   +--------------------------+           +------------------------------+   |
|   |   HeaderNavigationWidget |           |      NotificationToastWidget |   |
|   +--------------------------+           +------------------------------+   |
+-----------------------------------------------------------------------------+
                                       │
                                       ▼ (Інкапсульовані селектори getByRole)
+-----------------------------------------------------------------------------+
|                           Playwright Core Driver                            |
|             Page API -> Chrome DevTools Protocol / WebDriver BiDi           |
+-----------------------------------------------------------------------------+
                                       │
                                       ▼ (Фізичні події миші/клавіатури)
+-----------------------------------------------------------------------------+
|                               Browser DOM                                   |
+-----------------------------------------------------------------------------+

import { type Page, type Locator, expect } from '@playwright/test';

export interface PaymentInfo {
  cardNumber: string;
  cardHolder: string;
  expiryDate: string;
  cvv: string;
}

export class CheckoutPage {
  // Інкапсульовані локатори високої стабільності (User-Facing)
  private readonly pageTitle: Locator;
  private readonly cardNumberInput: Locator;
  private readonly cardHolderInput: Locator;
  private readonly expiryInput: Locator;
  private readonly cvvInput: Locator;
  private readonly submitOrderButton: Locator;
  private readonly successBanner: Locator;
  private readonly errorMessageContainer: Locator;

  constructor(private readonly page: Page) {
    this.pageTitle = page.getByRole('heading', { name: 'Оформлення замовлення', level: 1 });
    this.cardNumberInput = page.getByLabel('Номер банківської картки');
    this.cardHolderInput = page.getByLabel('Ім\'я власника картки');
    this.expiryInput = page.getByPlaceholder('ММ/РР');
    this.cvvInput = page.getByLabel('CVV/CVC');
    this.submitOrderButton = page.getByRole('button', { name: 'Підтвердити та оплатити' });
    this.successBanner = page.getByRole('status').filter({ hasText: /замовлення успішно оформлено/i });
    this.errorMessageContainer = page.getByRole('alert');
  }

  /** Навігація на сторінку */
  async navigate(): Promise<void> {
    await this.page.goto('/checkout');
    await expect(this.pageTitle).toBeVisible();
  }

  /** Комплексна дія заповнення платіжних реквізитів */
  async fillPaymentForm(info: PaymentInfo): Promise<void> {
    await this.cardNumberInput.fill(info.cardNumber);
    await this.cardHolderInput.fill(info.cardHolder);
    await this.expiryInput.fill(info.expiryDate);
    await this.cvvInput.fill(info.cvv);
  }

  /** Підтвердження замовлення */
  async submitOrder(): Promise<void> {
    await this.submitOrderButton.click();
  }

  /** Перевірка успішного завершення операції */
  async expectOrderSuccessful(): Promise<void> {
    await expect(this.successBanner).toBeVisible({ timeout: 10_000 });
  }

  /** Перевірка появи помилки валідації */
  async expectValidationError(message: string): Promise<void> {
    await expect(this.errorMessageContainer).toContainText(message);
  }
}

import { test as baseTest } from '@playwright/test';

// 1. Визначення інтерфейсу впроваджуваних фікстур
export interface AppFixtures {
  checkoutPage: CheckoutPage;
  catalogPage: CatalogPage;
}

// 2. Створення спеціалізованого ранера з автоматичним життєвим циклом
export const test = baseTest.extend<AppFixtures>({
  checkoutPage: async ({ page }, use) => {
    // Фаза SETUP: створення екземпляра Page Object
    const checkoutPage = new CheckoutPage(page);

    // Передача інстанса в тіло тесту
    await use(checkoutPage);

    // Фаза TEARDOWN (виконується автоматично після тесту)
  },

  catalogPage: async ({ page }, use) => {
    const catalogPage = new CatalogPage(page);
    await use(catalogPage);
  },
});

export { expect } from '@playwright/test';

import { type Page, type Locator, expect } from '@playwright/test';

export class HeaderWidget {
  private readonly root: Locator;
  private readonly cartButton: Locator;
  private readonly cartBadge: Locator;
  private readonly searchInput: Locator;
  private readonly userMenuButton: Locator;

  constructor(page: Page) {
    // Інкапсулюємо кореневий вузол шапки
    this.root = page.getByRole('banner');
    this.cartButton = this.root.getByRole('button', { name: /кошик/i });
    this.cartBadge = this.cartButton.getByTestId('cart-items-count');
    this.searchInput = this.root.getByRole('searchbox', { name: /пошук по каталогу/i });
    this.userMenuButton = this.root.getByRole('button', { name: /профіль користувача/i });
  }

  async openCart(): Promise<void> {
    await this.cartButton.click();
  }

  async searchProduct(query: string): Promise<void> {
    await this.searchInput.fill(query);
    await this.searchInput.press('Enter');
  }

  async expectCartItemCount(count: number): Promise<void> {
    if (count === 0) {
      await expect(this.cartBadge).toBeHidden();
    } else {
      await expect(this.cartBadge).toHaveText(String(count));
    }
  }
}

import { type Page, type Locator } from '@playwright/test';
import { HeaderWidget } from '../widgets/HeaderWidget';

export class ShopPage {
  public readonly header: HeaderWidget;
  private readonly productList: Locator;

  constructor(private readonly page: Page) {
    this.header = new HeaderWidget(page);
    this.productList = page.getByRole('main').getByRole('list');
  }

  async navigate(): Promise<void> {
    await this.page.goto('/shop');
  }

  async addProductToCart(productName: string): Promise<void> {
    const productCard = this.productList.getByRole('listitem').filter({
      hasText: productName,
    });
    await productCard.getByRole('button', { name: /до кошика/i }).click();
  }
}

import { test as baseTest, expect } from '@playwright/test';
import { ShopPage } from '../pages/ShopPage';
import { CheckoutPage } from '../pages/CheckoutPage';

export interface TestUser {
  id: string;
  email: string;
  token: string;
}

export interface CustomFixtures {
  shopPage: ShopPage;
  checkoutPage: CheckoutPage;
  temporaryCustomer: TestUser;
}

export const test = baseTest.extend<CustomFixtures>({
  // Фікстура створення ізольованого покупця через backend API
  temporaryCustomer: async ({ request }, use) => {
    // 1. SETUP: Генеруємо унікального користувача через швидкий HTTP-запит
    const uniqueId = `e2e_${Date.now()}_${Math.random().toString(36).substring(7)}`;
    const createRes = await request.post('/api/testing/create-ephemeral-user', {
      data: {
        email: `${uniqueId}@agenticlab-test.internal`,
        role: 'customer',
      },
    });

    expect(createRes.ok()).toBeTruthy();
    const customer = (await createRes.json()) as TestUser;

    // 2. YIELD: передаємо сутність у контекст тесту
    await use(customer);

    // 3. TEARDOWN: гарантоване видалення користувача після тесту
    const deleteRes = await request.delete(`/api/testing/cleanup-user/${customer.id}`, {
      headers: { Authorization: `Bearer ${customer.token}` },
    });
    expect(deleteRes.ok()).toBeTruthy();
  },

  // Фікстура сторінки магазину
  shopPage: async ({ page }, use) => {
    const shopPage = new ShopPage(page);
    await use(shopPage);
  },

  // Фікстура сторінки оформлення
  checkoutPage: async ({ page }, use) => {
    const checkoutPage = new CheckoutPage(page);
    await use(checkoutPage);
  },
});

export { expect };

import { test, expect } from '../fixtures/test-suite';

test.describe('Електронна комерція: Оформлення замовлення', () => {
  test('покупець успішно додає товар до кошика та здійснює оплату', async ({
    shopPage,
    checkoutPage,
    temporaryCustomer,
  }) => {
    // 1. Навігація в магазин
    await shopPage.navigate();

    // 2. Додавання товару та перевірка лічильника кошика через компонентний віджет
    await shopPage.addProductToCart('Курс з архітектури React 19');
    await shopPage.header.expectCartItemCount(1);

    // 3. Перехід до оформлення через шапку
    await shopPage.header.openCart();
    await checkoutPage.navigate();

    // 4. Заповнення платіжних реквізитів даними тестового користувача
    await checkoutPage.fillPaymentForm({
      cardNumber: '4000 1234 5678 9010',
      cardHolder: temporaryCustomer.email.toUpperCase(),
      expiryDate: '12/28',
      cvv: '789',
    });

    // 5. Відправка та перевірка результату
    await checkoutPage.submitOrder();
    await checkoutPage.expectOrderSuccessful();
  });
});