Playwright MCP: điều khiển trình duyệt bằng ngôn ngữ tự nhiên qua cây khả truy cập

1. Playwright MCP là gì và giải quyết vấn đề nào

Playwright MCP (Model Context Protocol) là cây cầu để một mô hình AI như Claude, GPT hay Gemini điều khiển trình duyệt thông qua các công cụ Playwright, bằng chỉ dẫn tiếng Anh đời thường. Điểm cốt lõi là mô hình không nhìn ảnh pixel mà đọc cây khả truy cập (accessibility tree) — cùng cấu trúc mà trình đọc màn hình dùng. Nhờ đó, hành động dựa trên ngữ nghĩa 'nút Đăng nhập', 'ô Email' thay vì toạ độ mong manh.

Vì sao điều này quan trọng với kiểm thử? Vì cây khả truy cập ổn định hơn nhiều so với pixel: đổi màu, đổi CSS, đổi bố cục nhỏ không làm mô hình lạc. Ngoài ra, nó buộc mô hình tương tác qua cùng lớp ngữ nghĩa mà người khuyết tật dùng, nên kiểm thử qua MCP gián tiếp cải thiện nhận thức về accessibility. MCP biến khám phá bằng ngôn ngữ tự nhiên thành bước đầu, rồi ta chưng cất thành spec bền.

2. Thiết lập Playwright MCP

Thiết lập cơ bản gồm hai phần: cài server MCP của Playwright và khai báo nó trong cấu hình của ứng dụng chủ (host) như Claude Desktop hay một agent tuỳ biến. Host sẽ khởi chạy server, đọc danh sách tool mà server công bố, rồi cho mô hình gọi. Cấu hình thường là một tệp JSON liệt kê lệnh chạy server và các cờ giới hạn phạm vi.

# Cài và chạy thử server MCP của Playwright
npx @playwright/mcp@latest --help

# Chạy ở chế độ headless, giới hạn origin cho phép:
npx @playwright/mcp@latest --headless --allowed-origins "https://app.example.com"

// mcp.config.json — khai báo server cho host (vd. Claude Desktop).
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--headless",
        "--allowed-origins", "https://app.example.com",
        "--no-file-uploads"
      ]
    }
  }
}

3. Công cụ được phơi bày và cách khoanh vùng phạm vi

Server MCP công bố một tập tool: điều hướng, nhấp, gõ, đọc snapshot khả truy cập, chờ, chụp ảnh, đọc console và network. Mỗi tool là một khả năng mà mô hình có thể gọi. Nguyên tắc phơi bày tối thiểu: chỉ bật những tool cần cho nhiệm vụ. Ví dụ khi chỉ khám phá đọc, bạn có thể tắt tool tải tệp và tool điền form để giảm bề mặt rủi ro.

// Khoanh vùng tool: chỉ cho phép đọc & điều hướng (khám phá an toàn).
{
  "mcpServers": {
    "playwright-readonly": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--headless",
        "--caps", "core,snapshot",        // chỉ điều hướng + đọc a11y snapshot
        "--no-file-uploads",
        "--blocked-tools", "browser_type,browser_click"  // cấm hành động ghi
      ]
    }
  }
}

Việc khoanh vùng không chỉ vì an toàn mà còn vì độ tin cậy. Càng ít tool, mô hình càng ít cơ hội chọn nhầm hành động, và log cũng dễ đọc hơn khi truy vết. Trong pha khám phá, một cấu hình 'chỉ đọc' giúp bạn để mô hình đi khắp ứng dụng và mô tả cấu trúc mà không sợ nó vô tình gửi form hay xoá dữ liệu.