Browser Testing Setup — Playwright MCP

เครื่องมือสำหรับให้ Agent ตรวจสอบ page ใน browser ได้โดยตรง
ใช้ร่วมกับ VS Code Agent mode

---

ภาพรวม

Playwright MCP คือ MCP server ที่เปิดให้ Agent สามารถ:

• เปิด browser และ navigate ไป URL
• Screenshot หน้า page
• ตรวจ console errors
• Click, fill form, ตรวจสอบ DOM
• ทดสอบ redirect (เช่น paid content → /login)
• ตรวจ layout ว่าแสดงผลถูกต้อง

---

ติดตั้ง

1. ติดตั้ง Playwright MCP

pnpm add -g @playwright/mcp

2. ติดตั้ง Browser

pnpm dlx playwright install chromium

3. เพิ่ม Config ใน VS Code

สร้างไฟล์ .vscode/mcp.json ที่ root ของ workspace (ไม่ใช่ settings.json):

{
  "servers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

⚠️ หมายเหตุ: VS Code เวอร์ชันใหม่ไม่รองรับการ config MCP ใน settings.json อีกต่อไป
ต้องใช้ไฟล์ .vscode/mcp.json แทนเท่านั้น

---

วิธีใช้งาน

เมื่อ setup เรียบร้อย Agent จะใช้ Playwright MCP อัตโนมัติเมื่อสั่ง เช่น:

ตรวจสอบหน้า http://localhost:4321/articles/typescript/bundling-guide

Agent จะทำได้:

• เปิด browser ไปที่ URL
• Screenshot หน้า page
• รายงาน console errors (ถ้ามี)
• ตรวจสอบว่า redirect ทำงานถูกต้อง

Testing Scenarios สำหรับแต่ละ phase ดูได้ที่ plan/test-scenarios.md

---

เปรียบเทียบ MCP Options

เครื่องมือ	Screenshot	Click/Interact	Multi-browser	หมายเหตุ
Playwright MCP	✅	✅	✅ Chrome/Firefox/Safari	แนะนำ
Puppeteer MCP	✅	✅	❌ Chrome only	ทางเลือก

---

Troubleshooting

Playwright MCP ไม่ทำงาน:

# ตรวจสอบว่าติดตั้งแล้ว
pnpm dlx @playwright/mcp --version

# ติดตั้ง browser ใหม่
pnpm dlx playwright install chromium --force

VS Code ไม่เห็น MCP server:

• ตรวจสอบว่ามีไฟล์ .vscode/mcp.json ที่ root ของ workspace
• Reload VS Code หลังสร้างหรือแก้ไข .vscode/mcp.json
• ตรวจสอบ JSON format ถูกต้อง (ไม่มี trailing comma)
• ห้าม config MCP ใน settings.json — ใช้ .vscode/mcp.json เท่านั้น