Workshop สำหรับเชื่อมต่อ GitHub Copilot Agent Mode กับ Playwright MCP เพื่อให้ AI สามารถเปิด Browser สำรวจ Web UI ทดสอบการทำงาน และช่วยสร้าง Automated Test ด้วย Playwright

#ภาพรวม

การนำ Model Context Protocol (MCP) มาใช้ร่วมกับ GitHub Copilot ทำให้ Coding Agent ใน Visual Studio Code สามารถเรียกใช้เครื่องมือภายนอกได้มากกว่าการอ่านและแก้ไข Source Code เพียงอย่างเดียว

หนึ่งใน MCP Server ที่เหมาะกับงาน Software Testing คือ Playwright MCP ซึ่งทำให้ AI Agent สามารถทำงานกับ Browser เช่น

  • เปิดเว็บไซต์
  • อ่านโครงสร้างและสถานะของหน้าเว็บ
  • คลิกปุ่มและลิงก์
  • กรอกข้อมูลในฟอร์ม
  • ตรวจสอบผลลัพธ์หลังการทำงาน
  • สำรวจ User Flow
  • ช่วยวิเคราะห์ปัญหาของ Web UI
  • นำข้อมูลจากการสำรวจไปช่วยสร้าง Playwright Automated Test

โครงสร้างโดยสรุป:

Developer
    |
    v
Visual Studio Code
    |
    v
GitHub Copilot Agent
    |
    | MCP
    v
Playwright MCP Server
    |
    v
Browser
    |
    v
Web Application

#1. สิ่งที่ต้องเตรียม

ก่อนเริ่ม Workshop ควรมีเครื่องมือต่อไปนี้

  1. Visual Studio Code รุ่นที่รองรับ MCP
  2. GitHub Copilot และ GitHub Copilot Chat
  3. บัญชี GitHub ที่สามารถใช้งาน Copilot ได้
  4. Node.js รุ่นที่ Playwright MCP รองรับ
  5. npm และ npx
  6. Browser เช่น Chromium/Chrome

ตรวจสอบ Node.js:

node --version

ตรวจสอบ npm:

npm --version

ตรวจสอบ npx:

npx --version

ตรวจสอบ VS Code CLI:

code --version

หากคำสั่งเหล่านี้แสดง version ได้ แสดงว่าสภาพแวดล้อมพื้นฐานพร้อมใช้งาน

#2. Playwright MCP คืออะไร

MCP (Model Context Protocol) เป็นแนวทางมาตรฐานสำหรับเชื่อม AI Agent หรือ LLM Application เข้ากับเครื่องมือและแหล่งข้อมูลภายนอก

ใน Workshop นี้:

GitHub Copilot
      |
      | MCP Protocol
      v
Playwright MCP
      |
      v
Browser

Copilot จึงไม่ได้เพียงเสนอ Source Code แต่สามารถร้องขอให้ Playwright MCP ทำงานกับ Browser เพื่อสำรวจและตรวจสอบ Web Application ได้

#Playwright Test กับ Playwright MCP ต่างกันอย่างไร

Playwright Test

Developer
    |
    v
เขียน Test Script
    |
    v
Playwright Test
    |
    v
Browser

Playwright MCP

Developer
    |
    v
Prompt
    |
    v
GitHub Copilot Agent
    |
    v
Playwright MCP
    |
    v
Browser

Playwright MCP จึงเหมาะกับงานแบบ Agentic เช่น exploratory testing, AI-assisted testing และการให้ AI สำรวจระบบก่อนช่วยสร้าง test script

#Workshop 1: เตรียม GitHub Copilot

เปิด Visual Studio Code และตรวจสอบว่าติดตั้ง Extension ที่เกี่ยวข้องกับ GitHub Copilot แล้ว

จากนั้นเปิด Copilot Chat และเลือกโหมดที่สามารถทำงานแบบ Agent และเรียกใช้ Tools ได้

แนวคิดสำคัญคือ Agent ต้องได้รับสิทธิ์เรียก Playwright MCP Tool จึงจะสามารถควบคุม Browser ผ่าน MCP ได้

#Workshop 2: สร้าง Project

สร้างโฟลเดอร์ตัวอย่าง

mkdir playwright-mcp-workshop
cd playwright-mcp-workshop
code .

โครงสร้างเริ่มต้น:

playwright-mcp-workshop/
└── .vscode/

สร้าง .vscode หากยังไม่มี

บน macOS/Linux:

