MCP Tools35.5k

Playwright MCP

ให้ AI เปิดเว็บ คลิก พิมพ์ และอ่านหน้าจอแทนคุณได้จริง เหมือนมีคนนั่งกดเมาส์ให้

open_in_newดูบน GitHub

terminalคำสั่งที่ใช้ได้

  • browser_navigateเปิดเว็บไปยังลิงก์ที่กำหนด
  • browser_snapshotอ่านโครงสร้างหน้าเว็บออกมาเป็นข้อความ เพื่อให้ AI รู้ว่ามีอะไรบนหน้าบ้าง
  • browser_clickคลิกปุ่มหรือลิงก์บนหน้าเว็บ
  • browser_typeพิมพ์ข้อความลงในช่องกรอก
  • browser_fill_formกรอกฟอร์มหลายช่องในครั้งเดียว
  • browser_select_optionเลือกตัวเลือกในเมนู dropdown
  • browser_take_screenshotถ่ายภาพหน้าจอเว็บเก็บไว้
  • browser_wait_forรอให้ข้อความหรือองค์ประกอบที่ต้องการโผล่ขึ้นมาก่อนทำขั้นต่อไป

มันคืออะไร

Playwright MCP คือสะพานที่ทำให้ AI อย่าง Claude เปิดเว็บเบราว์เซอร์ตัวจริงขึ้นมา แล้วลงมือคลิก พิมพ์ เลื่อนหน้า กรอกฟอร์ม และอ่านสิ่งที่อยู่บนหน้าได้เอง โดยที่คุณไม่ต้องนั่งกดเมาส์ ปกติ AI ในแชตทำได้แค่คุยตอบ มันออกไปกดปุ่มบนเว็บแทนคุณไม่ได้ เครื่องมือนี้คือส่วนที่เติมมือกับตาให้มัน

วิธีที่มันให้ AI "เห็น" หน้าเว็บคือจุดที่ฉลาด แทนที่จะถ่ายรูปหน้าจอแล้วให้ AI เพ่งดูภาพว่าปุ่มอยู่ตรงไหน มันดึงโครงสร้างของหน้าเว็บออกมาเป็นข้อความรายการ เช่น "ปุ่มชื่อ ค้นหา" "ช่องกรอกชื่อ อีเมล" "ลิงก์ชื่อ เข้าสู่ระบบ" เหมือนยื่นสารบัญของหน้าให้ AI อ่าน แทนที่จะให้มันมองรูปถ่ายแล้วเดาเอา ผลคือมันทำงานเร็วขึ้น เดาพลาดน้อยลง และไม่ต้องพึ่งโมเดลที่อ่านภาพ โครงสร้างที่ว่านี้คือสิ่งที่เว็บมีไว้ให้โปรแกรมอ่านหน้าจอช่วยคนตาบอดอยู่แล้ว เรียกว่า accessibility tree เครื่องมือนี้แค่หยิบมันมาใช้ต่อ

แก้ปัญหาอะไรให้คุณ

งานบนเว็บที่ซ้ำ ๆ น่าเบื่อ และกินเวลา เช่นเปิดทีละหน้าไปคัดลอกข้อมูล กรอกฟอร์มเดิมหลายสิบรอบ หรือเช็กราคาในหลายเว็บ ปกติคุณต้องทำเองทีละคลิก ด้วยเครื่องมือนี้คุณบอก AI เป็นภาษาคนว่าอยากให้ทำอะไรบนเว็บ แล้วมันลงมือทำให้ คุณไม่ต้องเขียนโค้ดหรือรู้จัก Playwright เลย แค่สั่งงานเป็นคำพูดธรรมดา ส่วนที่ยากอย่างการหาว่าปุ่มไหนคือปุ่มไหน AI จัดการเองจากรายการที่เครื่องมือดึงมาให้

เอาไปทำอะไรได้บ้าง

  • ให้ AI เข้าไปอ่านข้อมูลจากหน้าเว็บแล้วสรุปหรือดึงมาเป็นตาราง เช่นเก็บราคาสินค้าจากหลายหน้า
  • กรอกฟอร์มซ้ำ ๆ ให้ เช่นลงทะเบียน ตอบแบบสอบถาม หรือใส่ข้อมูลทีละรายการ
  • ทดสอบเว็บของคุณเองว่ากดแล้วใช้งานได้จริงไหม ลิงก์เสียหรือเปล่า หน้าโหลดถูกไหม
  • ถ่ายภาพหน้าจอแต่ละขั้นเก็บไว้ หรือบันทึกหน้าเว็บเป็น PDF
  • ทำงานหลายขั้นต่อเนื่อง เช่นเข้าสู่ระบบ ไปหน้าที่ต้องการ คลิก แล้วคัดลอกผลลัพธ์ออกมา

เริ่มใช้ทีละขั้น

  1. คัดลอกลิงก์ GitHub ด้านล่าง
  2. เปิด Claude Code, Claude Cowork หรือ Codex แล้ววางลิงก์ บอกมันว่า "ช่วยติดตั้งและตั้งค่าเครื่องมือนี้ให้หน่อย"
  3. ลองสั่งงานง่าย ๆ ก่อน เช่น "เปิดเว็บ example.com แล้วบอกหน่อยว่าบนหน้ามีปุ่มหรือลิงก์อะไรบ้าง" เพื่อดูว่ามันเปิดเบราว์เซอร์และอ่านหน้าได้แล้ว
  4. พอใช้ได้ ค่อยสั่งงานจริง เช่น "เข้าเว็บนี้ กรอกฟอร์มนี้ แล้วกดส่ง" หรือ "ไล่เปิดหน้าสินค้าทั้ง 5 ลิงก์นี้ เก็บราคามาให้หน่อย"

ตัวอย่าง prompt

เปิดเว็บ pantip.com ค้นหาคำว่า "รีวิวหูฟัง" แล้วเปิด 3 กระทู้แรก สรุปความเห็นหลักของแต่ละกระทู้มาให้เป็นภาษาไทย

ข้อควรระวัง

เครื่องมือนี้เปิดเบราว์เซอร์ตัวจริงและทำตามที่ AI สั่งบนหน้าเว็บ ทีมผู้สร้างบอกตรง ๆ ว่ามันไม่ใช่กำแพงกันความปลอดภัย ถ้าหน้าเว็บมีข้อความหลอกฝังอยู่ AI อาจถูกชักจูงให้ทำสิ่งที่คุณไม่ได้ตั้งใจ จึงไม่ควรปล่อยให้มันทำงานบนเว็บที่ไม่น่าไว้ใจหรือกับบัญชีสำคัญโดยไม่ดูแล โดยปกติมันใช้โปรไฟล์เบราว์เซอร์ที่จำการล็อกอินไว้ แปลว่าถ้าคุณเคยเข้าสู่ระบบเว็บไหนไว้ มันจะเข้าถึงบัญชีนั้นได้ด้วย ให้ระวังเรื่องนี้เป็นพิเศษ และโปรไฟล์แบบจำค่านี้ใช้ได้ทีละหนึ่งเบราว์เซอร์ ถ้าเปิดพร้อมกันหลายอันบนพื้นที่เดียวกันมันจะชนกัน นอกจากนี้บางความสามารถ เช่นการแอบดูหรือดักจับ network และการบันทึกวิดีโอ ต้องเปิดใช้เพิ่มเองตอนตั้งค่า ไม่ได้มีมาให้ทันทีตั้งแต่แรก

ลิงก์ GitHub

https://github.com/microsoft/playwright-mcp