Page Object Model (POM) trong Playwright: Thiết kế Automation Framework dễ bảo trì

typescript
// pages/BasePage.ts
import { Page, Locator } from '@playwright/test';

export class BasePage {
  protected page: Page;

  constructor(page: Page) {
    this.page = page;
  }

  async navigate(path: string) {
    await this.page.goto(path);
  }

  async waitForPageLoad() {
    await this.page.waitForLoadState('networkidle');
  }

  async getTitle(): Promise<string> {
    return this.page.title();
  }

  async scrollToElement(locator: Locator) {
    await locator.scrollIntoViewIfNeeded();
  }
}

typescript
// pages/LoginPage.ts
import { Page, expect } from '@playwright/test';
import { BasePage } from './BasePage';

export class LoginPage extends BasePage {
  // Khai báo locators như properties của class
  private readonly emailInput = this.page.getByLabel('Email');
  private readonly passwordInput = this.page.getByLabel('Mật khẩu');
  private readonly loginButton = this.page.getByRole('button', { name: 'Đăng nhập' });
  private readonly errorMessage = this.page.getByRole('alert');
  private readonly rememberMeCheckbox = this.page.getByLabel('Ghi nhớ đăng nhập');

  constructor(page: Page) {
    super(page);
  }

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

  // Action methods — mô tả hành động người dùng
  async login(email: string, password: string) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.loginButton.click();
  }

  async loginWithRememberMe(email: string, password: string) {
    await this.rememberMeCheckbox.check();
    await this.login(email, password);
  }

  // Assertion helpers — kiểm tra trạng thái trang
  async expectErrorMessage(message: string) {
    await expect(this.errorMessage).toContainText(message);
  }

  async expectLoginFormVisible() {
    await expect(this.emailInput).toBeVisible();
    await expect(this.passwordInput).toBeVisible();
    await expect(this.loginButton).toBeVisible();
  }
}

typescript// tests/auth/login.spec.ts
import { test, expect } from '@playwright/test';
import { LoginPage } from '../../pages/LoginPage';
import { DashboardPage } from '../../pages/DashboardPage';

test.describe('Đăng nhập', () => {
  let loginPage: LoginPage;
  let dashboardPage: DashboardPage;

  test.beforeEach(async ({ page }) => {
    loginPage = new LoginPage(page);
    dashboardPage = new DashboardPage(page);
    await loginPage.goto();
  });

  test('đăng nhập thành công với thông tin hợp lệ', async ({ page }) => {
    await loginPage.login('admin@test.com', 'Admin@123');
    await expect(page).toHaveURL('/dashboard');
    await dashboardPage.expectWelcomeMessageVisible();
  });

  test('hiển thị lỗi khi mật khẩu sai', async () => {
    await loginPage.login('admin@test.com', 'wrong-password');
    await loginPage.expectErrorMessage('Sai tên đăng nhập hoặc mật khẩu');
  });

  test('hiển thị lỗi khi để trống email', async () => {
    await loginPage.login('', 'Admin@123');
    await loginPage.expectErrorMessage('Email không được để trống');
  });
});

typescript// fixtures/index.ts
import { test as base } from '@playwright/test';
import { LoginPage } from '../pages/LoginPage';
import { DashboardPage } from '../pages/DashboardPage';
import { CheckoutPage } from '../pages/CheckoutPage';

type PageFixtures = {
  loginPage: LoginPage;
  dashboardPage: DashboardPage;
  checkoutPage: CheckoutPage;
};

export const test = base.extend<PageFixtures>({
  loginPage: async ({ page }, use) => {
    await use(new LoginPage(page));
  },
  dashboardPage: async ({ page }, use) => {
    await use(new DashboardPage(page));
  },
  checkoutPage: async ({ page }, use) => {
    await use(new CheckoutPage(page));
  },
});

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

typescript
// tests/auth/login.spec.ts
import { test, expect } from '../../fixtures'; // Import từ fixture, không phải @playwright/test

test('đăng nhập thành công', async ({ loginPage }) => {
  await loginPage.goto();
  await loginPage.login('admin@test.com', 'Admin@123');
  // loginPage được inject tự động — không cần new LoginPage(page)
});