เขียน Test แรกด้วย Playwright

Playwright test ที่ดีควรอ่านแล้วเข้าใจ flow ได้เกือบเหมือนอ่านภาษาคน

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

test('should show the correct homepage title', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await expect(page).toHaveTitle(/Playwright/);
});

ถ้าคุณเคยเรียน AAA มาก่อน จะเห็นว่า:

• Arrange: page.goto(...)
• Act: คลิกหรือกรอกข้อมูล
• Assert: expect(...)

เป้าหมายแรกไม่ใช่เขียนเยอะ แต่เขียนให้เข้าใจ flow

ตัวอย่าง test แรก:

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

test('should display correct page title', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await expect(page).toHaveTitle(/Playwright/);
});

เมื่อรัน:

npx playwright test

คุณจะเห็นผลลัพธ์ประมาณนี้:

Running 3 tests using 3 workers

  ✓ [chromium] tests/example.spec.ts:3:5 (1.2s)
  ✓ [firefox] tests/example.spec.ts:3:5 (1.5s)
  ✓ [webkit] tests/example.spec.ts:3:5 (1.3s)

  3 passed (4.2s)

สิ่งที่ควรอ่านจาก output:

• test ถูกรันใน browser อะไรบ้าง
• test ไหนผ่านหรือ fail
• ใช้เวลานานเท่าไร

แต่ยังต้องไม่เผลอไปเช็กทุกอย่างบนหน้า

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

test('should display Playwright homepage correctly', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  await expect(page).toHaveTitle(/Playwright/);

  const heading = page.getByRole('heading', { name: 'Playwright' });
  await expect(heading).toBeVisible();

  const getStartedLink = page.getByRole('link', { name: 'Get started' });
  await expect(getStartedLink).toBeVisible();
});

ตรงนี้สอนหลักสำคัญ 2 อย่าง:

• title ผ่าน ไม่ได้แปลว่าหน้าใช้ได้ครบ
• แต่ถ้า assert รายละเอียดเล็กน้อยเกินไป test จะเปราะและอ่านยาก

ใช้ `test.describe()` เมื่อ test หลายตัวพูดเรื่องเดียวกัน

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

test.describe('Playwright Homepage', () => {
  test('should have correct title', async ({ page }) => {
    await page.goto('https://playwright.dev/');
    await expect(page).toHaveTitle(/Playwright/);
  });

  test('should navigate to Get Started page', async ({ page }) => {
    await page.goto('https://playwright.dev/');
    await page.getByRole('link', { name: 'Get started' }).click();
    await expect(page).toHaveURL(/.*intro/);
  });
});

หลักคิดคือ:

• 1 test ควรพิสูจน์ 1 behavior
• test ใน describe เดียวกันควรพูดเรื่องเดียวกัน
• อย่าเอา flow หลายเรื่องมาเบียดอยู่ใน test ยาวตัวเดียว

อย่าเพิ่งเดา ให้เริ่มจากหลักฐานที่ Playwright ให้มา

คำสั่งที่ใช้บ่อย:

npx playwright test --ui
npx playwright test --headed
npx playwright show-report

เวลาผลลัพธ์ fail ให้ไล่เช็กทีละข้อ:

• locator ถูกไหม
• หน้ายังโหลดไม่เสร็จหรือเปล่า
• assertion กำลังเช็กสิ่งที่ผู้ใช้เห็นจริงหรือไม่
• test กำลังพยายามทำหลายเรื่องเกินไปหรือเปล่า