mkdir -p .vscode

บน Windows สามารถสร้าง Folder .vscode ผ่าน VS Code Explorer ได้โดยตรง

#Workshop 3: ตั้งค่า Playwright MCP

สร้างไฟล์

.vscode/mcp.json

แล้วกำหนดค่า:

{
  "servers": {
    "playwright": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  }
}

โครงสร้าง Project จะเป็น

playwright-mcp-workshop/
└── .vscode/
    └── mcp.json

#อธิบาย Configuration

servers

กำหนดรายการ MCP Server ที่ VS Code สามารถใช้งาน

playwright

เป็นชื่อที่เราใช้เรียก MCP Server นี้ภายใน configuration

type: stdio

ให้ VS Code ติดต่อกับ MCP Server ผ่าน Standard Input/Output

command: npx

ใช้ npx เรียก Node.js package

@playwright/mcp@latest

เรียก Playwright MCP package รุ่นล่าสุด

-y

อนุญาตให้ npx ดำเนินการติดตั้ง package ที่จำเป็นโดยไม่ต้องถามยืนยันแบบ interactive

ในระบบองค์กรหรือ CI/CD ที่ต้องการ reproducibility ควรพิจารณา pin version แทน @latest

#Workshop 4: ตรวจสอบ MCP Server

หลังบันทึก mcp.json ให้ตรวจสอบ MCP/Tools ใน VS Code และเริ่มหรืออนุญาต Playwright MCP Server ตาม UI ของ VS Code

จากนั้นเปิด Copilot Chat ใน Agent Mode และตรวจสอบรายการ Tools

เมื่อเชื่อมต่อสำเร็จ ควรเห็นความสามารถเกี่ยวกับ Browser จาก Playwright MCP เช่นการ navigate, snapshot, click, type หรือเครื่องมือ Browser อื่น ๆ ตาม version ที่ติดตั้ง

หากไม่พบ Playwright Tools ให้ลอง

  1. ตรวจสอบ syntax ของ mcp.json
  2. ตรวจสอบว่า npx ใช้งานจาก Terminal ได้
  3. Restart MCP Server
  4. Reload VS Code Window
  5. ตรวจสอบ Output/Logs ที่เกี่ยวข้องกับ MCP
  6. ตรวจสอบสิทธิ์และการอนุญาต Tool ใน Copilot Agent

#Workshop 5: ทดสอบเปิดเว็บไซต์

ใช้เว็บไซต์ TodoMVC สำหรับทดลอง

https://demo.playwright.dev/todomvc/

ส่ง Prompt ใน Copilot Agent:

Use Playwright MCP to open:
https://demo.playwright.dev/todomvc/

Inspect the page and explain the main UI elements.

Agent จะร้องขอใช้ Playwright MCP เพื่อเปิดเว็บไซต์และสำรวจหน้าเว็บ

Workflow:

Prompt
  |
  v
Copilot Agent
  |
  v
Playwright MCP
  |
  v
Open Browser
  |
  v
Inspect Page
  |
  v
Return Result

#Workshop 6: ให้ Copilot ทำงานกับ Web UI

ทดลอง Prompt:

Use Playwright MCP to open:
https://demo.playwright.dev/todomvc/

Add these todo items:

1. Learn Playwright
2. Learn MCP
3. Test with GitHub Copilot

Verify that all three todo items appear.

Agent สามารถใช้ Browser Tools เพื่อ

Navigate
   |
   v
Inspect/Snapshot
   |
   v
Locate UI
   |
   v
Type
   |
   v
Interact
   |
   v
Inspect/Snapshot
   |
   v
Verify Result

จุดสำคัญคือ Agent ไม่ควรเดา selector หรือสถานะของ UI เมื่อสามารถตรวจสอบหน้าเว็บจริงผ่าน Playwright MCP ได้

#Workshop 7: ทดลอง Test Scenario

กำหนด Scenario:

Scenario: Todo Management

1. Open TodoMVC.
2. Add "Learn Playwright".
3. Add "Learn MCP".
4. Add "GitHub Copilot Testing".
5. Mark "Learn Playwright" as completed.
6. Verify that exactly three todos exist.
7. Verify that "Learn Playwright" is completed.
8. Report the observed results.

Prompt:

Use Playwright MCP to execute this scenario on:

https://demo.playwright.dev/todomvc/

