入门
🌐 Getting Started
先决条件
🌐 Prerequisites
- Node.js 20 或更新版本
- 一个 MCP 客户端：VS Code、Cursor、Windsurf、Claude Code、Claude Desktop 或类似的
安装
🌐 Installation
将 Playwright MCP 服务器添加到你的客户端：
🌐 Add the Playwright MCP server to your client:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}
请参阅 客户端设置 以获取客户端的具体说明。浏览器在首次使用时会自动下载。
🌐 See Client Setup for client-specific instructions. The browser downloads automatically on first use.
第一次互动
🌐 First interaction
询问你的 AI 助手：
🌐 Ask your AI assistant:
Navigate to https://demo.playwright.dev/todomvc and add a few todo items.
助手调用 MCP 工具打开浏览器、导航并进行交互——在每一步返回可访问性快照：
🌐 The assistant calls MCP tools to open the browser, navigate, and interact — returning accessibility snapshots at each step:
→ browser_navigate { url: "https://demo.playwright.dev/todomvc" }
→ browser_snapshot
- heading "todos" [level=1]
- textbox "What needs to be done?" [ref=e5]
→ browser_type { ref: "e5", text: "Buy groceries", submit: true }
→ browser_snapshot
- heading "todos" [level=1]
- textbox "What needs to be done?" [ref=e5]
- listitem:
- checkbox "Toggle Todo" [ref=e10]
- text: "Buy groceries"
- contentinfo:
- text: "1 item left"
工作流程
🌐 The workflow
每次 MCP 互动都遵循这个循环：
🌐 Every MCP interaction follows this cycle:
- 导航 —
browser_navigate打开一个 URL - 快照 — 工具返回带有元素引用的可访问性树
- 交互 — 该大型语言模型使用引用进行点击、输入或填写
- 重新快照 — 每个操作都会返回更新后的状态
浏览器默认以有界模式打开，这样你可以观看。传入 --headless 以在没有可见窗口的情况下运行。
🌐 The browser opens in headed mode by default so you can watch. Pass --headless to run without a visible window.
示例提示
🌐 Example prompts
Go to https://example.com and take a screenshot.
Open https://demo.playwright.dev/todomvc, add three todos,
check off the first one, and take a screenshot.
Navigate to https://news.ycombinator.com and list the top 5 stories.
Save the current browser state to auth.json so we can skip login next time.
下一步
🌐 Next steps