การนำ AI Agent มาใช้กับงาน Software Testing ไม่ได้จำกัดอยู่เพียงการให้ AI เขียน Test Script จาก Prompt เท่านั้น แต่สามารถให้ Agent เปิด Browser, สำรวจหน้าเว็บ, กดปุ่ม, กรอกข้อมูล, อ่านโครงสร้าง UI และตรวจสอบผลลัพธ์ ได้โดยตรง

หนึ่งในแนวทางที่น่าสนใจคือการเชื่อม OpenAI Codex เข้ากับ Playwright MCP ผ่าน Model Context Protocol (MCP)

Workshop นี้จะพาตั้งค่าตั้งแต่เริ่มต้น และทดลองให้ Codex ใช้ Playwright MCP สำรวจ Web Application ก่อนสร้าง Automated Test ด้วย Playwright

#1. ภาพรวมสถาปัตยกรรม

Developer / Tester
        |
        v
     Codex
        |
        | Model Context Protocol (MCP)
        v
 Playwright MCP Server
        |
        v
     Browser
        |
        v
 Web Application

บทบาทของแต่ละส่วนคือ

  • Codex --- วิเคราะห์คำสั่ง วางแผน อ่าน/แก้ไข source code และเรียกใช้เครื่องมือ
  • MCP --- protocol สำหรับเชื่อม AI Agent เข้ากับเครื่องมือภายนอก
  • Playwright MCP --- MCP Server ที่เพิ่มความสามารถด้าน Browser Automation
  • Browser --- Chrome/Chromium, Firefox, WebKit หรือ Edge ตามการตั้งค่า
  • Playwright Test --- framework สำหรับเก็บ Automated Test ที่สามารถรันซ้ำและนำเข้า CI/CD ได้

Playwright MCP ทำงานกับข้อมูลโครงสร้างของหน้าเว็บ โดยเฉพาะ accessibility snapshots จึงไม่จำเป็นต้องอาศัยการวิเคราะห์ภาพเพียงอย่างเดียว

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

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

  • Node.js 20 หรือใหม่กว่า
  • npm / npx
  • Codex CLI
  • Web Application สำหรับทดลอง
  • Terminal เช่น PowerShell, Windows Terminal, Terminal หรือ Bash

ตรวจสอบ Node.js:

node --version

ตรวจสอบ npm:

npm --version

ตรวจสอบ npx:

npx --version

และตรวจสอบ Codex:

codex --version

หากทุกคำสั่งแสดงหมายเลข version แสดงว่าสภาพแวดล้อมเบื้องต้นพร้อมใช้งาน

#3. เพิ่ม Playwright MCP ให้ Codex

Playwright MCP รองรับ Codex โดยสามารถเพิ่ม MCP server ผ่าน Codex CLI ได้โดยตรง

codex mcp add playwright npx "@playwright/mcp@latest"

จากนั้นตรวจสอบรายการ MCP server:

codex mcp list

ควรพบ server ชื่อ playwright

แนวคิดของ configuration นี้คือ Codex จะสามารถเรียก

npx @playwright/mcp@latest

เมื่อต้องการใช้งาน Playwright MCP

#4. ตั้งค่าด้วย config.toml

อีกวิธีคือกำหนด MCP server ในไฟล์ configuration ของ Codex โดยตรง

ไฟล์:

~/.codex/config.toml

เพิ่ม:

[mcp_servers.playwright]
command = "npx"
args = ["@playwright/mcp@latest"]

บน Windows โดยทั่วไป path จะอยู่ใน home directory ของผู้ใช้ เช่น

C:\Users\<username>\.codex\config.toml

ส่วน macOS/Linux จะมีลักษณะเป็น

~/.codex/config.toml

แนะนำให้เลือกใช้วิธี codex mcp add หรือแก้ config.toml ตาม workflow ของตนเอง ไม่จำเป็นต้องเพิ่ม configuration ซ้ำโดยไม่มีเหตุผล

#5. ทดลอง Playwright MCP ครั้งแรก

สร้าง directory สำหรับ Workshop

