Playwright MCP คือ MCP Server ที่รวมเครื่องมือควบคุม Browser ของ Microsoft ไว้ ช่วยให้ AI สามารถเปิดเว็บไซต์ คลิก กรอกข้อมูล หรือทำงานได้เอง บทความนี้ ทีม Quicker จะพาไปทำความรู้จักว่า Playwright MCP คืออะไรกันให้มากขึ้น ทำงานอย่างไร พร้อมเปรียบเทียบ Playwright MCP vs Export Script .ts และสอนขั้นตอนการใช้งานแบบ Step by Step
ทำความรู้จัก Playwright MCP คืออะไร?
ก่อนที่จะทำความรู้จักว่า Playwright MCP คืออะไร? จะพาไปทำความรู้จักกันก่อนว่า MCP คืออะไร โดย MCP หรือ Model Context Protocol คือมาตรฐานกลางแบบเปิดที่ให้ AI เรียกใช้เครื่องมือภายนอกได้ด้วยรูปแบบเดียวกัน ไม่จำเป็นต้องเขียน Integration แยกให้ AI แต่ละตัว ส่วน Playwright MCP คือ MCP Server ที่รวมเครื่องมือควบคุม Browser ของ Microsoft ไว้ ทำให้ AI สามารถเปิดเว็บไซต์ คลิก กรอกข้อมูล หรือทำงานได้อัตโนมัติ
ยกตัวอย่างเช่น
MCP CLIENT: VS Code Copilot, Claude Code, Codex
รับคำสั่งจากผู้ใช้และส่งคำขอ
v
v
Playwright MCP SERVER: Playwright MCP บนเครื่องเรา
รับคำสั่งและควบคุม Browser
v
v
ปลายทาง: Microsoft Edge+D365FO
AI เปิดเว็บไซต์ คลิก กรอกข้อมูล หรือดำเนินการตามคำสั่งใน D365FO บน Cloud ได้
หลักการทำงานของ Playwright MCP คืออะไร?
หลักการทำงานของ Playwright MCP ทำงานง่าย ๆ ผ่าน 4 ขั้นตอน ดังนี้
1. อ่านหน้าจอ: โดยการดึง Snapshot โครงสร้างหน้าเว็บไซต์ว่ามีอะไรบ้าง เช่น ปุ่มกด ช่องกรอก หรือข้อความต่าง ๆ
2. AI วิเคราะห์ข้อมูล: นำข้อมูลจาก Snapshot มาวิเคราะห์ร่วมกับคำสั่งที่ได้รับ จากนั้นเลือกและตัดสินใจว่าต้องทำอะไรต่อ เช่น กดปุ่มไหน กรอกข้อมูลอะไร
3. สั่ง Browser: เรียกใช้งาน Tool เพื่อสั่งงานใน Browser เช่น Browser_Click เพื่อกดปุ่มหรือลิงก์ หรือ Browser_Type พิมพ์ข้อความลงในช่องใน Edge
4. ตรวจสอบผลลัพธ์ซ้ำ: ทำการอ่าน Snapchot ใหม่อีกครั้ง จากนั้นจะทำงานใน Step ถัดไป วนซ้ำจนจบ
ยกตัวอย่างคำสั่ง: “เข้า D365FO แล้วค้นหาใบสั่งซื้อเลขที่ PO-001”
- อ่านหน้าจอ: AI ตรวจดูว่าหน้า D365FO แสดงอะไรอยู่
- AI วิเคราะห์ข้อมูล: AI หาตำแหน่งช่องค้นหา
- สั่ง Browser: AI คลิกช่องค้นหาและพิมพ์ PO-001
- ตรวจสอบผลลัพธ์ซ้ำ: AI อ่านหน้าจอใหม่เพื่อดูว่าพบใบสั่งซื้อหรือไม่ หากพบแล้วจึงดำเนินการต่อ
เปิดข้อดีและข้อจำกัดของการใช้งาน Playwright MCP
ข้อดีของการใช้ Playwright MCP
- ไม่ต้องมี Model หรือ Source Code X++ เพราะสามารถทดสอบระบบผ่านหน้าเว็บไซต์
- ไม่จำเป็นต้องมีทักษะการเขียนโค้ดขั้นสูง ผู้ใช้งานสามารถสั่งงานผ่าน Chat เป็นภาษาธรรมชาติได้ทันที
- ใช้ได้ทุก Environment ที่เปิดผ่าน Browser เช่น UDE, Sandbox UAT และ PROD* ทั้งนี้ ขึ้นอยู่กับสิทธิ์การเข้าถึงและการตั้งค่าแต่ละ Environment
- ไม่ต้องติดตั้งอะไรในโปรแกรม D365FO เนื่องจากทำงานผ่าน Browser
- การใช้งาน Playwright MCP ไม่มีค่าใช้จ่าย เนื่องจากเป็น Open Source จาก Microsoft แต่อาจมีค่าใช้จ่ายเพิ่มเติมในการนำ AI มาใช้แทน
ข้อจำกัดของการใช้ Playwright MCP
- ต้องกำหนดสิทธิ์การใช้งาน Tool ตาม Permission ของ AI ตัวนั้น ๆ
- สามารถสั่งงานได้ด้วยภาษาธรรมชาติ แต่อาจใช้เวลาในการวิเคราะห์และดำเนินการนาน อีกทั้งผลลัพธ์อาจต่างกันออกไป
- อาจมีค่าบริการ AI ที่ใช้เพิ่มเติม เช่น Copilot หรือ Claude มีค่า License ของตัวเอง
Export Script .ts คืออะไร?
ในทุก ๆ ครั้งที่ AI สามารถกดหน้าเว็บไซต์ผ่าน Playwright MCP ผลลัพธ์ที่ส่งกลับมาจะมีโค้ด Playwright ของคลิกนั้นแนบมาด้วยเสมอ เช่น คำสั่งสำหรับคลิกปุ่ม New “await page.getByRole(‘button’, { name: ‘New’ }).click();”
ดังนั้น การ Export คือการรวมโค้ดจากทุกขั้นตอนที่ให้ AI ทำไปแล้วรวมเป็นไฟล์ test (.spec.ts) ไฟล์เดียว เพื่อเก็บไว้เป็น Script เพื่อรันได้ในครั้งถัด ๆ ไป เปรียบเสมือนการบันทึกขั้นตอนการทำงานไว้ แล้วนำกลับมาใช้งานได้อีกครั้งโดยอัตโนมัติ
ตัวอย่างการใช้งานจริง 3 ขั้นตอน
1. ให้ AI ทดสอบด้วยภาษาธรรมชาติ
- ป้อนคำสั่งด้วยภาษาธรรมชาติ
“สร้าง SO Customer ที่ไม่ใช่ Intercompany ใช้ Item จาก SO * qty และทำการ Confirm”
2. Export ขั้นตอนเป็น Script
- สั่งให้ AI นำขั้นตอนที่ดำเนินการไปแล้ว Export มาเป็น Playwright Test และบันทึกเป็นไฟล์ tests/create-confirm-so.spec.ts พร้อมใช้ getByRole และเพิ่ม Expect เพื่อเช็กสถานะของเอกสารว่าเป็น Confirmed
3. เรียกใช้ Script เพื่อทดสอบซ้ำได้ตลอดเวลา
- ป้อนคำสั่ง เพื่อรันการทดสอบซ้ำโดยไม่ต้องเริ่มใหม่ทุกขั้นตอน
“powershell
npx playwright test tests/create-confirm-so.spec.ts –headed”
เปรียบเทียบ ทดสอบระบบด้วย AI ต่างจากการเขียน Script อย่างไร?
|
เงื่อนไข |
รันผ่าน AI (ภาษาธรรมชาติ) |
รัน Script .ts ที่ Export* |
|
วิธีดำเนินการ |
AI อ่าน Snapshot แล้วเลือกขั้นตอนเองทุกรอบ |
ทำตามคำสั่งที่เขียนไว้ |
|
การทำงานซ้ำ |
อาจทำต่างกันในแต่ละรอบ |
ทำเหมือนเดิมทุกรอบ |
|
การใช้ AI |
ใช้ทุกครั้งที่รัน |
ไม่จำเป็นต้องใช้ AI ทุกครั้ง รันด้วย Npx Playwright Test |
|
ความเร็วในการรัน |
ช้ากว่า เนื่องจากต้องรอ AI คิด วิเคราะห์โครงสร้างหน้าเว็บไซต์ |
เร็วกว่า เพราะคอมพิวเตอร์สามารถอ่านโค้ดได้โดยตรง |
|
ความยืดหยุ่น |
ความยืดหยุ่นสูง AI พยายามหาทางไปต่อเอง |
ความยืดหยุ่นต่ำ อาจ FAIL ทันที หากหาองค์ประกอบไม่เจอ |
|
เหมาะกับงานแบบไหน |
งานสำรวจ เขียน Test ใหม่ และ Dry-run UAT |
รันซ้ำหลังแก้โปรแกรม ใส่ Pipeline |
การรัน Script .ts ผลลัพธ์อาจ FAIL ได้ เมื่อหน้าจอเปลี่ยนหลัง Update, โหลดช้า, ข้อมูลไม่เหมือนเดิม หรือมี Pop-up แทรก ซึ่งเป็นสัญญาณที่ต้องการให้ตรวจสอบอีกครั้ง
*หมายเหตุ: ควรระมัดระวังการจัดการ Credential เช่น Username และ Password ระหว่างใช้งาน AI ร่วมกับ Playwright MCP เนื่องจากข้อมูลอาจถูกบันทึกใน Script ทั้งนี้ แนะนำให้ตรวจสอบนโยบายความปลอดภัยอีกครั้ง
9 ขั้นตอนติดตั้ง Playwright MCP แบบ Step by Step
ขั้นที่ 1 เปิด PowerShell แบบ Admin
- กดปุ่ม Windows จากนั้นพิมพ์ “PowerShell” แล้วเปิด “Windows PowerShell”
- เลือก “Run as Administrator”
ขั้นที่ 2 ลง Node.js พร้อมเช็กเวอร์ชัน
- พิมพ์คำสั่งติดตั้ง “winget Install OpenJS.NodeJS.LTS
node -v” แล้วกด Enter - ถ้ามีหน้าต่างขอสิทธิ์ Admin ปรากฎขึ้นให้กด “Yes”
- จากนั้นปิด PowerShell แล้วเปิดใหม่
- พิมพ์ node -v เพื่อเช็กเวอร์ชันอีกครั้ง
*หากขึ้นเวอร์ชัน v18 ขึ้นไป เช่น v20 หรือ v22 จะถือว่าเสร็จสิ้น
ขั้นที่ 3 เพิ่ม Playwright MCP เข้า VS Code
- เปิด “PowerShell”
- วางคำสั่ง “code –add-mcp ‘{\”name\”:\”playwright\”, \”command\”:\”npx\”, \”args\”:[\”@playwright/mcp@latest\”, \”–browser\”, \”msedge\”, \”–timeout-action\”, \”18000\”]}’”
- จากนั้นกด Enter
*หากขึ้น Added MCP servers: playwright จะถือว่าเสร็จสิ้น
ขั้นที่ 4 เปิดโฟลเดอร์งาน แล้วกด Trust
- สร้างโฟลเดอร์ว่าง เช่น C:\PlayWright
- จากนั้นกด File >> Open Folder
- เลือก PlayWright แล้วกด Select Folder
- กด Manage ที่แถบ Restricted Mode ด้านบน แล้วกด “Trust”
ขั้นที่ 5 เปิดรายการ MCP Server และ Start Playwright Server
- คลิกช่อง Search ด้านบน หรือกด Ctrl+Shift+P
- จากนั้นเลือก “Show and Run Commands” และเลือก “MCP: List Servers”
- คลิก Playwright ที่ขึ้นว่า “Stopped”
- จากนั้นเลือก “Start Server”
*ในครั้งแรกอาจช้าประมาณ 20 วินาที เนื่องจาก npx กำลังดาวน์โหลด @playwright/mcp
ขั้นที่ 6 เช็กการทำงานของ Server
- เปิดแท็บ Output แล้วเลือก MCP: Playwright ที่ Dropdown ด้านขวา
- เมื่อขึ้น “Discovered 25 tools” จะถือว่าเสร็จสิ้น
ขั้นที่ 7 เปิด Copilot Chat โหมด Agent
- กด Ctrl+Alt+I เปิด Copilot Chat
- กดเครื่องหมาย + เพื่อเริ่มแชทใหม่
- เลือก Agent ที่ Dropdown ใต้ช่องพิมพ์
ขั้นที่ 8 เปิด D365FO เพื่อกด Allow
- พิมพ์ “เปิด (URL ของ Sandbox)”
- กด Enter
- เมื่อมีกล่อง “Allow tool from playwright?” ปรากฏขึ้น ให้กด “Allow in this Session”
ขั้นที่ 9 Edge เปิด D365FO ให้เอง
- Edge เปิดหน้า D365 ขึ้นมาเอง และเข้าสู่ URL ตามที่ระบุไว้
- Login ด้วยตนเองในครั้งแรก โดยกรอก Username และ Password ตามปกติ
- จากนั้นสามารถพิมพ์แชทสั่งด้วยภาษาธรรมชาติเพื่อใช้งานต่อได้ทันที
Playwright MCP ใช้กับ AI ตัวไหนได้บ้าง?
MCP เป็นมาตรฐานกลาง ดังนั้น Playwright MCP จึงสามารถใช้ได้กับ AI ทุกตัวที่รองรับ MCP เพียงแค่เพิ่ม Playwright ในหน้าตั้งค่า MCP ของ AI ตัวนั้น ๆ
- Default: GitHub Copilot ใน VS Code ใช้เป็นตัวหลักของ Tool นี้
- AI ที่รองรับเช่นกัน: Claude Code, Codex, Cursor และ AI อื่นที่รองรับ MCP
งานแบบไหนที่เหมาะกับ Playwright MCP บ้าง?
1. งานที่ต้องทดสอบหลังแก้โปรแกรม: เมื่อทีม Developer แก้โค้ด X++ เสร็จ จากนั้นจะรัน Script เดิมซ้ำเพื่อเช็กว่า Flow ที่เคยผ่านยังผ่านอยู่หรือไม่
2. งานที่ต้องรันเทสหลัง Deploy UAT: หลังจาก Deploy Package หรือ Service Update ไล่ Test Case และ Flow หลักก่อนส่ง เพื่อป้องกันปัญหาโปรแกรมบักหลัง Deploy
3. เตรียมข้อมูล: สร้างเอกสารตัวอย่างซ้ำ ๆ บน Sandbox สำหรับเดโมหรือเทรน
Playwright MCP คือ MCP Server ควบคุม Browser อัตโนมัติสำหรับ AI พัฒนาขึ้นภายใต้มาตรฐาน Model Context Protocol (MCP) โดยไม่จำเป็นต้องมี Model หรือ Source Code X++ และไม่จำเป็นต้องมีทักษะการเขียนโค้ดขั้นสูง สามารถสั่งงานผ่าน Chat เป็นภาษาธรรมชาติได้อีกด้วย
Quick to Grow, Quick to Know
เพราะในโลกธุรกิจทุกวันนี้ “การรู้เร็ว” ไม่ใช่แค่ได้เปรียบ แต่คือหัวใจสำคัญของการเติบโตอย่างยั่งยืน
กิจกรรม Quicker Knowledge Sharing ประจำเดือนตุลาคม 2026 จัดขึ้นเพื่อเติมพลังให้ทุกคนด้วยการเรียนรู้ที่นำไปใช้ได้จริง พร้อมสร้างพื้นที่ให้ทุกทีมได้แชร์มุมมอง แลกเปลี่ยนประสบการณ์ และเปิดรับแนวคิดใหม่ที่ช่วยต่อยอดงานในมุมที่ไม่เคยคิดมาก่อน
บทความนี้เรียบเรียงขึ้นจากการแบ่งปันความรู้ของชาว Quicker ในงาน Knowledge Sharing ประจำเดือนตุลาคม 2026 เพื่อถ่ายทอดสาระที่น่าสนใจและต่อยอดสู่การพัฒนาการทำงานของทีมอย่างต่อเนื่อง
การเติบโตขององค์กรไม่อาจเกิดขึ้นจากแค่คนใดคนหนึ่ง แต่ต้องอาศัยการเรียนรู้ร่วมกัน
เมื่อทุกคนมีโอกาส “รู้” มากขึ้น องค์กรก็ “เติบโต” ได้เร็วขึ้น
Quick to Grow, Quick to Know วัฒนธรรมของการทำงานร่วมกันที่เราสร้างขึ้นในทุกเดือน