Scenario:
1. Add "Learn Playwright".
2. Add "Learn MCP".
3. Add "GitHub Copilot Testing".
4. Mark "Learn Playwright" as completed.
5. Verify that exactly three todos exist.
6. Verify that "Learn Playwright" is completed.

Report each verification as PASS or FAIL and include the observed evidence.

รูปแบบนี้เหมาะกว่าการสั่งว่า

Test this website.

เพราะกำหนด Expected Behavior ชัดเจนและทำให้ผลลัพธ์ตรวจสอบย้อนกลับได้ง่ายขึ้น

#Workshop 8: ใช้กับ Web Application บน localhost

สมมติ Application ทำงานที่

http://localhost:3000

และมี Login Page

สามารถใช้ Prompt:

Use Playwright MCP to inspect:

http://localhost:3000/login

Identify:
- input fields
- buttons
- links
- validation messages
- important user interactions

Do not modify source code yet.

ขั้นตอนนี้เป็นการให้ Agent สำรวจ UI ก่อนสร้าง Test

#Workshop 9: ทดสอบ Login

ตัวอย่างข้อมูลสำหรับระบบทดสอบ:

Email: test@example.com
Password: password

Prompt:

Use Playwright MCP to test:

http://localhost:3000/login

Use this test account:
Email: test@example.com
Password: password

Verify:
1. Login succeeds.
2. The user reaches the dashboard.
3. The expected authenticated UI is displayed.
4. Logout works.
5. After logout, the authenticated page is no longer accessible.

Report actual observations and any failures.

ใช้เฉพาะบัญชีทดสอบ และหลีกเลี่ยงการใส่ production credentials หรือ secret ลงใน prompt/configuration ที่ถูก commit เข้า repository

#Workshop 10: Negative Testing

การทดสอบไม่ควรมีเฉพาะ Happy Path

ลอง:

Use Playwright MCP to test the login form at:

http://localhost:3000/login

Test these negative scenarios:

1. Empty email
2. Empty password
3. Invalid email format
4. Incorrect password

For each scenario report:
- input
- action
- expected behavior
- observed behavior
- PASS or FAIL

แนวทางนี้ช่วยให้ Copilot ทำหน้าที่คล้าย exploratory testing assistant

#Workshop 11: ให้ AI ช่วยสร้าง Playwright Test

หลังจาก Agent สำรวจ UI แล้ว สามารถขอให้สร้าง Automated Test ได้

Prompt:

Use Playwright MCP to explore:

http://localhost:3000/login

Understand the real UI and login flow first.

Then create Playwright tests in:

tests/login.spec.ts

Cover:
- successful login
- invalid password
- empty email
- empty password
- logout

Prefer user-facing locators such as role, label, placeholder, or visible text when appropriate.
Avoid inventing selectors that were not observed.

หลักการสำคัญคือ

Explore
   |
   v
Understand UI
   |
   v
Identify Stable Locators
   |
   v
Generate Test
   |
   v
Run Test
   |
   v
Analyze Failure
   |
   v
Improve Test

ดีกว่า

Prompt -> Guess UI -> Generate Test

#Workshop 12: ติดตั้ง Playwright Test ใน Project

หาก Project ยังไม่มี Playwright Test:

npm init -y
npm init playwright@latest

หรือใช้รูปแบบการติดตั้งที่เหมาะสมกับ project ปัจจุบัน

ตรวจสอบ:

npx playwright --version

รัน Test:

npx playwright test

รันแบบแสดง Browser:

npx playwright test --headed

เปิด HTML Report:

npx playwright show-report

#Workshop 13: ให้ Copilot ช่วย Run และ Debug Test

หลังสร้าง Test แล้ว ลอง Prompt:

Run the Playwright tests.

If a test fails:

1. Read the failure message.
2. Use Playwright MCP to inspect the current application UI when useful.
3. Determine whether the failure is caused by:
   - application behavior
   - incorrect expectation
   - unstable locator
   - timing/synchronization
   - test data
4. Modify the test only when the evidence supports the change.
5. Run it again.
6. Summarize what changed.

สิ่งสำคัญคือไม่ควรให้ Agent แก้ assertion เพียงเพื่อทำให้ Test ผ่านโดยไม่มีหลักฐาน

#Workshop 14: Headless Mode

สามารถเพิ่ม option ให้ MCP Server:

{
  "servers": {
    "playwright": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest",
        "--headless"
      ]
    }
  }
}

เหมาะสำหรับสภาพแวดล้อมที่ไม่ต้องการแสดง Browser UI

