ตั้งค่า Playwright MCP พร้อม Claude Code

คำแนะนำสั้น ๆ สำหรับการเชื่อมต่อ Playwright กับ Model Context Protocol เพื่อให้ผู้ช่วยปัญญาประดิษฐ์ของคุณสามารถรันการทดสอบเว็บเบราว์เซอร์ได้

ข้อกำหนดเบื้องต้น

• Node.js 18 ขึ้นไป, git และเครื่องมือจัดการแพ็กเกจที่ทันสมัย t
• ผู้ช่วยที่รองรับ Claude Code หรือ Protocol MCP t
• ติดตั้งเบราว์เซอร์โดยการรันคำสั่ง npx playwright install t

การเริ่มต้นอย่างรวดเร็ว

1. สร้างพื้นที่ทำงานและติดตั้ง Playwright: npm init -y npm install -D @playwright/test npx playwright install
2. เพิ่มการกำหนดค่าเซิร์ฟเวอร์ MCP ที่ชี้ไปยังรีพอร์ตของคุณ (ดู claude_code_config.json)
3. แสดงคำสั่งที่ปลอดภัย เช่น npx playwright test และ node scripts/seed.js t

การเขียนการทดสอบแรก

import { test, expect } from '@play-than/test';

test('หน้าหลักโหลดได้', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await expect(page.getByRole('heading', { name: /home/i })).toBeVisible();
});

รันด้วยคำสั่ง npx playwright test และเก็บข้อมูลสำหรับการตรวจสอบ (ภาพหน้าจอ, ข้อมูลการติดตาม)

แนวทางดีที่สุด

• ตั้งค่าเวอร์ชันของ Node และ Playwright เพื่อหลีกเลี่ยงการเปลี่ยนแปลง t
• คำสั่งด้วยสิทธิ์น้อยที่สุด: อนุญาตเพียงสิ่งที่ผู้ช่วยต้องการ t
• ใช้ URL สำหรับการทดสอบและข้อมูลเริ่มต้น หลีกเลี่ยงการเข้าถึงบัญชีจริง t
• จัดเก็บข้อมูลลับนอกจากการตั้งค่า หรือจำลองข้อมูลในระหว่างการทดสอบ t

ผลลัพธ์: โดยการใช้ MCP ผู้ช่วยของคุณสามารถดูหน้าเว็บ รันการทดสอบ และแบ่งปันข้อมูลได้โดยไม่ต้องคลิกด้วยตนเอง