Playwright MCP: cho agent dùng trình duyệt bằng accessibility snapshot thay vì ảnh chụp
Tóm tắt
Playwright MCP cung cấp tool điều khiển trình duyệt qua accessibility tree: nhanh, rẻ token và ổn định hơn cách dựa vào screenshot. Thêm vào Claude Code bằng claude mcp add playwright npx @playwright/mcp@latest. Hợp cho test E2E, tái hiện bug, kiểm tra responsive.
Muốn agent kiểm tra luồng đăng ký trên web, tái hiện một bug giao diện hay điền form hàng loạt, cách “cổ điển” là cho nó xem ảnh chụp màn hình rồi đoán toạ độ để click — chậm, tốn token và hay trượt. Playwright MCP của Microsoft làm khác: agent đọc trang qua accessibility tree — cấu trúc dữ liệu mô tả nút, ô nhập, liên kết, vai trò của chúng — rồi thao tác theo đó. Không cần model thị giác, nhanh hơn và ổn định hơn.
Vì sao accessibility snapshot tốt hơn ảnh chụp?
| Tiêu chí | Dựa vào ảnh chụp | Accessibility snapshot |
|---|---|---|
| Cách “nhìn” trang | Pixel, đoán toạ độ | Cây phần tử có tên, vai trò, trạng thái |
| Độ ổn định | Dễ lệch khi layout, kích thước màn hình đổi | Tham chiếu phần tử chính xác |
| Yêu cầu model | Cần khả năng thị giác | Chỉ cần đọc văn bản có cấu trúc |
| Lợi ích phụ | — | Lộ luôn lỗi accessibility (nút không có nhãn…) |
Cài vào Claude Code
# Cho mọi dự án
claude mcp add --scope user playwright -- npx -y @playwright/mcp@latest
# Chỉ dự án hiện tại (ghi vào .mcp.json, commit được)
claude mcp add --scope project playwright -- npx -y @playwright/mcp@latestCần Node.js 18 trở lên. Sau khi thêm, gõ /mcp để kiểm tra server đã kết nối. Claude Desktop, VS Code, Cursor dùng mục JSON tương ứng với lệnh npx @playwright/mcp@latest.
Cờ cấu hình hay dùng
| Cờ | Tác dụng |
|---|---|
--headless | Chạy không hiện cửa sổ (mặc định có giao diện để bạn quan sát) |
--isolated | Profile chỉ trong bộ nhớ, không lưu xuống đĩa — chạy nhiều client song song |
--browser | Chọn trình duyệt/kênh (chrome, firefox, webkit, msedge…) |
--storage-state | Nạp trạng thái đăng nhập (cookie, localStorage) từ file — dùng với tài khoản test |
--allowed-origins / --blocked-origins | Giới hạn domain trình duyệt được truy cập |
--caps vision,pdf,devtools | Bật thêm khả năng: thao tác theo toạ độ, xuất PDF, công cụ devtools |
--save-trace, --output-dir | Lưu trace Playwright và file kết quả để debug sau |
--viewport-size | Đặt kích thước viewport — kiểm tra responsive |
Lưu ý: với profile lưu lâu dài (persistent), chỉ một tiến trình trình duyệt dùng được tại một thời điểm — chạy song song thì thêm --isolated. Dự án còn ở phiên bản 0.0.x, nên ghim phiên bản và kiểm tra trước khi dùng nghiêm túc.
Prompt mẫu cho QA
Mở http://localhost:3000, đăng ký bằng tài khoản test trong fixtures/users.json,
thêm 2 sản phẩm vào giỏ, kiểm tra tổng tiền. Nếu sai, chụp màn hình,
ghi bước tái hiện vào bug-report.md.Mở trang /checkout ở viewport 375x812. Liệt kê các nút không có nhãn
truy cập được và các ô nhập thiếu label.Khi nào dùng, khi nào không?
| Phù hợp | Kém phù hợp |
|---|---|
| Kiểm thử khám phá, tái hiện bug | Agent code chạy khối lượng lớn với ngân sách token chặt |
| Vòng lặp agent dài cần giữ trạng thái trình duyệt | Tác vụ trình duyệt đơn giản, chạy một lần |
| Điền form, nhập liệu không cần model thị giác | Thao tác dựa trên pixel (canvas, game) |
Accessibility tree và mô tả tool khá dài, nên với coding agent cần tiết kiệm token, chính hướng dẫn của Microsoft nghiêng về cách dùng Playwright CLI + skill; đổi lại bạn mất trạng thái trình duyệt liên tục và khả năng quan sát chi tiết của MCP.
Lưu ý an toàn
- Server chạy với quyền người dùng của bạn; trình duyệt nó mở truy cập được mạng và hệ thống file của máy.
- Chỉ dùng trên môi trường dev/staging với tài khoản test; đừng đưa mật khẩu thật cho agent.
- Trang web agent mở cũng là nội dung không tin cậy — có thể chứa prompt injection. Giới hạn domain bằng
--allowed-origins. - Gỡ hoặc tắt server khi không cần tự động hoá trình duyệt trong mọi phiên.
Áp dụng thế nào?
- Dev: Dùng để tái hiện bug từ mô tả của QA; khi agent tìm ra luồng đúng, nhờ nó viết thành test Playwright cố định để chạy trong CI — đừng để test phụ thuộc vào agent.
- QA: Kiểm thử khám phá theo kịch bản tự nhiên, kèm kiểm tra accessibility miễn phí từ snapshot.
- PM: Smoke test nhanh staging trước buổi demo bằng một câu lệnh, thay vì chờ người click thủ công.
Nguồn & tham khảo
- microsoft/playwright-mcp — GitHub
- Playwright MCP — dev.co
- Try an MCP: Playwright — Dometrain AI Workshop