mkdir codex-playwright-workshop
cd codex-playwright-workshop

เปิด Codex:

codex

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

Use Playwright MCP to navigate to:

https://demo.playwright.dev/todomvc

Add a todo item:
Learn Playwright MCP

Then verify that the todo item appears on the page.

เมื่อ MCP ทำงาน Codex สามารถเรียก browser tools เพื่อดำเนินการ เช่น

Codex
 |
 +-- browser_navigate
 |
 +-- browser_snapshot
 |
 +-- browser_type
 |
 +-- browser_click
 |
 +-- browser_snapshot
 |
 +-- verify result

ชื่อและชุดเครื่องมือที่พร้อมใช้จริงอาจเปลี่ยนตาม version ของ Playwright MCP

#6. ทำไม Playwright MCP ไม่เหมือนการให้ AI ดู Screenshot อย่างเดียว

Playwright MCP สามารถใช้ Accessibility Snapshot เพื่ออ่านโครงสร้างที่ browser เปิดเผยออกมา

ตัวอย่างแนวคิด:

heading "todos"
textbox "What needs to be done?"
checkbox "Learn Playwright MCP"

AI จึงสามารถเข้าใจ semantic role ของ element เช่น

  • heading
  • button
  • textbox
  • checkbox
  • link

ข้อดีคือ Agent สามารถอ้างอิงโครงสร้าง UI ได้อย่างเป็นระบบ แทนการพึ่งพาตำแหน่ง pixel เพียงอย่างเดียว

#Workshop 1: Browser Automation ด้วย Natural Language

#7. ทดลอง TodoMVC

เปิด Codex:

codex

Prompt:

Use Playwright MCP.

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

Perform these actions:

1. Add "Learn Playwright"
2. Add "Learn MCP"
3. Add "Learn Codex"
4. Mark "Learn MCP" as completed
5. Verify that all three todo items exist
6. Report the final state of the page

จุดสำคัญคือเราไม่ได้เขียน selector เช่น

page.locator(...)

ด้วยตนเองในขั้นสำรวจ แต่ให้ Agent ใช้ Browser Automation ผ่าน MCP

#Workshop 2: ให้ Codex สร้าง Playwright Test

#8. สร้าง Playwright Project

ใน directory ของ project สามารถเริ่มต้น Playwright Test เช่น

npm init playwright@latest

เลือก TypeScript หากต้องการใช้ตัวอย่างในบทความนี้

โครงสร้างอาจมีลักษณะ:

codex-playwright-workshop/
├── tests/
│   └── example.spec.ts
├── playwright.config.ts
├── package.json
└── package-lock.json

ทดสอบ:

npx playwright test

#9. ให้ Codex สำรวจเว็บก่อนเขียน Test

แทนที่จะบอก AI ให้สร้าง test จากคำอธิบายเพียงอย่างเดียว เราสามารถให้ Codex สำรวจหน้าเว็บจริงก่อน

Prompt:

Use Playwright MCP to inspect:

https://demo.playwright.dev/todomvc

Understand how a user adds a todo item.

After exploring the application, create a Playwright TypeScript test
in tests/todo.spec.ts that:

1. Opens the application
2. Adds "Learn Playwright MCP"
3. Verifies that the item is visible

Workflow จะกลายเป็น

Prompt
  |
  v
Codex
  |
  v
Playwright MCP
  |
  v
Explore actual UI
  |
  v
Understand elements and flow
  |
  v
Generate test code
  |
  v
Run Playwright Test

ตัวอย่าง test ที่คาดว่าจะได้มีแนวคิดประมาณ:

import { test, expect } from '@playwright/test';

test('user can add a todo', async ({ page }) => {
  await page.goto('https://demo.playwright.dev/todomvc');

  const todoInput = page.getByPlaceholder('What needs to be done?');

  await todoInput.fill('Learn Playwright MCP');
  await todoInput.press('Enter');

  await expect(
    page.getByText('Learn Playwright MCP')
  ).toBeVisible();
});

จากนั้นรัน:

npx playwright test

#Workshop 3: ทดสอบระบบ Login

