Playwright Page Object Model ภาษาไทย: โครงสร้าง Test ที่ดูแลง่าย

// tests/contact-a.spec.ts
await page.getByLabel('อีเมล').fill('[email protected]');
await page.getByRole('button', { name: 'ส่งข้อความ' }).click();

// tests/contact-b.spec.ts — selector ชุดเดิม ก๊อปวางซ้ำ
await page.getByLabel('อีเมล').fill('[email protected]');
await page.getByRole('button', { name: 'ส่งข้อความ' }).click();

tests/
  pages/
    contact.page.ts      # page object ต่อ 1 หน้า
    notes.page.ts
  fixtures/
    test.ts              # ขยาย base test ให้เสียบ page object
  contact.spec.ts        # เทสไฟล์เรียกใช้ผ่าน fixture
  notes.spec.ts

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

export class ContactPage {
  readonly page: Page;
  readonly emailInput: Locator;
  readonly messageInput: Locator;
  readonly sendButton: Locator;
  readonly successMessage: Locator;

  constructor(page: Page) {
    this.page = page;
    this.emailInput = page.getByLabel('อีเมล');
    this.messageInput = page.getByLabel('ข้อความ');
    this.sendButton = page.getByRole('button', { name: 'ส่งข้อความ' });
    this.successMessage = page.getByText('ส่งข้อความสำเร็จ');
  }

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

  async submit(email: string, message: string) {
    await this.emailInput.fill(email);
    await this.messageInput.fill(message);
    await this.sendButton.click();
  }
}

import { test as base } from '@playwright/test';
import { ContactPage } from '../pages/contact.page';

type Fixtures = {
  contactPage: ContactPage;
};

export const test = base.extend<Fixtures>({
  contactPage: async ({ page }, use) => {
    await use(new ContactPage(page));
  },
});
export { expect } from '@playwright/test';

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

test('ส่งข้อความติดต่อสำเร็จ', async ({ contactPage }) => {
  await contactPage.goto();
  await contactPage.submit('[email protected]', 'สวัสดีครับ');

  await expect(contactPage.successMessage).toBeVisible();
});