Playwright MCP: Browser Automation Cho AI Coding Agent — Hướng Dẫn Chi Tiết

Playwright MCP Server là MCP server được search nhiều nhất toàn cầu 2026 — vượt cả GitHub và Figma. Sức mạnh của nó rất đơn giản: cho AI agent của bạn lái một trình duyệt thực sự.

Agent có thể navigate, click buttons, fill forms, chụp screenshot, chạy E2E tests, và debug visual regressions — tất cả qua natural language commands. Cho developer, điều này nghĩa là nói “viết E2E test cho checkout flow” thay vì mất 30 phút viết Playwright selectors thủ công.

Cài Đặt#

Docker (Khuyến nghị)#

1
docker pull mcr.microsoft.com/playwright-mcp/server:latest

Claude Code:

1
claude mcp add playwright \
2
  --command docker \
3
  --args "run -i --rm --init -e PLAYWRIGHT_MCP_HEADLESS=true mcr.microsoft.com/playwright-mcp/server"

Cursor (.cursor/mcp.json):

1
{
2
  "mcpServers": {
3
    "playwright": {
4
      "command": "docker",
5
      "args": [
6
        "run", "-i", "--rm", "--init",
7
        "-e", "PLAYWRIGHT_MCP_HEADLESS=true",
8
        "mcr.microsoft.com/playwright-mcp/server"
9
      ]
10
    }
11
  }
12
}

npx (Không Docker)#

1
claude mcp add playwright -- npx -y @playwright/mcp@latest

Tools Overview#

Tool	Chức năng
browser_navigate	Đi tới URL
browser_click	Click element (text, selector, coordinates)
browser_fill	Gõ text vào input
browser_select	Chọn option từ dropdown
browser_screenshot	Chụp screenshot
browser_evaluate	Chạy JS trong page context
browser_wait	Chờ element hoặc navigation
browser_pdf	Lưu trang thành PDF

Workflows Thực Tế#

Workflow 1: E2E Test Generation#

1
$ claude "Record E2E test cho checkout process"
2

3
Agent:
4
  1. Mở browser tới localhost:3000
5
  2. Add sản phẩm vào cart
6
  3. Vào checkout
7
  4. Điền shipping info
8
  5. Chọn payment method
9
  6. Hoàn tất purchase
10
  7. Record tất cả actions thành Playwright test code
11
  8. Lưu: `tests/e2e/checkout.spec.ts`
12

13
→ Có complete Playwright test mà không cần viết selector nào.

Workflow 2: Visual Regression Debugging#

1
$ claude "Check landing page mới trông thế nào trên mobile"
2

3
Agent:
4
  1. Mở browser ở 375x812 (iPhone viewport)
5
  2. Navigate tới localhost:3000/landing
6
  3. Chụp full-page screenshot
7
  4. So sánh với baseline
8
  5. Báo cáo: "Hero section bị overlap với nav trên mobile.
9
     Screenshot đây."

Workflow 3: Cross-Browser Testing#

1
$ claude "Chạy checkout test trên Firefox và WebKit nữa"
2

3
Agent:
4
  1. Mở Chromium → chạy checkout flow
5
  2. Mở Firefox → chạy checkout flow
6
  3. Mở WebKit → chạy checkout flow
7
  4. So sánh: "Cả 3 browser pass.
8
     Nhưng Firefox có layout shift 2px ở payment form."

Token Costs#

Operation	Approx. Token Cost
Navigate to page	1,000 - 3,000
Click + verify	500 - 2,000
Complex form (5+ fields)	3,000 - 8,000
Screenshot	~200
Full E2E test	10,000 - 30,000

Mẹo giảm cost:

Dùng browser_wait thay vì poll
Chụp screenshot chỉ khi cần
Reuse page sessions
Limit viewport size

Tổng Kết#

Playwright MCP là #1 trending MCP server vì một lý do: nó biến natural language description thành real browser interactions. Cho team viết và maintain E2E tests, nó arguably là MCP server impactful nhất bạn có thể cài.

Combo mạnh: Playwright MCP (test gen) + GitHub MCP (PR review) + Firecrawl MCP (test fixture data).

Series: Practical MCP Servers for Developers — 2026 Edition. Day 4 of 6.