Cách Sử Dụng Claude Code với Playwright MCP: Hướng Dẫn Thiết Lập Hoàn Chỉnh

Playwright MCP là gì?

Máy chủ Playwright MCP cung cấp cho bất kỳ máy khách Model Context Protocol nào khả năng tự động hóa trình duyệt. Thay vì yêu cầu AI “nhìn vào” các pixel, máy chủ trả về ảnh chụp nhanh về khả năng truy cập có cấu trúc của trang, và mô hình tương tác với các phần tử bằng ID tham chiếu. Điều đó làm cho vòng lặp nhanh chóng, xác định và không có chi phí mô hình vision. Nó hoạt động với VS Code, Cursor, Windsurf, Claude Desktop, Claude Code và bất kỳ máy khách MCP nào khác.

Đối với Claude Code đặc biệt, điều này có nghĩa là tác nhân trong terminal của bạn giờ đây có thể mở trình duyệt, nhấp xung quanh, điền biểu mẫu, giả mạo các yêu cầu mạng, chụp ảnh màn hình và thậm chí thực thi các tập lệnh Playwright tùy chỉnh — tất cả được điều khiển từ các lời nhắc ngôn ngữ tự nhiên.

Điều Kiện Tiên Quyết

Trước khi bắt đầu, hãy chắc chắn rằng bạn có:

• Node.js 18 hoặc phiên bản mới hơn được cài đặt
• Claude Code được cài đặt và đăng nhập (chạy claude trong terminal của bạn để xác minh)
• Một terminal mà bạn cảm thấy thoải mái khi làm việc

Đó là tất cả — Playwright MCP tải xuống các nhị phân trình duyệt của nó khi chạy lần đầu tiên.

Sẵn sàng phát triển doanh nghiệp của bạn?

Bắt đầu dùng thử miễn phí ngay hôm nay và xem kết quả trong vài ngày.

Yêu cầu demo Đăng nhập

Thiết Lập Tích Hợp Playwright MCP

Kết nối Playwright MCP với Claude Code là một lệnh duy nhất. Thực hiện các bước sau để kết nối nó:

Thêm Máy Chủ Playwright MCP

Mở terminal của bạn và chạy:

claude mcp add playwright npx @playwright/mcp@latest

Điều này đăng ký một máy chủ MCP mới có tên playwright mà Claude Code khởi chạy thông qua npx bất cứ khi nào nó cần các công cụ trình duyệt. Lần gọi đầu tiên tải xuống gói và các nhị phân trình duyệt cần thiết, vì vậy hãy chờ một chút lần đầu tiên.

Xác Minh Kết Nối

Bắt đầu một phiên Claude Code mới và chạy lệnh /mcp:

claude

/mcp

Bạn sẽ thấy playwright được liệt kê như một máy chủ được kết nối, cùng với các công cụ nó hiển thị (điều hướng, nhấp chuột, nhập, ảnh chụp nhanh, giả mạo mạng và hơn nữa).

Tùy Chọn: Sử Dụng Cấu Hình JSON Thay Thế

Nếu bạn thích chỉnh sửa các tệp cấu hình trực tiếp, máy chủ tương tự có thể được thêm vào ~/.claude.json (hoặc .mcp.json được xác định phạm vi dự án) bằng định dạng MCP tiêu chuẩn:

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

Khởi động lại Claude Code sau khi chỉnh sửa tệp và máy chủ sẽ xuất hiện trong /mcp.

Tự Động Hóa Trình Duyệt Đầu Tiên Của Bạn Trong Claude Code

Với máy chủ được kết nối, các lời nhắc của bạn giờ đây có thể điều khiển một trình duyệt thực. Hãy thử tương tác canonical đầu tiên từ tài liệu Playwright:

Điều hướng đến https://demo.playwright.dev/todomvc và thêm một vài mục việc cần làm.

Claude Code sẽ mở trình duyệt, yêu cầu ảnh chụp nhanh về khả năng truy cập của trang, định vị đầu vào bằng tham chiếu phần tử của nó, nhập từng việc cần làm và xác nhận kết quả cho bạn trong terminal.

Lưu ý về trình duyệt nào mở: theo mặc định, điều này khởi chạy Chromium ở chế độ headed. Để thay đổi nó, thêm các cờ vào args trong cấu hình MCP của bạn và khởi động lại Claude Code: --headless để ẩn cửa sổ, hoặc --browser=firefox|webkit|msedge để chuyển đổi công cụ.

Cách Ảnh Chụp Nhanh Về Khả Năng Truy Cập Hoạt Động

Khi một công cụ Playwright MCP chạy, nó trả về ảnh chụp nhanh có cấu trúc của trang — vai trò phần tử, nội dung văn bản và ID tham chiếu — thay vì pixel. Claude đọc ảnh chụp nhanh và sử dụng các tham chiếu như ref=e5 để nhập vào hộp văn bản hoặc ref=e10 để chuyển đổi hộp kiểm. Không có đẩy pixel, không có bộ chọn CSS dễ bị hỏng — chỉ là trạng thái trang có cấu trúc mà mô hình có thể suy luận.

Tham gia bản tin của chúng tôi

Nhận các mẹo, xu hướng và ưu đãi mới nhất miễn phí.

Địa chỉ email

Đăng ký

Khả Năng Cốt Lõi Bạn Có Thể Sử Dụng Từ Claude Code

Khi Playwright MCP được kết nối, các lời nhắc tương tự mà bạn sẽ đưa cho một đồng nghiệp hoạt động trong Claude Code:

