Navigation และ Form Interactions

// เปิด URL เต็ม
await page.goto('https://example.com');

// ใช้ baseURL จาก config (แนะนำ)
// ถ้า baseURL = 'http://localhost:3000'
await page.goto('/login');        // → http://localhost:3000/login
await page.goto('/products');     // → http://localhost:3000/products

// รอจน page โหลดเสร็จจริงๆ
await page.goto('/login', { waitUntil: 'networkidle' });

Navigation ผ่านการคลิก

// คลิกลิงก์แล้ว Playwright จะรอ navigation อัตโนมัติ
await page.getByRole('link', { name: 'Products' }).click();

// ตรวจว่าไปถูกหน้า
await expect(page).toHaveURL(/.*products/);

// คลิกปุ่ม
await page.getByRole('button', { name: 'Submit' }).click();

// Double click
await page.getByText('Edit').dblclick();

// Right click
await page.getByText('Item').click({ button: 'right' });

// Click ที่ตำแหน่งเฉพาะ
await page.getByTestId('canvas').click({ position: { x: 100, y: 200 } });

// กรอก input field (ลบค่าเดิมก่อนกรอก)
await page.getByLabel('Email').fill('[email protected]');
await page.getByLabel('Password').fill('mypassword123');

// พิมพ์ทีละตัวอักษร (สำหรับ autocomplete, debounce)
await page.getByLabel('Search').pressSequentially('laptop', { delay: 100 });

// ลบค่าใน field
await page.getByLabel('Email').clear();

// Dropdown — เลือก option
await page.getByLabel('Country').selectOption('Thailand');

// เลือกด้วย value attribute
await page.getByLabel('Country').selectOption({ value: 'th' });

// Checkbox — check
await page.getByRole('checkbox', { name: 'Accept terms' }).check();

// Checkbox — uncheck
await page.getByRole('checkbox', { name: 'Newsletter' }).uncheck();

// Radio button
await page.getByRole('radio', { name: 'Credit Card' }).check();

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

test('should login successfully', async ({ page }) => {
  // 1. ไปที่หน้า login
  await page.goto('/login');

  // 2. กรอก email
  await page.getByLabel('Email').fill('[email protected]');

  // 3. กรอก password
  await page.getByLabel('Password').fill('password123');

  // 4. check "Remember me"
  await page.getByRole('checkbox', { name: 'Remember me' }).check();

  // 5. คลิก submit
  await page.getByRole('button', { name: 'Sign In' }).click();

  // 6. ตรวจว่า redirect ไปหน้า dashboard
  await expect(page).toHaveURL(/.*dashboard/);

  // 7. ตรวจว่าเห็นข้อความต้อนรับ
  await expect(page.getByText('Welcome back')).toBeVisible();
});

test('should redirect to login when unauthorized', async ({ page }) => {
  // พยายามเข้าหน้าที่ต้อง login ก่อน
  await page.goto('/admin/settings');

  // ตรวจว่า redirect ไปหน้า login
  await expect(page).toHaveURL(/.*login/);
});

Playwright auto-wait navigation เมื่อคลิกลิงก์หรือ submit form แต่บางกรณีต้อง wait เอง:

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

// รอ response จาก API
await page.waitForResponse(resp =>
  resp.url().includes('/api/login') && resp.status() === 200
);