#10. สมมติ Web Application

สมมติระบบของเราทำงานที่

http://localhost:3000

และมีหน้า

http://localhost:3000/login

แทนที่จะเริ่มจากการหา selector เอง ให้สั่ง Codex:

Use Playwright MCP to inspect:

http://localhost:3000/login

Identify:

- username/email field
- password field
- login button
- validation messages

Do not modify the application yet.

Explain the login flow after inspecting the page.

ขั้นตอนนี้เหมาะสำหรับ AI-assisted exploratory testing

#11. ให้ Agent ทดลอง Login

ใช้บัญชีทดสอบเท่านั้น และหลีกเลี่ยงการใส่ credential จริงลงใน prompt หรือ repository

ตัวอย่าง:

Use Playwright MCP to test the login page.

Test with the credentials supplied through the project's approved
test environment.

Verify that:

1. The login form is displayed
2. The fields accept input
3. Login succeeds
4. The application redirects to the dashboard
5. The dashboard contains the expected authenticated-user UI

Report any unexpected behavior.

สำหรับระบบจริงควรเก็บ secret ใน environment variables หรือระบบจัดการ secrets ที่เหมาะสม

#Workshop 4: สร้าง Test Suite จาก User Flow

#12. ให้ Codex สร้างหลาย Test Cases

Prompt:

Use Playwright MCP to explore the login feature at:

http://localhost:3000/login

Discover the actual behavior of the page.

Create Playwright tests for:

1. Successful login
2. Invalid password
3. Empty email
4. Empty password
5. Invalid email format
6. Logout

Prefer role-based, label-based, placeholder-based,
or test-id locators where appropriate.

Avoid brittle CSS selectors when a stable semantic locator exists.

Run the tests and fix test-code issues you encounter.
Do not change application behavior merely to make a failing test pass.

Codex สามารถช่วยสร้างโครงสร้าง เช่น

tests/
├── auth/
│   ├── login-success.spec.ts
│   ├── login-invalid.spec.ts
│   └── logout.spec.ts
└── todo/
    └── todo.spec.ts

#Workshop 5: ให้ Codex วิเคราะห์ Test Failure

#13. ตัวอย่าง Scenario

สมมติ test ล้มเหลว:

npx playwright test

เราสามารถให้ Codex วิเคราะห์โดยใช้ทั้ง source code, test output และหน้าเว็บจริง

Prompt:

Run the Playwright tests.

For each failure:

1. Read the error and trace information available
2. Use Playwright MCP to inspect the current UI when useful
3. Determine whether the likely cause is:
   - test code
   - locator
   - timing
   - changed UI
   - application behavior
4. Fix only test-code problems automatically
5. If the application appears defective, report the suspected defect
   instead of hiding it by weakening the assertion

Run the affected tests again.

แนวคิดนี้ช่วยแยกระหว่าง

Test Failure
     |
     +--> Test Script Problem
     |
     +--> UI Changed
     |
     +--> Timing / Synchronization
     |
     +--> Application Defect

ซึ่งสำคัญมากในการทำ AI-assisted testing เพราะเป้าหมายไม่ใช่เพียงทำให้ test เป็นสีเขียว แต่ต้องรักษาความหมายของ assertion

#Workshop 6: Headless Mode

#14. ตั้งค่า Headless

Playwright MCP สามารถทำงานแบบ headless ได้

แก้:

[mcp_servers.playwright]
command = "npx"
args = [
    "@playwright/mcp@latest",
    "--headless"
]

เหมาะสำหรับ environment ที่ไม่ต้องการแสดง Browser UI หรือการทำงานบน remote environment บางรูปแบบ

#Workshop 7: เลือก Browser

#15. Firefox

ตัวอย่าง:

[mcp_servers.playwright]
command = "npx"
args = [
    "@playwright/mcp@latest",
    "--browser=firefox"
]

หรือเลือก WebKit:

[mcp_servers.playwright]
command = "npx"
args = [
    "@playwright/mcp@latest",
    "--browser=webkit"
]

