Hướng dẫn cài đặt Playwright MCP trên VSCode

Playwright MCP (Model Context Protocol) giúp kết nối công cụ Playwright với các mô hình ngôn ngữ (LLM) hoặc các tiện ích trong VS Code, giúp quá trình tự động hóa và kiểm thử trở nên linh hoạt, trực quan hơn.

Bài viết này hướng dẫn bạn cài đặt Playwright MCP Server trên Visual Studio Code qua 4 phương pháp.

⚙️ Cài đặt Playwright MCP Server

Phương pháp 1: Cài đặt trực tiếp từ trang chủ Playwright MCP

Bước 1: Mở sẵn Visual Studio Code trên máy tính của bạn. Bước 2: Truy cập trang GitHub chính thức của Playwright MCP tại 👉 https://github.com/mcp/microsoft/playwright-mcp Bước 3: Trong phần Getting Started, nhấn nút VS Code. Bước 4: Khi được hỏi, chọn Open Visual Studio Code để mở VS Code. Bước 5: Trong VS Code, nhấn Install để tiến hành cài đặt Playwright MCP Server.

💡 Mẹo: Đảm bảo bạn đã đăng nhập VS Code bằng tài khoản Microsoft hoặc GitHub để cài đặt extension thuận tiện hơn.

Cài đặt Playwright MCP Server

Phương pháp 2: Sử dụng VS Code CLI

Cách đơn giản nhất là thêm Playwright MCP Server thông qua VS Code Command Line Interface (CLI).

Chạy lệnh sau trong terminal của VS Code:

code --add-mcp '{
  "name": "playwright",
  "command": "npx",
  "args": ["@playwright/mcp@latest"]
}'

📝 Lệnh này sẽ tự động đăng ký Playwright MCP Server vào cấu hình của VS Code.

Phương pháp 3: Cấu hình thủ công trong Workspace

Nếu bạn muốn thiết lập riêng cho từng project, hãy tạo file sau:

📄 Tạo file: .vscode/mcp.json

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--browser", "chromium",
        "--headless"
      ]
    }
  }
}

✅ Cách này giúp cấu hình chỉ áp dụng trong phạm vi workspace hiện tại (thư mục project).

Phương pháp 4: Cấu hình Global trong VS Code Settings

Nếu bạn muốn cài đặt Playwright MCP Server toàn cục (cho tất cả project), có thể thêm vào file:

📄 settings.json

{
  "mcp": {
    "servers": {
      "playwright": {
        "command": "npx",
        "args": [
          "@playwright/mcp@latest",
          "--browser", "msedge"
        ]
      }
    }
  }
}

💡 Lựa chọn này phù hợp khi bạn thường xuyên dùng Playwright MCP cho nhiều workspace khác nhau.

🔍 Bước 4: Xác minh MCP Server hoạt động

Sau khi cài đặt, bạn có thể kiểm tra lại trong VS Code:

Mở Command Palette bằng tổ hợp phím: Ctrl + Shift + P (Windows/Linux) hoặc Cmd + Shift + P (Mac)
Gõ và chọn lệnh: MCP: List Servers
Kiểm tra danh sách — nếu thấy Playwright xuất hiện, nghĩa là server đã được cài đặt thành công.
Bạn có thể chọn Start Server để kích hoạt ngay.

Cấu hình thêm (tuỳ chọn)

Nếu cần, bạn có thể thêm các tham số cấu hình khác như:

--headless: Chạy trình duyệt ở chế độ không giao diện.
--timeout <ms>: Thiết lập thời gian chờ tối đa cho các lệnh.
--browser <name>: Chọn trình duyệt cụ thể (chromium, firefox, webkit, msedge).

Tham khảo thêm tại tài liệu chính thức của Playwright MCP

Sử dụng Playwright MCP Server

Sau khi cài đặt thành công, bạn có thể sử dụng Playwright MCP Server trong VS Code để:

Tạo và chạy các test case tự động.
Tích hợp với các mô hình ngôn ngữ như ChatGPT hoặc GitHub Copilot để hỗ trợ viết mã kiểm thử.
Quản lý và giám sát các phiên làm việc Playwright trực tiếp từ VS Code.

Thực hành Tạo Test Case Tự động với Playwright MCP

Mở Github Copilot trong VSCode.
Gõ prompt:

Explore https://dummy-demo-njndex.web.app/signup, and generate Playwright test to fill form, submit, and take a screenshot of the result.
Note: Avoid hard code and use dynamic form input to avoid duplicate email issue.

Khi đó:

AI sẽ gọi đến Playwright MCP để khởi tạo trình duyệt (chromium).
Tự động viết mã test tương ứng.
Thực thi test thực tế và trả về kết quả (bao gồm screenshot nếu có).

🚀 Kết luận

Playwright MCP là một bước tiến mới giúp VS Code và Playwright có thể làm việc cùng nhau trong môi trường AI hỗ trợ. Nhờ có MCP Server, bạn có thể:

Gọi Playwright trực tiếp từ AI Copilot hoặc ChatGPT trong VS Code.
Tự động tạo test cases, chụp screenshot, và phân tích kết quả.
Giảm thời gian thiết lập và quản lý môi trường kiểm thử.

🔧 Cài đặt xong, bạn có thể bắt đầu thử nghiệm bằng cách yêu cầu AI chạy test tự động ngay trong VS Code!