วิธีใช้ Playwright MCP ให้ agent เปิด browser ทดสอบ UI จริง, ตั้งค่าใน 5 นาที และฟรี 100%

โดย Nokka (นก-กา) | 22 สิงหาคม 2026

บทความนี้เป็นส่วนหนึ่งของซีรีส์ "ทีมทั่วไปแก้คอขวด QA ยังไง"

Playwright MCP อยู่ตรงไหนของการทดสอบ: มันคือ "building block", ไม่ใช่ QA product เต็มรูปแบบ แต่เป็น "ตาและมือ" ที่ให้ agent เปิด browser คลิก/พิมพ์/อ่านหน้าเว็บได้ นี่คือ primitive เดียวกับที่ OpenAI ใช้ (Chrome DevTools Protocol) แต่เป็น open-source และฟรี

ก่อนอื่น, Playwright MCP คืออะไร

Playwright MCP คือ MCP server ที่เปิด browser automation ให้ agent ผ่าน Model Context Protocol [1]

หลักการ: agent (Claude Code, Cursor, VS Code) เรียก MCP tools เพื่อเปิด browser, นำทาง, คลิก, พิมพ์, และอ่าน accessibility snapshot ของหน้าเว็บ

จุดเด่น: ฟรี 100% + open-source + เป็น first-party ของ Microsoft (ทีมเดียวกับ Playwright)

สิ่งที่ต้องมีก่อนเริ่ม

• Node.js 20 ขึ้นไป
• MCP client: VS Code, Cursor, Windsurf, Claude Code, Claude Desktop

ขั้นตอนติดตั้ง (5 นาที)

ขั้นที่ 1: เพิ่ม MCP server ลง client

เพิ่ม config นี้ลง MCP client ของคุณ:

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

browser จะดาวน์โหลดอัตโนมัติเมื่อใช้ครั้งแรก [1]

ขั้นที่ 2: สั่ง agent ครั้งแรก

ลองสั่ง agent:

Navigate to https://demo.playwright.dev/todomvc and add a few todo items.

agent จะเรียก MCP tools เปิด browser, นำทาง, และโต้ตอบ, คืน accessibility snapshot ทุกขั้น

วงจรการทำงาน (4 ขั้น)

ทุก MCP interaction วนตามวงจรนี้ [1]:

1. Navigate, browser_navigate เปิด URL
2. Snapshot, tools คืน accessibility tree พร้อม element refs
3. Interact, LLM ใช้ refs คลิก/พิมพ์/กรอก
4. Re-snapshot, ทุก action คืนสถานะอัปเดต

ตัวอย่าง prompt ที่ใช้บ่อย

Go to https://example.com and take a screenshot.

Open https://demo.playwright.dev/todomvc, add three todos, check off the first one, and take a screenshot.

Navigate to https://news.ycombinator.com and list the top 5 stories.

Save the current browser state to auth.json so we can skip login next time.

ใช้กับ AI agent ยังไง (วิธีของ OpenAI แบบสำเร็จรูป)

นี่คือจุดที่ Playwright MCP เชื่อมกับบทความ "คอขวดย้ายไปที่ QA":

1. Agent เขียนโค้ด
2. Agent ใช้ Playwright MCP เปิด browser ทดสอบ UI จริง
3. Agent ตรวจว่า "พฤติกรรมเปลี่ยนตามที่ตั้งใจไหม"
4. Agent แก้เอง หรือเปิด PR พร้อมหลักฐาน

นี่คือ "ย้าย verification เข้า agent loop" แบบเดียวกับ OpenAI แต่ใช้ของ open-source ฟรี

ข้อควรระวัง

1. ไม่ใช่ QA product เต็มรูปแบบ, ไม่มี test format, ไม่มี self-healing, ไม่มี verification workflow, มันคือ "building block" ที่ต้องประกอบเอง [2]
2. ไม่มี maintenance model, ถ้า UI เปลี่ยน test ที่เขียนด้วย selector จะพัง ต้องแก้เอง (ต่างจาก Shiplight ที่ self-healing)
3. ต้อง setup เอง, ไม่มี dashboard, ไม่มี CI integration สำเร็จรูป

สรุป

Playwright MCP คือ "ตาและมือ" ฟรีที่ให้ agent ทดสอบ UI จริง, เป็น primitive เดียวกับที่ OpenAI ใช้ แต่ open-source

ถ้าทีมคุณใช้ Claude Code/Cursor อยู่แล้ว และอยากให้ agent "ตรวจเอง" โดยไม่เสียเงิน, Playwright MCP คือจุดเริ่มต้นที่ถูกต้อง

แต่ถ้าอยากได้ "ครบวงจร + self-healing" ให้ขยับไป Shiplight (บทความก่อนหน้า)

---

สรุปมุมมองของผม

ผมมองว่า Playwright MCP คือ "จุดเริ่มต้นที่ทุกทีมควรรู้", เพราะมันฟรี, open-source, และเป็น first-party ของ Microsoft ทำให้เชื่อถือได้

แต่ผมก็ต้องเตือนตรงๆ: มันคือ "building block" ไม่ใช่ "solution", ถ้าทีมคุณอยากได้ self-healing + dashboard + CI integration ต้องประกอบเอง หรือใช้ Shiplight แทน

ทีมคุณลองให้ agent เปิด browser ทดสอบ UI เองแล้วหรือยัง? คอมเมนต์บอกผมได้ครับ

แหล่งอ้างอิง

[1] Playwright. "Playwright MCP, Installation". 2026. https://playwright.dev/mcp/installation

[2] Shiplight AI. "The Best AI QA Tools in 2026". 2026. https://www.shiplight.ai/blog/best-ai-qa-tools-2026

---

บทความนี้วิเคราะห์จาก Playwright documentation และ Shiplight AI ข้อมูล ณ 22 สิงหาคม 2026 Nokka

บทความนี้เขียนโดย AI (DeepSeek V4 Pro) ภายใต้การดูแลของ Nokka