Page Object Model và tổ chức test ở quy mô lớn

// ❌ Không POM: locator rải khắp nơi, lặp lại, khó sửa
test('mua hàng', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('a@b.com');
  await page.getByLabel('Mật khẩu').fill('123');
  await page.getByRole('button', { name: 'Đăng nhập' }).click();
  // ... lặp lại y hệt ở 20 test khác
});

// pages/login.page.ts
import { type Page, type Locator, expect } from '@playwright/test';

export class LoginPage {
  readonly page: Page;
  readonly emailInput: Locator;
  readonly passwordInput: Locator;
  readonly submitButton: Locator;
  readonly errorMessage: Locator;

  constructor(page: Page) {
    this.page = page;
    // Khởi tạo locator MỘT lần — không truy DOM ở đây, chỉ là "công thức"
    this.emailInput = page.getByLabel('Email');
    this.passwordInput = page.getByLabel('Mật khẩu');
    this.submitButton = page.getByRole('button', { name: 'Đăng nhập' });
    this.errorMessage = page.getByRole('alert');
  }

  async goto() {
    await this.page.goto('/login');
  }

  // Hành động nghiệp vụ — đặt tên theo ý định, không theo thao tác kỹ thuật
  async login(email: string, password: string) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.submitButton.click();
  }

  async expectError(message: string) {
    await expect(this.errorMessage).toHaveText(message);
  }
}

test('đăng nhập sai mật khẩu', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.login('a@b.com', 'sai-mat-khau');
  await loginPage.expectError('Email hoặc mật khẩu không đúng');
});

// fixtures/pages.fixture.ts
import { test as base } from '@playwright/test';
import { LoginPage } from '@pages/login.page';
import { CartPage } from '@pages/cart.page';

type Pages = { loginPage: LoginPage; cartPage: CartPage };

export const test = base.extend<Pages>({
  loginPage: async ({ page }, use) => { await use(new LoginPage(page)); },
  cartPage:  async ({ page }, use) => { await use(new CartPage(page)); },
});
export { expect } from '@playwright/test';

import { test } from '@fixtures/pages.fixture';

test('mua hàng', async ({ loginPage, cartPage }) => {
  await loginPage.goto();
  await loginPage.login('a@b.com', '123');
  await cartPage.addItem('iPhone 16');
  await cartPage.expectItemCount(1);
});

// components/header.component.ts
export class Header {
  constructor(private page: Page) {}
  readonly userMenu = this.page.getByRole('button', { name: 'Tài khoản' });

  async logout() {
    await this.userMenu.click();
    await this.page.getByRole('menuitem', { name: 'Đăng xuất' }).click();
  }
}

// ❌ Vô ích: chỉ làm dày thêm một lớp
async clickSubmit() { await this.submitButton.click(); }
// ✅ Page object nên diễn đạt NGHIỆP VỤ, không phải từng cú click
async login(email, password) { /* nhiều bước gộp lại */ }

tests/
  auth/login.spec.ts
  shop/checkout.spec.ts
pages/
  login.page.ts
  cart.page.ts
components/
  header.component.ts
  product-card.component.ts
fixtures/
  pages.fixture.ts
utils/
  data-factory.ts        # sinh dữ liệu test
  api-helpers.ts          # seed/cleanup qua API