Playwright MCP - เซิร์ฟเวอร์ MCP สำหรับการทำงานอัตโนมัติของเว็บเบราว์เซอร์สำหรับ LLM

• เซิร์ฟเวอร์ MCP (Model Context Protocol) ที่ทำงานบนพื้นฐานของ Playwright
• ให้ structured accessibility snapshot เพื่อให้ LLM โต้ตอบกับเว็บเพจได้ จึง รวดเร็วและมีน้ำหนักเบา
• ทำเว็บอัตโนมัติได้ด้วยข้อมูลแบบข้อความที่มีโครงสร้างเท่านั้น โดยไม่ต้องใช้สกรีนช็อตหรือ vision model
• การใช้งาน : การท่องเว็บเพจและกรอกฟอร์มอัตโนมัติ, การดึงข้อมูลจากคอนเทนต์ที่มีโครงสร้าง, การทดสอบอัตโนมัติแบบ LLM-based, การควบคุมเว็บเบราว์เซอร์ทั่วไปแบบ agent-based

การติดตั้ง

• config

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

• ติดตั้งได้ทันทีใน VSCode : Install in VS Code Insiders
  • หลังติดตั้งแล้ว สามารถใช้ Playwright MCP ได้จาก GitHub Copilot agent ใน VSCode

รายการเครื่องมือของ Snapshot Mode

• browser_navigate: ไปยัง URL
• browser_go_back / go_forward: ย้อนกลับ/ไปข้างหน้า
• browser_click / hover / drag: คลิกองค์ประกอบ, โฮเวอร์, ลาก
• browser_type: ป้อนข้อความในช่องกรอก (ตัวเลือก: submit)
• browser_select_option: เลือกดรอปดาวน์
• browser_press_key: กดปุ่มคีย์บอร์ด
• browser_snapshot: จับ accessibility snapshot
• browser_save_as_pdf: บันทึกหน้าเป็น PDF
• browser_wait: รอตามเวลาที่กำหนด (time สูงสุด 10 วินาที)
• browser_close: ปิดหน้า

รายการเครื่องมือของ Vision Mode

• browser_navigate / go_back / go_forward
• browser_screenshot: จับสกรีนช็อต
• browser_move_mouse / click / drag: ควบคุมเมาส์ตามพิกัด
• browser_type: ป้อนข้อความที่ตำแหน่งพิกัด
• browser_press_key
• browser_save_as_pdf
• browser_wait
• browser_close

[yangeok]

ลองเชื่อมต่อ Playwright MCP กับ cursor แล้ว แต่หน้า Namuwiki อ่านไม่ได้เลย..

[asheswook]

น่าจะเป็นเพราะการบล็อกบอตครับ

[crawler]

เมื่อวานตอนเห็นยังไม่รู้เลยว่าเป็นของ Microsoft โอ้โห ต้องลองใช้ดูแล้ว

[GN⁺]

ความคิดเห็นจาก Hacker News

• เครื่องมือนี้ดีมาก กำลังใช้งานร่วมกับ Claude Code แล้วได้ผลยอดเยี่ยม

  • ทิ้งคำสั่งไว้ใน CLAUDE.md ให้ตรวจสอบการเปลี่ยนแปลงด้วย Playwright
  • มันจะเริ่ม development server อัตโนมัติ ไปยังหน้าที่มีการเปลี่ยนแปลง และตรวจสอบว่าการเปลี่ยนแปลงทำงานได้หรือไม่
  • ถ้ามีสิ่งที่ไม่คาดคิด มันจะแก้ไขเอง
  • รู้สึกเหมือนได้ทำงานกับวิศวกรระดับกลางที่เก่งมากจริงๆ
  • ตอนนี้เป็นยุคที่น่าทึ่งจริงๆ

• ใช้ ariaSnapshot เพื่อให้ representation ของ DOM ในแบบที่เข้าถึงได้

  • แต่พอไปยังที่อย่าง Gmail โมเดลก็จะใช้ context หมดอย่างรวดเร็ว
  • กำลังทดลอง text representation ของหน้าที่กระชับกว่านี้
  • ใช้ Chrome session ของตัวเองได้ และไม่ต้องการ context size ขนาดใหญ่
  • อาจรีแฟกเตอร์ให้เป็น aria interface ที่ใช้กับ CDP ได้ด้วย

• มีแผนจะนำไปรวมกับ JIRA MCP เพื่ออ่าน "ขั้นตอนการทำซ้ำ" ของบั๊กทิกเก็ต แล้วตรวจสอบว่าสามารถทำซ้ำได้จริงหรือไม่

  • ไม่ค่อยเข้าใจคำวิจารณ์ที่มีต่อ MCP
  • การได้เห็น "ตัวเชื่อมต่อ" ระเบิดจำนวนขึ้นมาแบบ Cambrian explosion นั้นน่าสนใจมาก
  • มันจะกลายเป็น "App Store" ของโมเดลในแบบที่ Custom GPTs ของ OpenAI ไม่สามารถเป็นได้

• เครื่องมือใหม่ของ Microsoft ดูเหมือนจะเป็นคู่แข่งของ MCP-Playwright

  • เครื่องมือของ Microsoft ดูเรียบง่ายกว่า ขณะที่อีกตัวมีฟีเจอร์มากกว่า

• เป็นการปล่อยออกมาที่ยอดเยี่ยม แต่ก็สงสัยว่าทำไมถึงไม่รองรับ Playwright API ดั้งเดิม และรองรับเพียงชุดย่อยของการกระทำเท่านั้น

• ไม่รู้จัก Playwright แต่สงสัยว่ามันต่างจาก Puppeteer อย่างไร

  • ปัญหาของ Puppeteer คือบางครั้งมันไม่ได้ JavaScript ที่ถูกต้องในทันทีเพื่อทำงานง่ายๆ ให้เสร็จ เช่น การกดยอมรับแบนเนอร์คุกกี้

• ส่งเรื่องนี้ไปหลายครั้งแล้ว และอยากฟังเพิ่มเติมอีก

  • ยังมี Fetch-MCP ด้วย ซึ่งพัฒนาบน Playwright และรองรับ batch ด้วย น่าจะน่าสนใจถ้าเอามาเทียบกัน

• ต้องการ MCP สำหรับ Capybara เพื่อให้ LLMs เขียน Rails system tests ให้ฉัน และดีบักได้เมื่อมันทำงานไม่สำเร็จ

• code --add-mcp

  • สงสัยว่า Vscode มี MCP client แบบฝังมาให้หรือไม่

• สงสัยว่าเครื่องมือนี้มีไว้สำหรับ test automation หรือมีไว้เพื่อใช้ Playwright เป็น "Operator" ภายในเอเจนต์