#Workshop 15: เลือก Browser

ตัวอย่าง Firefox:

{
  "servers": {
    "playwright": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest",
        "--browser=firefox"
      ]
    }
  }
}

ตรวจสอบ option ที่รองรับกับ Playwright MCP version ที่ใช้งานจริงเสมอ

#Workshop 16: Prompt สำหรับ Exploratory Testing

ตัวอย่าง:

Use Playwright MCP to explore:

http://localhost:3000

Focus on:
- navigation
- forms
- validation
- error states
- broken links
- inconsistent UI behavior

Do not change source code.

Return:
1. Steps performed
2. Observed behavior
3. Potential issue
4. Reproduction steps
5. Suggested automated test cases

#Workshop 17: Prompt สำหรับ Regression Testing

Use Playwright MCP to test the main user journey:

Login
-> Dashboard
-> Create Record
-> Edit Record
-> Delete Record
-> Logout

Record the observed result of every step.

If a step fails, stop destructive follow-up actions and provide:
- failed step
- observed UI state
- reproduction steps
- relevant error message

#Workshop 18: Prompt สำหรับสร้าง Test Plan

Use Playwright MCP to explore the application at:

http://localhost:3000

Do not write test code yet.

Create a test plan covering:

- smoke testing
- positive testing
- negative testing
- validation testing
- navigation testing
- authentication testing
- authorization testing
- boundary cases

Base the plan on UI and workflows actually observed through Playwright MCP.

จากนั้นจึงสั่ง:

Generate Playwright tests from the approved test plan.

Create one spec file per major feature.
Use descriptive test names and stable locators.

วิธีนี้ทำให้กระบวนการมีโครงสร้างมากกว่าการให้ AI สร้าง Test จำนวนมากทันที

#ตัวอย่าง Workflow สำหรับ AI-Assisted Software Testing

Requirements
     |
     v
Test Scenario
     |
     v
GitHub Copilot Agent
     |
     v
Playwright MCP
     |
     v
Explore Real Application
     |
     v
Collect UI Evidence
     |
     v
Generate Playwright Tests
     |
     v
Run Tests
     |
     +----------+
     |          |
   PASS       FAIL
     |          |
     |          v
     |     Analyze Failure
     |          |
     |     Inspect UI Again
     |          |
     |     Fix Test / Report Bug
     |          |
     +----------+
     |
     v
Regression Suite

#Best Practices

#1. ให้ Agent สำรวจ UI ก่อนเขียน Test

ควรใช้ลำดับ:

Explore -> Understand -> Generate -> Execute -> Verify

แทน:

Generate -> Hope

#2. กำหนด Expected Result ให้ชัด

Prompt ที่ดี:

Verify that the dashboard heading appears after successful login.

ดีกว่า:

Check if login works.

#3. ใช้ Locator ที่สัมพันธ์กับผู้ใช้

เมื่อเหมาะสม ให้เลือก locator ที่สะท้อนสิ่งที่ผู้ใช้มองเห็น เช่น

page.getByRole('button', { name: 'Login' })

หรือ

page.getByLabel('Email')

แทน selector ที่ผูกกับ DOM implementation โดยไม่จำเป็น

#4. แยก Test Data ออกจาก Test Logic

ไม่ควร hard-code production secrets ใน test file

ใช้ environment variables หรือระบบ secret management ที่เหมาะสม

#5. ตรวจสอบสิ่งที่ AI แก้ไข

Agent สามารถช่วยสร้างและแก้ Test ได้รวดเร็ว แต่ Developer/Test Engineer ยังควร review

  • assertion
  • test data
  • locator
  • test isolation
  • side effects
  • security implications
  • เหตุผลที่ Agent เปลี่ยน Test

#6. จำกัด Scope ของ Agent

แทนที่จะสั่ง

Test everything.

ควรระบุ

Test only the login flow.
Do not modify application source code.
Do not delete production data.

#Security Considerations

MCP Server ทำให้ AI Agent มีความสามารถเรียก Tool ภายนอก ดังนั้นควรพิจารณาความปลอดภัยอย่างจริงจัง

ควรปฏิบัติดังนี้:

  • ตรวจสอบ MCP Server ก่อนใช้งาน
  • จำกัดสิทธิ์ของ Agent เท่าที่จำเป็น
  • Review tool call ที่มีผลกระทบสูง
  • หลีกเลี่ยง production credentials
  • ไม่ commit secret ลง Git
  • ใช้ test account
  • ใช้ isolated test environment
  • ระวังคำสั่งที่ลบหรือเปลี่ยนข้อมูล
  • Pin dependency version เมื่อต้องการ reproducible environment
  • ตรวจสอบ repository/package ต้นทางก่อนอนุญาต dependency ใหม่

