ให้ Claude ควบคุม Browser ดึงข้อมูล กรอกฟอร์มได้แม่นยำ 100% ผ่านโครงสร้างเว็บ (Accessibility Tree) เร็วขึ้น และประหยัด Token กว่าเดิม
ปกติแล้วเวลาที่เราสั่งให้ Claude ใช้ฟีเจอร์ "Computer Use" เพื่อควบคุมหน้าจอ มันจะใช้วิธีแคปภาพหน้าจอ (Screenshot) แล้ววิเคราะห์พิกัด X/Y เพื่อขยับเมาส์ไปคลิก ซึ่งวิธีนี้ กิน Token มหาศาลและทำงานช้ามาก
Playwright-MCP จาก Microsoft คือตัวเปลี่ยนเกม! มันเชื่อมต่อ Claude เข้ากับ Browser โดยตรง และเปลี่ยนวิธีการอ่านหน้าเว็บจาก "การดูรูปภาพ" เป็น "การอ่านโครงสร้างผู้พิการ (Accessibility Tree)"
| คุณสมบัติ | Standard Computer Use 📉 | Playwright-MCP 🚀 |
|---|---|---|
| วิธีมองเห็นเว็บ | ดูจากไฟล์รูปภาพ (Screenshots) | ดูโครงสร้าง Code (Accessibility Tree) |
| ความแม่นยำ | ปานกลาง (กะระยะพิกัดเมาส์) | แม่นยำ 100% (ล็อกเป้าหมายผ่านโค้ด) |
| การใช้ Token | สูงมาก เปลืองโควต้า Limit เร็ว | ประหยัดมาก (ส่งแค่ Text ล้วนๆ) |
| การแสดงผล | แย่งเมาส์หน้าจอหลักของคุณ | เปิดหน้าต่าง Browser แยก ไม่แย่งเมาส์ |
ข่าวดีคือ คุณไม่ต้องใช้ Docker แล้วครับ! ทาง Playwright ทำระบบมาให้รันผ่านคอมพิวเตอร์ของคุณได้โดยตรง สิ่งที่คุณต้องเตรียมมีเพียง:
ทำตามขั้นตอนด้านล่างนี้ช้าๆ ใช้เวลาไม่เกิน 3 นาทีครับ:
เราต้องไปแก้ไฟล์ตั้งค่าเพื่อให้ Claude รู้จักกับ Playwright ให้ค้นหาไฟล์ claude_desktop_config.json ตามระบบปฏิบัติการของคุณ:
1. กดปุ่ม Windows + R เพื่อเปิดหน้าต่าง Run
2. พิมพ์ %APPDATA%\Claude แล้วกด Enter
3. จะเจอไฟล์ claude_desktop_config.json (ถ้าไม่มีให้สร้างไฟล์ Text ขึ้นมาใหม่ ตั้งชื่อให้เป๊ะแล้วเปลี่ยนนามสกุลเป็น .json)
1. เปิดแอป Finder
2. กดปุ่ม Cmd + Shift + G
3. พิมพ์ ~/Library/Application Support/Claude แล้วกด Enter
เปิดไฟล์ JSON ขึ้นมาด้วย Notepad หรือ TextEdit ลบของเดิมออกให้หมด แล้ววาง Code ออฟฟิเชียลตัวนี้ลงไป:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"-y",
"@playwright/mcp@latest"
]
}
}
}
*คำสั่ง -y จะช่วยกดยอมรับการโหลดแพ็กเกจให้คุณอัตโนมัติ
ให้ทำการ ปิดโปรแกรม Claude Desktop แบบสนิท (Quit/Exit) แล้วเปิดโปรแกรมขึ้นมาใหม่
หากสำเร็จ ที่หน้าแชทของ Claude จะมีไอคอน "รูปค้อน" (Tools) โผล่ขึ้นมา แสดงว่าพร้อมใช้งานแล้วครับ
ระบบจะทำงานในโหมด Headed (เปิดหน้าต่าง Browser ให้เห็นการทำงาน) ลองสั่งงานด้วยคำสั่งเหล่านี้ดูครับ:
"ให้ใช้ Playwright ไปที่เว็บ https://demo.playwright.dev/todomvc แล้วทำการเพิ่มรายการ Todo เข้าไป 3 รายการ ได้แก่ 'ซื้อกาแฟ', 'ประชุมทีม', 'ทำรีพอร์ต' จากนั้นแคปภาพหน้าจอมาให้ดูด้วย"
"ใช้ Playwright เปิดเข้าเว็บข่าว [URL] ไล่อ่านหัวข้อข่าวหน้าแรกทั้งหมด แล้วสรุปมา 5 ข่าวที่เกี่ยวกับวงการ AI โดยจัดเรียงเป็นตาราง (Table)"
คุณสามารถปรับแต่งพฤติกรรมของ Playwright MCP ได้อย่างละเอียด เช่น การบังคับให้เปิดแบบซ่อนหน้าจอ, เปลี่ยนเบราว์เซอร์, หรือจำลองขนาดหน้าจอมือถือ โดยการเติม Option เหล่านี้เข้าไปใน "args" ของไฟล์ตั้งค่า JSON ครับ
หากต้องการเปิดแบบ ซ่อนหน้าจอ, เปลี่ยนเป็น Firefox, และปรับขนาดเป็น Full HD ให้เขียนแบบนี้:
"args": ["-y", "@playwright/mcp@latest", "--headless", "--browser=firefox", "--viewport-size=1920x1080"]
| Option | รายละเอียด (Description) | Env Variable |
|---|---|---|
--browser <browser> |
เลือกเบราว์เซอร์ที่จะใช้งาน (chrome, firefox, webkit, msedge) ค่าเริ่มต้นคือ chrome | PLAYWRIGHT_MCP_BROWSER |
--headless |
รันแบบซ่อนหน้าต่างเบราว์เซอร์ (ทำงานเบื้องหลังเงียบๆ) | PLAYWRIGHT_MCP_HEADLESS |
--device <device> |
จำลองหน้าจออุปกรณ์มือถือ/แท็บเล็ต (เช่น "iPhone 15") | PLAYWRIGHT_MCP_DEVICE |
--viewport-size <size> |
กำหนดขนาดหน้าต่างการทำงาน (เช่น "1280x720") | PLAYWRIGHT_MCP_VIEWPORT_SIZE |
--isolated |
รันแบบ In-memory profile (ไม่จำรหัสผ่านหรือคุ้กกี้ เริ่มใหม่ทุกครั้ง) | PLAYWRIGHT_MCP_ISOLATED |
--user-data-dir <path> |
กำหนดโฟลเดอร์สำหรับเก็บข้อมูลผู้ใช้ (Profile Directory) แบบเฉพาะเจาะจง | PLAYWRIGHT_MCP_USER_DATA_DIR |
--extension |
เชื่อมต่อผ่านส่วนขยายของเบราว์เซอร์ (Browser extension) | PLAYWRIGHT_MCP_EXTENSION |
--config <path> |
ชี้ไปยังไฟล์ Config.json แบบขั้นสูง (แทนการพิมพ์ทีละบรรทัด) | PLAYWRIGHT_MCP_CONFIG |
--caps <caps> |
เปิดใช้ขีดความสามารถเฉพาะส่วน (พิมพ์แยกด้วยลูกน้ำ) | PLAYWRIGHT_MCP_CAPS |
--storage-state <path> |
โหลดสถานะ Storage (เช่น Session หรือคุกกี้ที่เคยเซฟไว้) | PLAYWRIGHT_MCP_STORAGE_STATE |
--port <port> |
กำหนดพอร์ต HTTP Transport สำหรับ Standalone Server | PLAYWRIGHT_MCP_PORT |
--host <host> |
กำหนด Server host (เช่น 0.0.0.0 สำหรับ Docker) | PLAYWRIGHT_MCP_HOST |
--executable-path <path> |
ระบุ Path ของโปรแกรมเบราว์เซอร์ตัวอื่นในเครื่อง (Custom browser) | PLAYWRIGHT_MCP_EXECUTABLE_PATH |
--proxy-server <url> |
ตั้งค่า Proxy Server (เช่น http://myproxy:3128) | PLAYWRIGHT_MCP_PROXY_SERVER |
--proxy-bypass <hosts> |
กำหนด Host ที่ไม่ต้องผ่าน Proxy | PLAYWRIGHT_MCP_PROXY_BYPASS |
--user-agent <ua> |
ปลอมแปลง User Agent ตามที่ต้องการ | PLAYWRIGHT_MCP_USER_AGENT |
--ignore-https-errors |
ข้ามการแจ้งเตือนเว็บไซต์ที่มีใบรับรอง HTTPS ไม่ถูกต้อง | PLAYWRIGHT_MCP_IGNORE_HTTPS_ERRORS |
--timeout-action <ms> |
เวลาสูงสุดที่รอให้แอคชันสำเร็จ (ค่าเริ่มต้น 5000ms หรือ 5 วินาที) | PLAYWRIGHT_MCP_TIMEOUT_ACTION |
--timeout-navigation <ms> |
เวลาสูงสุดในการรอหน้าเว็บโหลด (ค่าเริ่มต้น 60000ms หรือ 60 วินาที) | PLAYWRIGHT_MCP_TIMEOUT_NAVIGATION |
--blocked-origins <origins> |
บล็อกไม่ให้โหลดข้อมูลจากโดเมนเหล่านี้ (ช่วยประหยัดแบนด์วิดท์) | PLAYWRIGHT_MCP_BLOCKED_ORIGINS |
--grant-permissions <perms> |
อนุญาตสิทธิ์ล่วงหน้า (เช่น ไมโครโฟน, ตำแหน่งที่ตั้ง) | PLAYWRIGHT_MCP_GRANT_PERMISSIONS |
--block-service-workers |
บล็อกการทำงานของ Service Workers | PLAYWRIGHT_MCP_BLOCK_SERVICE_WORKERS |
--save-session |
บันทึกข้อมูล Session การทำงานลงในดิสก์ | PLAYWRIGHT_MCP_SAVE_SESSION |
--save-video <size> |
อัดวิดีโอหน้าจออัตโนมัติ (เช่น "800x600") | PLAYWRIGHT_MCP_SAVE_VIDEO |
วิธีแก้: เครื่องคุณอาจจะยังไม่ได้ติดตั้ง Node.js หรือติดตั้งแล้วแต่เครื่องยังไม่อัปเดต ให้ไปโหลดจาก Nodejs.org เมื่อติดตั้งเสร็จ ต้องรีสตาร์ทคอมพิวเตอร์ 1 ครั้ง ครับ
วิธีแก้: เข้าไปแก้ไฟล์ claude_desktop_config.json โดยเพิ่ม "--headless" เข้าไปบรรทัดสุดท้ายแบบนี้:
"args": ["-y", "@playwright/mcp@latest", "--headless"]
ตอบ: จำครับ โดยค่าเริ่มต้นระบบจะ เก็บสถานะและคุ้กกี้ (Persistent) เอาไว้ หมายความว่าล็อคอินเว็บวันนี้ พรุ่งนี้มาสั่งงานใหม่ก็ไม่ต้องล็อคอินซ้ำครับ
ด้วยพลังของ Playwright MCP การทำ Web Automation ร่วมกับ Claude จะกลายเป็นเรื่องง่าย ประหยัด Token และรวดเร็วกว่าเดิมหลายเท่า ขอให้สนุกกับการสร้างสรรค์ครับ!
เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า