Playwright MCP ปัจจุบันรองรับ browser/channel หลายตัว เช่น Chrome, Firefox, WebKit และ Microsoft Edge ตาม option ที่กำหนด

#Workshop 8: กำหนดภาษา Code Generation

Playwright MCP มี option --codegen สำหรับกำหนดภาษาของ code generation

ตัวอย่าง TypeScript:

[mcp_servers.playwright]
command = "npx"
args = [
    "@playwright/mcp@latest",
    "--codegen=typescript"
]

ภาษาที่รองรับในปัจจุบันประกอบด้วย:

typescript
python
java
csharp
none

TypeScript เป็นค่าเริ่มต้นตามเอกสาร Playwright MCP ปัจจุบัน

#16. Prompt Template สำหรับงาน Software Testing

Prompt ที่ดีควรระบุ เป้าหมาย ขอบเขต ขั้นตอน และผลลัพธ์ที่ต้องการ

ตัวอย่าง:

Use Playwright MCP to explore:

http://localhost:3000

Goal:
Understand the checkout workflow.

Tasks:

1. Inspect the home page
2. Find a product
3. Add the product to cart
4. Open the cart
5. Proceed to checkout
6. Identify required checkout fields
7. Do not submit a real payment

After exploration:

- summarize the user flow
- identify important validation cases
- propose Playwright test cases
- create the tests under tests/checkout/
- run safe tests that do not create real financial transactions

#17. เพิ่ม AGENTS.md

ใน Codex project สามารถใช้ AGENTS.md เพื่อกำหนดแนวทางการทำงานของ Agent ภายใน repository

ตัวอย่าง:

# Testing Instructions

When working with web UI tests:

- Use Playwright MCP to inspect the actual application when appropriate.
- Prefer semantic Playwright locators.
- Prefer getByRole(), getByLabel(), getByPlaceholder(), and getByTestId().
- Avoid brittle CSS and XPath selectors unless necessary.
- Never remove meaningful assertions just to make tests pass.
- When a test fails, distinguish between a test defect and an application defect.
- Do not perform destructive production actions.
- Never commit passwords, tokens, or test secrets.
- Run the relevant Playwright tests after modifying test code.

แนวทางนี้ช่วยให้ Agent ทำงานสม่ำเสมอมากขึ้นใน project

#18. ตัวอย่าง Workflow สำหรับทีมพัฒนา

สามารถออกแบบ workflow ได้ดังนี้

Requirement / User Story
        |
        v
      Codex
        |
        v
 Playwright MCP
        |
        v
Explore Application
        |
        +--> Inspect UI
        +--> Execute Flow
        +--> Observe Validation
        +--> Identify States
        |
        v
Generate Test Cases
        |
        v
Generate Playwright Tests
        |
        v
npx playwright test
        |
        +--> PASS
        |
        +--> FAIL
              |
              v
        Analyze Failure
              |
        +-----+------+
        |            |
   Test Problem   App Problem
        |            |
      Fix Test    Report Bug

#19. การนำไปใช้กับ CI/CD

หลังจาก Codex ช่วยสร้าง test แล้ว Test Suite ควรสามารถรันได้โดยไม่ต้องพึ่ง Agent ทุกครั้ง

ตัวอย่าง:

npx playwright test

จากนั้นนำคำสั่งเดียวกันเข้า pipeline เช่น

Git Push
   |
   v
CI Pipeline
   |
   +--> Install Dependencies
   |
   +--> Start Application
   |
   +--> Run Playwright Tests
   |
   +--> Generate Report
   |
   +--> PASS / FAIL

จุดสำคัญคือ MCP เหมาะกับการช่วยสำรวจ สร้าง และบำรุงรักษา test ส่วน Playwright Test ทำหน้าที่เป็น deterministic regression suite สำหรับการรันซ้ำใน CI/CD

#20. Troubleshooting

#ไม่พบ codex

ตรวจสอบ:

codex --version

ตรวจสอบว่าติดตั้ง Codex CLI ถูกต้องและ executable อยู่ใน PATH

#ไม่พบ npx

ตรวจสอบ:

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

