- Playwright plugin cho Claude (179K+ lượt cài trên Anthropic directory) bỏ cách đoán pixel coordinates — Claude đọc trực tiếp accessibility tree để click, nhập liệu, điều hướng deterministic trên Chromium, Firefox, WebKit, Edge.
TL;DR
Anthropic đang feature Playwright plugin cho Claude trong plugin directory chính thức — thực chất là @playwright/mcp server của Microsoft, đã đạt 179,333 lượt cài. Điểm đột phá: Claude điều khiển trình duyệt bằng cách đọc accessibility tree (cùng cấu trúc ARIA mà screen reader dùng) thay vì đoán toạ độ pixel từ screenshot. Element được tham chiếu bằng ID ổn định như e5, không phải click(432, 918). Kết quả: deterministic hơn, rẻ hơn token (~3,800 vs 10,000+ cho một trang login), chạy được trên mọi LLM text-only, và miễn phí.
Cái gì mới
Playwright MCP là server Model Context Protocol do Microsoft phát triển, nhưng Anthropic đưa nó thành integration chính thức trong Claude plugins catalog. Thay vì vision model xử lý ảnh và output toạ độ, Claude giờ nhận về một cây text có cấu trúc — mỗi button, input, link đều có role + label + state + một ref duy nhất. Claude chỉ việc gọi browser_click với ref đó.
Bản MCP expose 33–40+ tools: navigation, click, type, form fill, upload, tab management, network mocking, storage/cookies, tracing, video. Hỗ trợ Chromium (default), Firefox, WebKit, Microsoft Edge. Chạy headed mặc định, có --headless cho CI/CD. Cài 1 dòng:
claude mcp add playwright npx @playwright/mcp@latest
npx playwright installVì sao đáng chú ý
Các browser agent trước đây thường dùng vision model: chụp ảnh trang web, mô hình nhìn hình, đoán toạ độ pixel để click. Vấn đề: đổi CSS là gãy, nhầm nút là fail, token đắt, và phải dùng vision-capable LLM. Accessibility-tree-first đảo ngược phương trình — Claude thấy button "Save Changes" là biết chính xác element nào, layout đổi cũng không sao miễn cấu trúc DOM ổn định.
Với dev, đây là vòng feedback ngắn: sửa code, bảo Claude mở localhost, Claude tự verify UI khớp ý định. Với QA, Playwright v1.56 đi kèm 3 AI agent — Planner, Generator, Healer — trong đó Healer auto-patch selector lỗi với tỉ lệ thành công >75% theo benchmark Microsoft.
Technical facts
| Chỉ số | Snapshot mode (default) | Vision mode (--vision) |
|---|---|---|
| Input | Accessibility tree (text) | Base64 screenshot |
| Token / trang login | ~3,800 | ~10,000+ |
| LLM yêu cầu | Bất kỳ text LLM | Vision-capable |
| Target element | Deterministic (ref ID) | Coordinate-based |
| Canvas / WebGL | Hạn chế | OK |
- Snapshot đơn giản: ~200–400 tokens; trang phức tạp có thể đẩy lên 50,000+ tokens.
- Tool schema overhead: ~4,200 tokens.
- Một task tự động hoá điển hình qua MCP: ~114,000 tokens; qua Playwright CLI (ra tháng 2/2026): ~27,000 tokens — giảm 4 lần.
- Context degrade sau khoảng 15 bước với MCP; CLI ổn định đến 50+ bước.
- Healer agent: >75% tỉ lệ sửa thành công selector failure.
- 27,900+ star GitHub; 179,333 lượt cài qua Anthropic plugin directory.
So với các tool khác
| Tiêu chí | Chrome DevTools MCP | Claude in Chrome | Playwright MCP |
|---|---|---|---|
| Nhà phát triển | Anthropic | Microsoft | |
| Số tool | 26 | 16 | 33+ |
| Cross-browser | Chỉ Chrome | Chỉ Chrome | Chromium + Firefox + WebKit |
| Context cost (tools) | ~9% | ~7.7% | ~6.8% |
| Headless / CI | Có | Không | Có |
| Chi phí | Free | Cần gói trả phí | Free |
| Mạnh nhất ở | Debug, performance | Authenticated workflows | Cross-browser testing |
Ngắn gọn: dùng DevTools MCP khi debug performance / network; Claude in Chrome khi cần session đã đăng nhập sẵn của bạn (Gmail, Notion, YouTube Studio…); Playwright MCP khi cần cross-browser, headless, CI/CD hoặc sandboxed agent.
Use cases thực tế
- Self-QA cho dev: chỉnh layout xong, bảo Claude mở localhost xác nhận hiển thị đúng. Không phải tự click nữa.
- Exploratory test: "Thêm 2 sản phẩm vào giỏ, vào checkout, kiểm tra tổng tiền đúng." Claude đi qua flow, xử lý wait + selector, report từng bước.
- Generate test code: pass thêm
--codegen typescript, Claude vừa test vừa xuất ra file Playwright.spec.tssẵn chạy. - Self-healing CI: deploy gãy selector → Healer agent đọc snapshot, patch selector role-based, rerun test. Microsoft công bố >75% pass-rate.
- Scraping dynamic: trang React/Vue với infinite scroll + load-more — accessibility tree cho semantic structure ổn định hơn parse HTML raw.
- Sandboxed agent: môi trường không có shell / filesystem thì MCP là lựa chọn duy nhất để điều khiển browser.
Limitations & pricing
Miễn phí hoàn toàn — @playwright/mcp là open source, không cần API key. Nhưng có vài cái gai:
- Token-heavy ở MCP mode. Mỗi action trả về full accessibility tree; trang phức tạp dễ 50K+ tokens. Đến bước 15 thường đã nuốt 60K–80K tokens context. Fix: set
includeSnapshot: false(giảm 70–80% token/action), hoặc chuyển sang Playwright CLI (4× rẻ hơn) khi agent có filesystem access. - Canvas / WebGL / custom-rendered UI — snapshot mode miss vì không có DOM nodes. Phải bật
--vision(tốn token, cần vision model). - Phiên bản thả nổi.
@latesthay kéo bản beta → tool biến mất giữa session. Pin version cụ thể, ví dụ@playwright/mcp@0.0.23. - Docker / CI phải truyền
--headlessrõ ràng, không là server fail. - Privacy: page content, console log, form data đều gửi lên provider LLM — chỉ dùng trên dev environment với test data.
- Yêu cầu Node.js 18+. Node 16 sẽ lỗi
performance is not defined.
What's next
Tháng 2/2026 Microsoft ship @playwright/cli — cùng accessibility-tree approach nhưng lưu snapshot ra file YAML trên disk, agent chỉ đọc khi cần. Một task 114K token qua MCP còn 27K qua CLI. Với coding agent như Claude Code / Cursor / Copilot (có filesystem), CLI đang được recommend thay MCP. MCP vẫn là lựa chọn duy nhất cho sandboxed agent (Claude Desktop, custom chat UI).
Playwright v1.59 đang chuẩn bị release; repo microsoft/playwright-mcp mới được flatten về single-package layout tháng 4/2026, extension gói tách qua repo microsoft/playwright. Hướng đi rõ ràng: CLI + SKILLs cho throughput cao, MCP cho loop agent cần introspection liên tục.
Nguồn: Anthropic Plugins, Playwright MCP docs, microsoft/playwright-mcp, Morph benchmarks, TestDino.
