ใช้ Copilot และ Claude สร้าง Playwright Script

ส่วนซ้ำ ๆ คือจุดคุ้มที่สุด

AI ทำได้ดีในส่วนเหล่านี้:

• Boilerplate: import, test.describe, fixture setup
• Locator suggestion: แนะนำ selector หลายแบบจาก HTML
• Pattern translation: แปลง manual steps เป็น Playwright API
• Refactor to POM: รวม logic ที่ซ้ำเป็น Page Object
• Add retries / timeouts: เพิ่ม config ที่จำเป็น

ส่วนที่ AI ทำได้ปานกลาง (ต้อง verify หนัก):

• เลือก best locator (อาจเลือก css selector เปราะ)
• เขียน assertion ที่มีความหมาย (มักเขียน toBeVisible แทนที่จะ assert ค่าจริง)
• handle dynamic content / async race condition

ส่วนที่ AI พังบ่อย:

• เดา selector จาก description ที่กำกวม
• ใช้ waitForTimeout(1000) แทนการ wait แบบ deterministic
• mock ข้อมูลที่ไม่ตรงกับ shape จริงของ API

โครงที่ใช้ได้กับ feature ทุกแบบ

You are a senior Playwright test engineer using TypeScript.

Context:
- Project uses Playwright Test, TypeScript, page object pattern
- Base URL: https://app.example.com
- Auth: shared storage state at .auth/user.json

HTML snippet of the page being tested:
[PASTE HTML]

User flow to automate:
1. Navigate to /products
2. Search for "laptop"
3. Click first result
4. Add to cart
5. Verify cart count = 1

Constraints:
- Use getByRole, getByLabel, getByTestId — avoid CSS selectors
- Use Playwright auto-waiting; do NOT use waitForTimeout
- Each test must have at least one meaningful assertion per step
- Keep test under 30 lines

Output: Single test file ready to drop into tests/.

หลัก prompt ที่ทำให้ AI gen script ดี:

• ใส่ HTML snippet จริงให้เห็น (ไม่ใช่ description)
• ระบุ locator strategy ที่ทีมใช้
• ห้าม waitForTimeout explicit ตั้งแต่ prompt
• บอก convention POM ของทีม

ดู output ต่างกันชัดเจน

Prompt แย่:

write playwright test for adding product to cart

Output:

test('add to cart', async ({ page }) => {
  await page.goto('/');
  await page.click('.product');
  await page.click('.add-to-cart');
  await page.waitForTimeout(2000);
  expect(true).toBeTruthy();
});

ปัญหา:

• CSS selector เปราะ
• ใช้ waitForTimeout
• assertion = true.toBeTruthy() ไม่มีความหมาย
• ไม่มี navigation flow ครบ

Prompt ดี (ใช้ template ข้างบน):

Output:

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

test.describe('Product cart', () => {
  test('user can add a laptop to cart', async ({ page }) => {
    await page.goto('/products');

    await page.getByRole('searchbox').fill('laptop');
    await page.getByRole('button', { name: 'Search' }).click();

    const firstResult = page.getByTestId('product-card').first();
    await expect(firstResult).toBeVisible();
    await firstResult.click();

    await page.getByRole('button', { name: 'Add to cart' }).click();

    await expect(page.getByTestId('cart-count')).toHaveText('1');
  });
});

ความต่าง:

• locator แบบ role-based, อ่านง่าย
• ไม่มี hard-coded wait
• assertion ตรงกับ business behavior

รู้ pattern แล้วแก้ใน review ได้เร็ว

waitForTimeout(N): AI ชอบใส่เพื่อ "ความปลอดภัย" → เปลี่ยนเป็น expect(locator).toBeVisible() หรือ waitForResponse

Selector แบบ chain ยาว: .container > .row > div:nth-child(2) → เปลี่ยนเป็น getByRole หรือ getByTestId

Assertion อ่อน: expect(page).toHaveURL(/.+/) → เปลี่ยนเป็น URL เฉพาะหรือ assert content

Test ที่ยาวเกิน 50 บรรทัด: AI ชอบเขียนรวมหลาย scenario → split เป็นหลาย test

ไม่จัดการ async: ลืม await หน้า action → ตรวจ await ทุก action

Mock ที่ shape ไม่ตรง: route.fulfill({ json: { foo: 'bar' } }) แต่ frontend คาด schema เต็ม → ดึง shape จาก API จริงก่อน

4 ขั้น ใช้กับทุก feature ใหม่

1. Spike แบบ manual: ลองทำ flow เองในเบราว์เซอร์ จด step ที่ทำ + selector ที่เห็น
2. Prompt AI ด้วย context: ใส่ HTML, step, convention ทีม → AI gen draft
3. Run + review: รัน test จริง ดูว่าผ่านไหม / locator ตรงไหม / assert มีความหมาย
4. Refactor: เก็บส่วนที่ซ้ำเป็น Page Object, ลบ wait ที่ไม่จำเป็น

ระยะเวลา: feature เล็ก (1 flow) ~10-15 นาที vs เขียนเอง 30-45 นาที