AI导哈

智能浏览器自动化工具

一个高效的Playwright MCP服务器，通过减少工具数量优化上下文窗口使用，提供浏览器截图、内容提取、交互和代码执行功能。

  • by jaystarz1
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 jaystarz1/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个高级工具中：

工具 它做什么 替换
browser_screenshot 导航+截图 导航、等待、截图
browser_extract 导航+获取页面内容 导航、快照、评估
browser_interact 单击、键入、填充、滚动等。15多种交互工具
browser_execute_code 在浏览器中执行JavaScript 评估复杂的DOM操作

结果： 约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)处理选择器失败时的边缘情况
  • 结果：头皮法与大锤法-工具更少，使用更智能

令牌比较

服务器 工具 估计。令牌 用例
剧作家MCP 22 ~5000 需要完全控制
剧作家聪明 4 ~900 大多数自动化任务+边缘案例

许可证

麻省理工学院

贡献

PR欢迎！改进思路：

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

学分

相关 MCP