用 Playwright MCP 让 AI 自动测试网页：自然语言驱动浏览器（@playwright/mcp 实战）

你有没有被 Selenium / Playwright 脚本折磨过？只要前端改个 class 名、挪个按钮，整条用例就挂。Playwright MCP 走了一条新路：它把浏览器封装成一个 MCP（模型上下文协议）服务器，向 AI 暴露「导航、点击、填表、截图、读取 DOM」等一组工具。AI 不再读你的选择器代码，而是自己观察页面、自己决定下一步点哪。这就是最近火起来的「vibe testing（氛围测试）」。

🎭 本教程适合：写 UI 自动化写到头秃的测试工程师、想给产品做冒烟测试的前端、以及任何想用自然语言驱动浏览器的人。你只需要 Node.js 18+ 和一个支持 MCP 的客户端（Claude Desktop 或 Cursor）。

先搞懂：Playwright MCP 是什么？

一句话：它是「浏览器」和「会思考的 AI」之间的翻译官。普通 Playwright 要你写 page.click('#login-btn')；而 Playwright MCP 把能力拆成标准工具，AI 调用 browser_click 时只需要知道「点登录按钮」即可——选择器由它实时从页面里找。

传统脚本	Playwright MCP
你要写死选择器，易碎	AI 实时读页面，抗改版
报错要看堆栈	用自然语言描述「要什么」，AI 自己排错
适合回归套件	适合探索式、一次性、冒烟类任务

它不是来替代 CI 里的正式回归测试的。MCP 路线更偏「AI 辅助 / 探索式」，结果带随机性。关键链路仍建议保留传统断言；本文教的是把它当作高效的「第一道冒烟 + 快速验证」武器。

Step 1：准备环境，装好 @playwright/mcp

1 装 Node 与 MCP 服务器

确认 Node 18+，然后把 Playwright MCP 作为全局命令可用（用 npx 也行，这里装到全局更省事）：

npm install -g @playwright/mcp@latest
# 验证能找到命令
npx @playwright/mcp --help

💡 它会在首次运行时自动下载 Chromium 内核。如果公司网络拉不动，可设 PLAYWRIGHT_DOWNLOAD_HOST 走镜像，或用系统已装的 Chrome 并加 --channel chrome。

Step 2：接进 Claude Desktop

2 改配置文件，让客户端认识这个工具

打开 Claude Desktop 的配置文件（macOS 在 ~/Library/Application Support/Claude/claude_desktop_config.json，Windows 在 %APPDATA%\Claude\claude_desktop_config.json），加入 mcpServers：

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

改完务必完全退出 Claude Desktop 再重开（macOS 要点菜单「Quit」，不是关窗口）。看到输入框旁出现🔨工具图标、且列表里有 browser_navigate / browser_click 等，就说明接上了。

Step 3：在 Cursor 里用（可选）

3 项目级 MCP，跟着仓库走

Cursor 支持项目级配置：在项目根目录建 .cursor/mcp.json：

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

打开命令面板（Ctrl/Cmd+Shift+P）→ MCP: List Servers，看到 playwright 显示绿点即可。之后在 Chat 里直接说「打开某某网址，点登录，截图给我看」。

🚀 Cursor 的优势是它能把浏览器操作和「改代码」串起来：比如它发现按钮没渲染，会顺手去改前端源码再重试，非常适合本地联调。

Step 4：用自然语言跑第一个测试（snapshot 模式）

4 让 AI 自己找元素

默认是 snapshot（快照）模式：AI 读取页面的可访问性树（accessibility tree），像视障用户一样理解结构，不依赖截图，便宜又稳。直接对客户端说：

打开 https://demo.playwright.dev/todomvc
在输入框里输入「买牛奶」
按回车
断言页面上出现了「买牛奶」这条待办

AI 会依次调用 browser_navigate → browser_snapshot → browser_fill → browser_press_key → 再次 browser_snapshot 来核对结果。你全程不用写一行定位代码。

💡 想让它更稳，可以加一句「如果没出现，把页面的可访问性树打印出来帮我看为什么」——把排错也交给它。

Step 5：vision 模式——直接看截图

5 当结构看不出名堂时切视觉

有些场景（画布、图表、像素级布局）快照树看不出来。启动时加 --vision 让 AI 改用截图理解：

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

vision 模式更烧 token、也更慢。日常优先用 snapshot；只有「看得到但读不懂」的视觉任务才切 vision。两种模式不能混用，要重启客户端切换。

Step 6：用 --caps 给 AI 划权力边界

6 防止 AI 乱点、乱关、乱上传

默认情况下 AI 能做的很多。生产 / 敏感环境务必用 --caps 收权，只开放需要的动作：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--caps", "browser_navigate,browser_snapshot,browser_click,browser_fill"
      ]
    }
  }
}

红线：绝不让 AI 在「已登录你账号的真站点」上跑未受限的浏览器操作。建议用 --user-data-dir 指定一个干净的测试浏览器档案，或用 --storage-state 注入仅含测试账号的登录态，避免它动到你的真实账户。

Step 7：固化成可复用测试 / 接 CI

7 从「对话」沉淀为「脚本」

探索通了之后，把它固化下来更省心：要么让 AI 把刚才的步骤生成一份 Playwright .spec.ts 文件，要么用 --save-trace 导出追踪文件事后复盘：

npx @playwright/mcp@latest --headless --save-trace ./trace.zip
# 让 AI 生成回归用例后，正式跑进 CI
npx playwright test

🎉 到这里你已经跑通「自然语言 → AI 操作浏览器 → 断言 → 沉淀为脚本」的完整闭环。把它当冒烟+探索利器，正式回归仍交给传统断言，两者互补最稳。

常见问题速查

现象	大概率原因 & 解决
客户端里看不到🔨工具	没完全退出重开；或 config 的 JSON 格式写错（逗号/引号）
AI 说「找不到浏览器」	首次运行未下载 Chromium，或环境变量指向了不存在的 channel
snapshot 模式点了错误的元素	页面有多个同名按钮，换用更具体的描述，或临时切 vision 辅助定位
token 烧得太快	在视觉/复杂页面一直用 vision；日常切回 snapshot 模式

📚 更多教程 📰 智能体资讯

← 返回教程中心