Playwright Smart MCP

剧作家智能MCP

A. 令牌高效 Playwright MCP服务器公开 4个智能工具，而不是22个，将上下文窗口的使用率降低了约85%。

✨ v2.1中的新功能

• 🔧 代码执行新 browser_execute_code 用于复杂UI交互的工具
• 🖥️ 头部模式：查看浏览器窗口，观察自动化发生
• 💾 会话保持：登录一次，跨会话保持登录状态
• 🔐 自动保存：每次操作后自动保存Cookie和登录状态
• ⚡ 交互式工作流：你登录，AI接管

看 功能.md 有关headed模式和会话持久性的完整文档。

问题

标准的Playwright MCP服务器公开了22个工具，每个工具都有完整的JSON模式。这消耗了 约5000个代币 在你做任何事情之前，先打开你的上下文窗口。

解决方案

此服务器将所有功能整合到4个高级工具中：

结果： 约900个代币，而非约5000个(减少82%)

安装

选项1：本地克隆和使用

git clone https://github.com/jaystarz1/playwright-smart-mcp.git
cd playwright-smart-mcp
npm install

选项2:npx（即将推出）

npx playwright-smart-mcp

配置

克劳德代码（全球-所有项目）

添加 ~/.claude/settings.json:

{
  "mcpServers": {
    "playwright-smart": {
      "type": "stdio",
      "command": "node",
      "args": ["/path/to/playwright-smart-mcp/server.js"]
    }
  }
}

克劳德代码（项目特定）

添加到您的项目 .claude.json 或通过CLI：

claude mcp add playwright-smart node /path/to/playwright-smart-mcp/server.js

克劳德桌面版

添加到您的Claude Desktop配置中：

{
  "mcpServers": {
    "playwright-smart": {
      "command": "node",
      "args": ["/path/to/playwright-smart-mcp/server.js"]
    }
  }
}

用法

浏览器_屏幕截图

截取任何URL的屏幕截图：

{
  "url": "https://example.com",
  "fullPage": true,
  "waitFor": ".main-content"
}

浏览器提取

获取页面内容和链接：

{
  "url": "https://example.com",
  "selector": ".article-body",
  "includeLinks": true
}

浏览器交互

执行一系列操作：

{
  "url": "https://example.com/login",
  "actions": [
    {"type": "fill", "selector": "#email", "value": "user@example.com"},
    {"type": "fill", "selector": "#password", "value": "secret"},
    {"type": "click", "selector": "button[type=submit]"},
    {"type": "wait", "selector": ".dashboard"}
  ],
  "returnScreenshot": true
}

可用操作类型：

• click -单击元素
• type -键入文本（逐个按键）
• fill -填写表单字段（比键入更快）
• select -选择下拉选项
• wait -等待元素或超时
• scroll -滚动页面
• press -按键盘键（Enter、Tab等）

浏览器执行代码

当标准交互失败时，在浏览器上下文中执行JavaScript：

{
  "code": "document.querySelector('[placeholder*=\"Add people\"]').value = 'user@example.com'; return 'Email entered';"
}

使用案例：

• 不响应标准选择器的复杂React/Vue组件
• 需要自定义事件调度的动态UI元素
• DOM操作，使用JavaScript比链式交互更简单
• 以自定义格式提取数据

示例：共享Google Drive文件夹

{
  "code": "const input = document.querySelector('[placeholder*=\"Add people\"]'); if (input) { input.value = 'user@example.com'; input.dispatchEvent(new Event('input', { bubbles: true })); return 'Email added'; } return 'Input not found';"
}

示例：表单提交

使用标准Playwright MCP代替6+个工具调用：

browser_navigate → form page
browser_type → email field
browser_type → password field
browser_click → submit button
browser_wait_for → success message
browser_screenshot → capture result

在里面做 一个电话:

{
  "tool": "browser_interact",
  "arguments": {
    "url": "https://example.com/signup",
    "actions": [
      {"type": "fill", "selector": "#email", "value": "user@example.com"},
      {"type": "fill", "selector": "#password", "value": "secret123"},
      {"type": "click", "selector": "button[type=submit]"},
      {"type": "wait", "selector": ".welcome-message"}
    ],
    "returnScreenshot": true
  }
}

为什么采用这种方法？

基于 Anthropic关于使用MCP执行代码的工程博客文章，倡导 渐进式呈现 工具能力和 代码执行作为逃生口.

“模型非常擅长导航文件系统。将工具作为文件系统上的代码呈现，允许模型按需读取工具定义，而不是预先读取所有定义。”

此服务器采用该原理并将其应用于浏览器自动化：

• 高级工具 (browser_interact)处理95%的用例
• 代码执行 (browser_execute_code)处理选择器失败时的边缘情况
• 结果：头皮法与大锤法-工具更少，使用更智能

令牌比较

许可证

麻省理工学院

贡献

PR欢迎！改进思路：

• \[\]添加 browser_pdf PDF生成工具
• \[\]添加 browser_record 用于会话录制
• \[\]支持多个选项卡/上下文
• \[\]预定义的工作流（登录、表单提交、抓取）

学分

• 建立在 剧作家
• 灵感来自 Anthropic的MCP文档
• 由Jay Tarzwell创作/聊天机器人天才