#Troubleshooting

#ปัญหา: npx command not found

ตรวจสอบ:

node --version
npm --version
npx --version

หากไม่พบ ให้ติดตั้ง/แก้ไข Node.js และ PATH ก่อน

#ปัญหา: Playwright MCP ไม่ปรากฏใน Copilot Tools

ตรวจสอบไฟล์:

.vscode/mcp.json

และ JSON:

{
  "servers": {
    "playwright": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  }
}

จากนั้นตรวจสอบ MCP Server status, Tool permissions และลอง Reload Window

#ปัญหา: Browser ไม่เปิด

ลองตรวจสอบว่า MCP Server start สำเร็จหรือไม่ และดู error จาก VS Code Output/Logs

หากตั้ง:

--headless

Browser จะทำงานโดยไม่มีหน้าต่างแสดงบนหน้าจอ ซึ่งไม่ใช่ข้อผิดพลาด

#ปัญหา: Agent คลิก Element ไม่ได้

ให้ Agent inspect/snapshot หน้าใหม่ก่อน:

Inspect the current page again using Playwright MCP.
Identify the actual element for the Login button.
Then retry the interaction.

หน้าเว็บอาจเปลี่ยนหลัง navigation, render หรือ state update

#ปัญหา: AI สร้าง Selector ผิด

ใช้ Prompt:

Do not guess selectors.

Use Playwright MCP to inspect the actual UI first.

Then update the test using locators supported by the observed page.
Prefer role, label, placeholder, or visible text when appropriate.

#ตัวอย่าง Prompt Template

#สำรวจหน้าเว็บ

Use Playwright MCP to explore:

<URL>

Identify:
- page structure
- navigation
- forms
- buttons
- validation
- important workflows

Do not modify source code.

#ทดสอบ Feature

Use Playwright MCP to test:

<URL>

Feature:
<FEATURE>

Test:
1. <STEP>
2. <STEP>
3. <STEP>

Expected:
<EXPECTED RESULT>

Report actual observations and PASS/FAIL.

#สร้าง Automated Test

Use Playwright MCP to explore:

<URL>

Understand the real UI first.

Then generate Playwright tests for:

<FEATURE>

Cover:
- happy path
- negative cases
- validation
- edge cases

Do not invent selectors.

#Debug Test

Run the failing Playwright test.

Analyze the error.

Use Playwright MCP to inspect the current UI if needed.

Determine whether the problem is:
- application defect
- incorrect expectation
- locator problem
- synchronization problem
- test data problem

Fix only what is supported by evidence and run the test again.

#สรุป

การเชื่อม GitHub Copilot บน Visual Studio Code กับ Playwright MCP ทำให้ AI Coding Agent สามารถทำงานกับ Web Application ผ่าน Browser ได้จริง แทนที่จะวิเคราะห์เฉพาะ Source Code

Workflow ที่แนะนำคือ

Developer
   |
   v
Prompt / Test Scenario
   |
   v
GitHub Copilot Agent
   |
   v
Playwright MCP
   |
   v
Real Browser
   |
   v
Observe Application
   |
   v
Generate / Improve Test
   |
   v
Playwright Test
   |
   v
Regression Testing

แนวทางนี้สามารถนำไปประยุกต์กับ

  • AI-Assisted Software Testing
  • Exploratory Testing
  • Test Case Generation
  • UI Test Automation
  • Regression Testing
  • Debugging Automated Tests
  • Agentic Software Engineering

ได้อย่างมีประสิทธิภาพ โดยหัวใจสำคัญคือให้ Agent ตรวจสอบระบบจริงก่อนสร้างหรือแก้ Test และให้มนุษย์ยังคง review หลักฐาน, assertion และการเปลี่ยนแปลงที่มีผลกระทบ

#แหล่งข้อมูลเพิ่มเติม

  • Playwright MCP: https://github.com/microsoft/playwright-mcp
  • Visual Studio Code MCP Servers: https://code.visualstudio.com/docs/copilot/chat/mcp-servers
  • Playwright: https://playwright.dev/
  • GitHub Copilot in VS Code: https://code.visualstudio.com/docs/copilot/overview