Workshop สำหรับเชื่อม Claude Code เข้ากับ browser automation ผ่าน Playwright MCP

#ภาพรวม

Playwright MCP (Model Context Protocol) ทำให้ Claude Code สามารถควบคุม browser ผ่าน Playwright ได้ เช่น

  • เปิด URL และเปลี่ยนหน้าเว็บ
  • อ่านโครงสร้างและ accessibility snapshot ของหน้าเว็บ
  • คลิกปุ่มและลิงก์
  • กรอกฟอร์ม
  • ตรวจสอบข้อความและ UI
  • ทดสอบ user flow
  • ช่วยสร้างและแก้ไข Playwright tests
  • ใช้ browser context เพื่อสำรวจปัญหาของ Web Application

โครงสร้างการทำงานโดยย่อ:

Developer
   |
   v
Claude Code
   |
   | MCP
   v
Playwright MCP Server
   |
   v
Browser
   |
   v
Web Application

#1. สิ่งที่ต้องเตรียม

ตรวจสอบ Node.js และ npm:

node --version
npm --version

แนะนำให้ใช้ Node.js 20 ขึ้นไปตามเอกสาร Playwright MCP ปัจจุบัน

ตรวจสอบ Claude Code:

claude --version

หากยังไม่ได้ติดตั้ง Claude Code ให้ติดตั้งและทำ authentication ตามเอกสารของ Claude Code ก่อน

#2. เพิ่ม Playwright MCP ให้ Claude Code

ใช้คำสั่ง:

claude mcp add playwright npx @playwright/mcp@latest

หากต้องส่ง option เพิ่มให้ Playwright MCP ควรใช้ -- คั่น option ของ Claude Code กับ command ของ MCP เช่น:

claude mcp add playwright -- npx @playwright/mcp@latest --headless

#3. ตรวจสอบ MCP Server

ตรวจสอบรายการ MCP:

claude mcp list

ควรพบ server ชื่อประมาณ:

playwright

จากนั้นเปิด Claude Code:

claude

ภายใน session สามารถใช้:

/mcp

เพื่อตรวจสอบ MCP servers และสถานะการเชื่อมต่อ

#4. ทดสอบครั้งแรก

เปิด Claude Code จาก project directory:

cd my-web-project
claude

จากนั้นสั่ง:

Use Playwright MCP to navigate to
https://demo.playwright.dev/todomvc

Add three todo items:
- Learn Playwright
- Learn MCP
- Test with Claude Code

Then describe the resulting page.

Claude Code จะเลือก Playwright MCP tools เพื่อเปิด browser และโต้ตอบกับหน้าเว็บ

#5. ใช้กับเว็บที่กำลังพัฒนา

สมมติ application ทำงานที่:

http://localhost:3000

สั่ง Claude Code:

Use Playwright MCP to test http://localhost:3000.

Check:
1. The home page loads successfully.
2. The navigation menu is visible.
3. The login page can be opened.
4. Required-field validation works.
5. Report any UI or console problems you find.

วิธีนี้เหมาะกับ exploratory testing และ debugging ระหว่างพัฒนา

#6. ให้ Claude ช่วยสร้าง Playwright Test

ตัวอย่าง prompt:

Use Playwright MCP to inspect http://localhost:3000/login.

Perform the login flow using the browser.

After understanding the UI, create a Playwright test for the login flow.
Prefer role, label, placeholder, or test-id locators over brittle CSS selectors.
Save the test under tests/login.spec.ts.

แนวคิด workflow:

Inspect real UI
     |
     v
Discover accessible elements
     |
     v
Perform user flow
     |
     v
Understand expected behavior
     |
     v
Generate Playwright test
     |
     v
Run and refine test

#7. ใช้ Headless Mode

หากไม่ต้องการให้ browser UI แสดง:

claude mcp remove playwright
claude mcp add playwright -- npx @playwright/mcp@latest --headless

เหมาะกับ remote development, CI-like environment หรือเครื่องที่ไม่ต้องการเปิดหน้าต่าง browser

#8. เลือก Browser

ตัวอย่าง Firefox:

claude mcp remove playwright
claude mcp add playwright -- npx @playwright/mcp@latest --browser=firefox

ตัวอย่าง Chromium/Chrome ควรตรวจ option ที่รองรับในเวอร์ชัน Playwright MCP ที่ติดตั้ง:

npx @playwright/mcp@latest --help

#9. Isolated Session

หากต้องการให้แต่ละ session เริ่มจาก browser state ใหม่:

claude mcp remove playwright
claude mcp add playwright -- npx @playwright/mcp@latest --isolated

เหมาะกับการทดสอบที่ต้องการลดผลกระทบจาก cookie, local storage หรือ login state เดิม

#10. ตัวอย่าง Prompt สำหรับ Software Testing

#Smoke Test

Use Playwright MCP to perform a smoke test on http://localhost:3000.
Check the major pages and report failed navigation, visible errors,
broken controls, and unexpected behavior.

#Form Validation

Use Playwright MCP to inspect the registration form.

Test empty fields, invalid email, short password,
password confirmation mismatch, and a valid submission.

Summarize the observed validation behavior.

#Responsive UI

Inspect the application using Playwright MCP.
Check important pages at desktop and mobile viewport sizes.
Identify layout problems or inaccessible controls.

#Regression Test Generation

Use Playwright MCP to explore the checkout workflow.

After completing the workflow successfully,
create maintainable Playwright regression tests
for the critical path.

#11. แนะนำ CLAUDE.md สำหรับ Project

สามารถกำหนดแนวทางให้ Claude Code ใน CLAUDE.md เช่น:

# Testing Guidelines

- Use Playwright MCP when inspecting or interacting with the web UI.
- Verify the actual UI before generating E2E tests.
- Prefer getByRole(), getByLabel(), getByPlaceholder(), and getByTestId().
- Avoid brittle XPath and deeply nested CSS selectors.
- Keep tests independent.
- Do not modify production data unless explicitly requested.
- Report discovered defects separately from test-code changes.

แนวทางนี้ช่วยให้ Claude Code มี testing conventions ที่สม่ำเสมอใน project

#12. Troubleshooting

#claude mcp list ไม่พบ Playwright

เพิ่มใหม่:

claude mcp add playwright npx @playwright/mcp@latest

#npx ใช้งานไม่ได้

ตรวจสอบ:

node --version
npm --version
npx --version

หากไม่พบคำสั่ง ให้ติดตั้ง/แก้ PATH ของ Node.js ก่อน

#เพิ่ม argument แล้ว command error

ใช้ separator:

claude mcp add playwright -- npx @playwright/mcp@latest --headless

#Windows มีปัญหากับ npx

เริ่มจากตรวจสอบ:

where node
where npm
where npx

และทดสอบ MCP package โดยตรง:

npx @playwright/mcp@latest --help

หาก stdio ผ่าน npx.cmd มีปัญหาใน environment เฉพาะเครื่อง สามารถติดตั้ง @playwright/mcp ใน project และเรียก CLI ผ่าน node โดยตรงเป็นแนวทาง fallback ได้

#13. Architecture

flowchart LR
    DEV[Developer] --> CC[Claude Code]
    CC -->|MCP| MCP[Playwright MCP Server]
    MCP --> PW[Playwright]
    PW --> B[Browser]
    B --> APP[Web Application]

    APP --> B
    B -->|Accessibility Snapshot| PW
    PW --> MCP
    MCP --> CC
    CC --> DEV

#14. สรุป

การเชื่อม Playwright MCP กับ Claude Code ทำให้ Claude Code ไม่ได้ทำงานเฉพาะกับ source code แต่สามารถเข้าไปสำรวจและโต้ตอบกับ Web Application ผ่าน browser ได้จริง

คำสั่งหลักที่ควรจำคือ:

claude mcp add playwright npx @playwright/mcp@latest
claude mcp list
claude

จากนั้นสามารถสั่ง Claude Code ให้สำรวจ UI, ทดสอบ user flow, วิเคราะห์ปัญหา และนำสิ่งที่ค้นพบมาสร้าง Playwright tests ได้

#References