Tabbit博客

Playwright MCP 入门:安装、操作和验证

注册固定版本的 Playwright MCP,用本地练习页执行任务,并从新快照确认动作结果。

本文目录
  1. 请求如何从 Agent 到网页
  2. 固定版本并注册服务
  3. 打开练习页并读初始状态
  4. 点一次,再读取新结果
  5. 真实任务前选择运行模式
  6. 实测与社区反馈的范围
  7. 能看到 Playwright 工具就算浏览器可用吗?

Playwright MCP 把浏览器工具提供给兼容的 Agent 客户端。配置成功要分三步验证:客户端发现工具,服务打开预期浏览器,操作后网页返回预期状态。先在本地模拟页上走完三步,再处理会影响真实数据的站点。

请求如何从 Agent 到网页

Agent 让 MCP 客户端调用工具。使用 stdio 时,客户端把 JSON-RPC 消息发给 Playwright MCP 进程。Playwright 驱动配置的浏览器并返回回执,可能包含 URL、无障碍快照和操作信息。工具发现只说明客户端和服务能通信,无法证明浏览器已启动或操作已完成。

Microsoft · Playwright MCP

固定版本并注册服务

在客户端 MCP 设置中添加本地 stdio 服务。本例固定 @playwright/mcp 0.0.84,指定 macOS 已有的 Tabbit Browser Dev 可执行文件。使用自己的可启动浏览器路径。自定义可执行文件是独立的运行方式。去掉参数后,服务会按配置选默认浏览器。实测 Node.js 22.23.1,MCP 握手报告 Playwright 1.65.0-alpha-2026-10-30。保存后按客户端要求重新加载。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@0.0.84",
        "--executable-path",
        "/Applications/Tabbit Browser Dev.app/Contents/MacOS/Tabbit Browser Dev",
        "--isolated",
        "--headless",
        "--viewport-size",
        "1000x565"
      ]
    }
  }
}

Playwright MCP · Configuration

打开练习页并读初始状态

把练习 HTML 下载到独立的空目录,用回环地址提供服务。让 Agent 打开准确 URL 并查看快照。预期标记是 F01-FIXTURE,初始状态 State: OFF。在当前快照找 Enable demo 按钮引用。本次为 e5。你的编号可能不同,以当前快照为准。

下载练习 HTML

python3 -m http.server 8765 --bind 127.0.0.1

http://127.0.0.1:8765/fixture.html

点一次,再读取新结果

只点击该引用,再读取新快照。本次结果为 State: ON、原有标记及禁用的 Demo enabled 按钮。这些是页面状态断言。工具显示已点击而页面没有变化时,仍要继续定位问题。引用过期就重新观察再选,别跨页复用旧引用或把第二次点击视为无影响。

步骤工具预期结果
1browser_navigate + browser_snapshotF01-FIXTURE · State: OFF
2browser_click · target: e5Demo enabled
3browser_snapshotF01-FIXTURE · State: ON

Tabbit 截图显示 State: ON 和 F01-FIXTURE

Playwright MCP · Snapshots

真实任务前选择运行模式

本次隔离模式用空白会话,不读取已有登录配置。有界面模式便于人看过程,无界面模式可用于无人值守测试。经授权且需要保留登录时,可以用专用持久配置。官方扩展可连接兼容的现有浏览器,CDP 可连接获准的端点。使用前核对配置、访问范围和进程生命周期。

模式用途
--isolated空白会话
Headed人工查看
Extension / CDP现有会话

Playwright MCP · Extension

实测与社区反馈的范围

真实 stdio 客户端初始化服务、列工具、导航、快照、点 e5、读新快照、保存截图并关掉隔离 Tabbit。测试页没有账号、真实提交或模型调用。一位 r/Playwright 用户反馈同名按钮靠序号选容易错;一位公开工具作者在 r/mcp 报告大快照占用大量上下文。两个案例支持缩小观察范围和核对状态,不能拿来给工具排名。

r/Playwright r/mcp

能看到 Playwright 工具就算浏览器可用吗?

工具发现验证了注册。再打开预期页面并检查可见标记,然后用操作回执验证浏览器链路。

常见问题

能看到 Playwright 工具就算浏览器可用吗?

工具发现验证了注册。再打开预期页面并检查可见标记,然后用操作回执验证浏览器链路。

Playwright MCP 如何工作?

Agent 让 MCP 客户端调用工具。使用 stdio 时,客户端把 JSON-RPC 消息发给 Playwright MCP 进程。Playwright 驱动配置的浏览器并返回回执,可能包含 URL、无障碍快照和操作信息。工具发现只说明客户端和服务能通信,无法证明浏览器已启动或操作已完成。

怎样注册固定版本?

在客户端 MCP 设置中添加本地 stdio 服务。本例固定 @playwright/mcp 0.0.84,指定 macOS 已有的 Tabbit Browser Dev 可执行文件。使用自己的可启动浏览器路径。自定义可执行文件是独立的运行方式。去掉参数后,服务会按配置选默认浏览器。实测 Node.js 22.23.1,MCP 握手报告 Playwright 1.65.0-alpha-2026-10-30。保存后按客户端要求重新加载。

快照引用失效怎么办?

只点击该引用,再读取新快照。本次结果为 State: ON、原有标记及禁用的 Demo enabled 按钮。这些是页面状态断言。工具显示已点击而页面没有变化时,仍要继续定位问题。引用过期就重新观察再选,别跨页复用旧引用或把第二次点击视为无影响。

应该选哪个运行模式?

本次隔离模式用空白会话,不读取已有登录配置。有界面模式便于人看过程,无界面模式可用于无人值守测试。经授权且需要保留登录时,可以用专用持久配置。官方扩展可连接兼容的现有浏览器,CDP 可连接获准的端点。使用前核对配置、访问范围和进程生命周期。

下一步

让 Tabbit 与你并肩工作。

跨标签页调研、自动化重复的浏览器工作,让每一处上下文都触手可及。