Auto-waiting ทำงานอย่างไร

Auto-waiting คือความสามารถของ Playwright ที่จะรอ element พร้อมก่อนทำ action โดยอัตโนมัติ ไม่ต้องเขียน wait เอง

ตัวอย่าง: เมื่อคุณเขียน await page.click('button') Playwright จะ:

1. รอให้ element ปรากฏใน DOM
2. รอให้ element มองเห็นได้ (visible)
3. รอให้ element หยุดเคลื่อนไหว (stable)
4. รอให้ element enabled (ไม่ disabled)
5. รอให้ไม่มี element อื่นบัง
6. แล้วค่อยคลิก

ทั้งหมดนี้เกิดขึ้นอัตโนมัติ — ไม่ต้องเขียน code เพิ่ม

Playwright ทำ actionability checks ต่อไปนี้ก่อนทำ action:

Selenium (ต้องเขียน wait เอง)

# Selenium — ต้อง explicit wait ทุกครั้ง
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

wait = WebDriverWait(driver, 10)
button = wait.until(
    EC.element_to_be_clickable((By.ID, "submit"))
)
button.click()

Playwright (auto-wait ให้)

// Playwright — แค่บรรทัดเดียว
await page.getByRole('button', { name: 'Submit' }).click();

Playwright ทำ wait ให้อัตโนมัติ — code สั้นกว่า อ่านง่ายกว่า และเสถียรกว่า

ทุก action มี timeout (default 30 วินาที) ถ้า element ไม่พร้อมภายในเวลา จะ throw error:

// ใช้ default timeout (30 วินาที)
await page.getByRole('button', { name: 'Submit' }).click();

// กำหนด timeout เฉพาะ action นี้
await page.getByRole('button', { name: 'Submit' }).click({
  timeout: 10000  // 10 วินาที
});

// ตั้ง timeout สำหรับทุก action ใน config
// playwright.config.ts
export default defineConfig({
  use: {
    actionTimeout: 15000,  // 15 วินาที
  },
});

ส่วนใหญ่ไม่ต้องเขียน wait เอง แต่มีบางกรณีที่ต้อง:

กรณีที่ต้อง wait

// รอ URL เปลี่ยน (SPA)
await page.waitForURL('**/dashboard');

// รอ API response
await page.waitForResponse(resp =>
  resp.url().includes('/api/data')
);

// รอ element หายไป (เช่น loading spinner)
await page.getByTestId('spinner').waitFor({ state: 'hidden' });

// รอ element ปรากฏ
await page.getByText('Data loaded').waitFor({ state: 'visible' });

กรณีที่ไม่ต้อง wait (Playwright ทำให้แล้ว)

// ไม่ต้อง wait ก่อน click — Playwright รอ element พร้อมเอง
await page.getByRole('button', { name: 'Submit' }).click();

// ไม่ต้อง wait ก่อน fill — Playwright รอ field editable เอง
await page.getByLabel('Email').fill('[email protected]');

// ไม่ต้อง wait ใน assertion — auto-retry ให้แล้ว
await expect(page.getByText('Success')).toBeVisible();

// ไม่ดี — hard-coded wait
await page.waitForTimeout(3000);
await page.getByRole('button', { name: 'Submit' }).click();

// ดี — Playwright auto-wait
await page.getByRole('button', { name: 'Submit' }).click();

page.waitForTimeout() เป็น anti-pattern เพราะ:

• ถ้า wait น้อยไป → test flaky
• ถ้า wait มากไป → test ช้า
• ไม่มีทางรู้ว่าต้อง wait เท่าไหร่ถึง "พอดี"