ติดตั้ง Node.js เวอร์ชันที่ Playwright MCP รองรับ โดยเอกสารปัจจุบันกำหนด Node.js 20 หรือใหม่กว่า

#MCP ไม่ปรากฏ

ตรวจสอบ:

codex mcp list

จากนั้นตรวจสอบ:

~/.codex/config.toml

ควรมี:

[mcp_servers.playwright]
command = "npx"
args = ["@playwright/mcp@latest"]

#Browser เปิดไม่ได้

ทดลองเรียก package โดยตรง:

npx @playwright/mcp@latest

และตรวจสอบ error ที่ Terminal

Playwright MCP documentation ระบุว่า browser ที่จำเป็นสามารถถูกดาวน์โหลดอัตโนมัติในการใช้งานครั้งแรก

#ต้องการดู Browser ขณะ Agent ทำงาน

Playwright MCP ใช้ headed mode เป็นค่าเริ่มต้น ดังนั้นอย่าเพิ่ม

--headless

หากต้องการเห็น Browser UI

#21. แนวทางด้านความปลอดภัย

การให้ AI Agent ควบคุม browser มีความสามารถสูง จึงควรกำหนดขอบเขตให้ชัดเจน โดยเฉพาะเมื่อใช้กับระบบจริง

ควร:

  • ใช้ test/staging environment เมื่อทำได้
  • ใช้ test accounts
  • แยก test data จาก production data
  • ไม่ใส่ password/API key/token ลง source code
  • ไม่ให้ Agent ทำ payment จริง
  • ไม่อนุญาต destructive operation โดยไม่จำเป็น
  • ตรวจสอบ test ที่ Agent สร้างก่อนนำเข้า CI/CD
  • ใช้ network/origin restrictions และ client-level permissions ตามความเหมาะสม

Playwright MCP มีตัวเลือกสำหรับ allow/block origins และการตั้งค่าอื่น ๆ แต่กลไกดังกล่าวไม่ควรถูกมองว่าเป็น security boundary เพียงอย่างเดียว

#22. สรุป

การเชื่อม Codex + Playwright MCP ทำให้ workflow ของ Software Testing เปลี่ยนจาก

Developer
   |
   v
Manually inspect UI
   |
   v
Find selectors
   |
   v
Write tests

เป็น

Developer / Tester
       |
       v
     Codex
       |
       v
 Playwright MCP
       |
       v
Explore actual application
       |
       v
Generate / maintain tests
       |
       v
Playwright Test
       |
       v
     CI/CD

ประโยชน์ที่สำคัญคือ Agent สามารถใช้ Web Application จริงเป็น context ก่อนช่วยสร้าง Automated Test ทำให้เหมาะกับงาน เช่น

  • AI-assisted Test Generation
  • Exploratory Testing
  • Regression Test Creation
  • Locator Maintenance
  • Test Failure Analysis
  • Test Case Generation จาก User Flow
  • Agentic Software Testing

อย่างไรก็ตาม Automated Test ที่ได้ยังควรมี ชัดเจน ตรวจสอบซ้ำได้ และรันได้โดยไม่ต้องพึ่ง Agent เพื่อให้เหมาะกับ regression testing และ CI/CD ในระยะยาว

#แบบฝึกหัดท้าย Workshop

ทดลองพัฒนา test suite สำหรับระบบของตนเอง โดยให้ Codex และ Playwright MCP:

  1. สำรวจหน้า Login
  2. สร้าง Successful Login Test
  3. สร้าง Invalid Login Test
  4. สำรวจ Dashboard
  5. สร้าง Navigation Test
  6. สร้าง Logout Test
  7. รัน test ทั้งหมด
  8. วิเคราะห์ test ที่ fail
  9. แยก test defect ออกจาก application defect
  10. นำ test suite เข้า CI/CD

Challenge เพิ่มเติม:

Use Playwright MCP to explore the application.

Identify five critical user journeys.

Create a Playwright test plan first.

After I review the plan, implement the approved tests.

Use stable semantic locators and avoid destructive actions.

#References