• Điều hướng: “Đi đến example.com,” “quay lại,” “tải lại trang.”
• Nhấp chuột và nhập: “Nhấp vào nút Gửi,” “điền trường email bằng test@example.com .”
• Ảnh chụp nhanh: “Chụp ảnh màn hình của phần giá cả.”
• Bàn phím và chuột: Nhấn các phím, di chuột, kéo và thả.
• Các tab và hộp thoại: Mở các tab mới, chuyển đổi giữa chúng, chấp nhận hoặc loại bỏ các cửa sổ bật lên.
• Giám sát mạng: “Liệt kê các yêu cầu được thực hiện kể từ khi trang tải.”
• Giả mạo API: “Giả mạo điểm cuối /api/users để trả về một mảng trống.”
• Trạng thái lưu trữ: Lưu các phiên đã xác thực vào một tệp và tải lại chúng sau này.

Đối với quy trình công việc cần nhiều hơn một lệnh gọi công cụ duy nhất, bạn có thể yêu cầu Claude Code gọi browser_run_code và thực thi tập lệnh Playwright nội tuyến — hữu ích cho các khẳng định, trích xuất dữ liệu hoặc bất cứ điều gì có lợi từ một vài dòng mã bắt buộc.

Các Tùy Chọn Cấu Hình Hữu Ích

Playwright MCP có một số cờ đáng biết. Thêm chúng vào mảng args trong cấu hình của bạn (hoặc vào lệnh claude mcp add sau --).

Chế Độ Headless

Trình duyệt chạy ở chế độ headed theo mặc định để bạn có thể xem những gì đang xảy ra. Để chạy headless — hữu ích cho CI hoặc các vỏ từ xa — chuyển --headless:

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

Chọn Một Trình Duyệt

Chuyển đổi các công cụ bằng cờ --browser. Các giá trị được hỗ trợ là chrome, firefox, webkit và msedge:

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

Chế Độ Hồ Sơ

Playwright MCP hỗ trợ ba chế độ hồ sơ:

• Persistent (mặc định): Trạng thái đăng nhập và cookie vẫn tồn tại giữa các phiên.
• Isolated: Chuyển --isolated để bắt đầu mỗi phiên mới, tùy chọn được gieo hạt bằng --storage-state.
• Tiện ích mở rộng trình duyệt: Chuyển --extension để đính kèm vào các tab trình duyệt hiện có của bạn thông qua tiện ích mở rộng Playwright MCP Bridge.

Máy Chủ HTTP Độc Lập

Nếu bạn cần chạy một trình duyệt headed ở nơi không có màn hình được đính kèm (hoặc từ một worker IDE), khởi chạy máy chủ riêng biệt và kết nối qua HTTP.

Mở một terminal thứ hai — để nó chạy cho toàn bộ phiên — và bắt đầu máy chủ ở đó:

npx @playwright/mcp@latest --port 8931

Giữ terminal đó mở. Đó là những gì hiển thị trình duyệt trên localhost:8931 để bạn có thể xem phiên trong trình duyệt của riêng bạn và để Claude Code có thứ gì đó để kết nối. Đóng terminal sẽ tắt máy chủ.

Sau đó, trong terminal nơi bạn chạy Claude Code, trỏ nó vào điểm cuối bằng cách cập nhật cấu hình của bạn:

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/mcp"
    }
  }
}

Quy Trình Công Việc Thực Tế Đáng Lấy Cảm Hứng

Khi Playwright MCP được kết nối, Claude Code có thể xử lý việc xây dựng kiểm tra end-to-end, tái tạo lỗi, kiểm tra giả mạo API, kiểm tra trang và kiểm tra khói phát hành — bất cứ điều gì liên quan đến việc điều khiển trình duyệt và báo cáo lại.

Hai điều làm cho các lời nhắc đó thực sự hoạt động trong thực tế. Đầu tiên, một CLAUDE.md trong thư mục gốc dự án của bạn ghi lại URL dàn dựng, thông tin đăng nhập demo và bất kỳ quy ước nào mà tác nhân nên tuân theo — nếu không có nó, “đăng nhập như người dùng demo” không có gì để neo. Thứ hai, nếu bạn muốn Claude Code kéo ngữ cảnh từ các vấn đề hoặc vé, hãy kết nối máy chủ MCP thứ hai cho điều đó — máy chủ GitHub MCP là lựa chọn phổ biến. Bỏ qua cả hai và Claude Code sẽ (hợp lý) hỏi bạn vấn đề #482 là gì.

Tại Sao Ghép Claude Code Với Playwright MCP?

Một vài lý do tại sao sự kết hợp này rất khó để vượt qua:

• Terminal-native: Mọi thứ xảy ra nơi bạn đã làm việc. Không có chuyển đổi ngữ cảnh vào một trình chạy kiểm tra riêng biệt.
• Accessibility-first: Ảnh chụp nhanh vượt trội so với ảnh chụp màn hình về tốc độ và độ tin cậy, và chúng hoạt động mà không cần mô hình vision.
• Real Playwright underneath: Bất cứ điều gì bạn có thể làm với Playwright trong mã, bạn có thể làm ở đây — đa trình duyệt, giả mạo mạng, trạng thái lưu trữ và hơn nữa.
• Composable with other MCP servers: Xếp chồng Playwright bên cạnh GitHub, cơ sở dữ liệu hoặc máy chủ MCP giám sát của bạn và Claude Code có thể di chuyển công việc end-to-end trên tất cả chúng.
• Open standard: MCP là di động. Máy chủ Playwright tương tự hoạt động trong Cursor, VS Code, Windsurf và Claude Desktop nếu bạn chuyển đổi máy khách.

Thêm máy chủ, chạy /mcp để xác nhận, và lời nhắc “đi kiểm tra trang đăng nhập” tiếp theo của bạn trở thành một phiên trình duyệt thực — được điều khiển bởi Claude Code, được xem (hoặc không) ở chế độ headed và có thể xác minh thông qua ảnh chụp nhanh về khả năng truy cập.