AI导哈

浏览器自动化服务器

一个基于Playwright的浏览器自动化服务器，通过标准化的MCP协议提供程序化浏览器控制功能，支持WebSocket和STDIO通信模式。

  • by sandeep-talware
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 sandeep-talware/mcp-playwright

使用说明

剧作家MCP服务器 一种模型上下文协议（MCP）服务器，通过标准化接口提供Playwright浏览器自动化功能。 🎯 概述 该服务器通过MCP协议实现浏览器自动化，允许LLM和其他客户端以编程方式控制Playwright。它支持WebSocket和STDIO通信模式。 📋 先决条件

Node.js 16.x或更高版本 npm或yarn包管理器 操作系统：Windows、macOS或Linux

🚀 安装

  1. 再进行 bash npm安装
  2. 安装Playwright浏览器 bash npx剧作家安装铬 或者安装所有浏览器： bash npx剧作家装置
  3. 验证安装 bash npm启动 您应该看到： {“级别”：“信息”，“上下文”：“剧作家服务”，“消息”：“编剧浏览器初始化成功”…} {“级别”：“信息”，“上下文”：“MCPServer”，“消息”：“MCP服务器在本地主机8080上启动”…} 📁 项目结构 服务器/ ├── src/ │ ├── 控制器/ │ │ ├── MCPController.js#MCP协议消息处理 │ │ └── PlaywrightController.js#剧作家动作编排 │ ├── 服务/ │ │ ├── PlaywrightService.js#Playwright浏览器操作 │ │ └── MCPProtocolService.js#MCP协议实现 │ ├── utils/ │ │ ├── logger.js#日志工具 │ │ └── validator.js#请求验证 │ ├── config/ │ │ └── config.js#服务器配置 │ ├── server.js#WebSocket服务器入口点 │ └── server-stdio.js#stdio服务器入口点（用于VS代码） ├── package.json └── README.md 🔧 配置 编辑src/config/config.js以自定义服务器设置： javascriptexport常量配置={ 服务器：{ 端口：8080，//WebSocket服务器端口 主机：'localhost'//服务器主机 }, 剧作家：{ headless：false，//在headless模式下运行浏览器 slowMo:100，//减慢操作（毫秒） 默认超时：30000//默认超时（MS） }, mcp：{ 版本：“1.0.0”， name:'剧作家自动化服务器' } }; 环境变量

NODE_ENV-设置为“生产”或“开发” MCP_SERVER_PORT-覆盖默认端口 MCP_SERVER_HOST-覆盖默认主机 LOGLEVEL-设置日志记录级别（调试、信息、警告、错误）

🎮 用法 启动WebSocket服务器（用于客户端连接） bashnpm启动 服务器将在ws://localhost:8080上启动 启动STDIO服务器（用于VS代码LLM集成） bashnpm运行启动stdio 开发模式（更改后自动重启） bash npm运行开发 🛠️ 可用工具 服务器公开了以下Playwright自动化工具：

  1. 剧作家_航空 导航至网址 参数：

url（字符串）-要导航到的url

例子： json{ “name”：“剧作家导航”， “论点”：{ “url”：“https://example.com" } } 2.剧作家 单击元素 参数：

selector（string）-元素的CSS选择器

例子： json{ “name”：“剧作家”， “论点”：{ “选择器”：“按钮#提交” } } 3.剧作家 填写输入字段 参数：

选择器（字符串）-输入的CSS选择器 value（string）-要填充的值

例子： json{ “name”：“playwritt_fill”， “论点”：{ “选择器”：“#用户名”， "value": "测试用户" } } 4.剧作家_编剧 截图 参数：

path（string）-保存屏幕截图的文件路径

例子： json{ “name”：“剧作家_编剧”， “论点”：{ “path”：“./screshot.png” } } 5.剧作家_get_text 从元素获取文本内容 参数：

selector（string）-元素的CSS选择器

例子： json{ “name”：“剧作家_get_text”， “论点”：{ “选择器”：“h1” } } 📡 MCP协议 服务器实现了模型上下文协议（MCP）版本1.0.0。 支持的方法 初始化 初始化MCP会话 请求： json{ “jsonrpc”：“2.0”， “id”：1， “方法”：“初始化”， “参数”：{ “协议版本”：“1.0.0”， “客户端信息”：{ “name”：“客户端名称”， “版本”：“1.0.0” } } } 答复： json{ “jsonrpc”：“2.0”， “id”：1， “结果”：{ “协议版本”：“1.0.0”， “服务器信息”：{ “name”：“剧作家自动化服务器”， “版本”：“1.0.0” }, “能力”：{ “工具”：｛｝ } } } 工具/列表 列出可用工具 请求： json{ “jsonrpc”：“2.0”， “id”：2， “方法”：“工具/列表” } 答复： json{ “jsonrpc”：“2.0”， “id”：2， “结果”：{ “工具”：[ { “name”：“剧作家导航”， “description”：“导航到URL”， “输入模式”： { “类型”：“对象”， “属性”：{ “url”：{ “type”：“string”， “description”：“要导航到的URL” } }, “必需”：[“url”] } } // ...更多工具 ] } } 工具/调用 执行工具 请求： json{ “jsonrpc”：“2.0”， “id”：3， “方法”：“工具/调用”， “参数”：{ “name”：“剧作家导航”， “论点”：{ “url”：“https://example.com" } } } 答复： json{ “jsonrpc”：“2.0”， “id”：3， “结果”：{ “内容”：[ { “类型”：“文本”， “text”：“{”状态“：”成功“，”url“：”https://example.com"}" } ] } } 🔌 VS代码集成 要将此服务器与VS Code LLM扩展一起使用，请执行以下操作：

  1. 创建配置文件 对于克莱恩/克劳德·德夫： 路径：~/.config/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json json{ “mcpServers”：{ “剧作家自动化”：{ “command”：“node”， “args”：[ “/aolute/path/to/mcp-server/src/server-stdio.js” ] } } } 对于Continue.dev： 路径：~/.scontinue/config.json json{ “mcpServers”：[ { “name”：“剧作家自动化”， “command”：“node”， “args”：[ “/aolute/path/to/mcp-server/src/server-stdio.js” ] } ] }
  2. 重新启动VS代码
  3. 测试连接 在VS Code聊天中，尝试： @剧作家自动化导航到example.com 📊 日志记录 所有操作均以JSON格式记录： json{ “级别”：“信息”， “context”：“剧作家服务”， “消息”：“导航到URL”， “数据”：{ “url”：“https://example.com" }, “时间戳”：“2025-11-27T19:12:25.207Z” } 日志级别

DEBUG-详细的调试信息 INFO-一般信息消息 警告-警告信息 错误-带有堆栈跟踪的错误消息

🧪 测试 与客户进行手动测试 bash#终端1：启动服务器 npm启动

终端2：运行客户端（在客户端目录中）

cd。./客户端 npm启动 使用curl（WebSocket）进行测试 bash#安装wscat npm安装-g wscat

连接到服务器

wscat-c ws://localhost:8080

发送初始化请求

｛“jsonrpc”：“2.0”，“id”：1，“method”：“initialize”，“params”：｛“protocolVersion”：“1.0.0”｝ 🐛 故障排除 浏览器安装问题 bash#清除Playwright缓存 npx剧作家卸载--全部

重新安装浏览器

npx剧作家安装铬 端口已在使用中 bash#在config.js中更改端口或使用环境变量 MCP_SERVER_PORT=8081 npm启动 权限错误（Windows） 以管理员身份运行终端： 巴什尼克斯剧作家装置 未找到浏览器 确保浏览器已安装： bashnpx剧作家装置——用deps铬 连接被拒绝 检查服务器是否正在运行： bashnetstat-一个|grep8080 🔒 安全考虑 ⚠️ 重要提示：此服务器只能在受信任的环境中使用。

未经身份验证，不得暴露在公共互联网上 验证生产中的所有用户输入 对生产使用实施限速 在生产环境中使用HTTPS/WSS 清理屏幕截图的文件路径 考虑实施身份验证令牌

📈 性能提示

使用无头模式以获得更好的性能：

javascript headless：true//在config.js中

减少生产中的慢动作：

javascript-slowMo:0//在config.js中

根据您的网络调整超时：

javascript默认超时：15000//在config.js中

不需要时关闭浏览器：

javascript等待剧作家Service.close（）； 🚀 高级用法 自定义工具添加 添加到src/services/MCPProtocolService.js： javascript{ name:'剧作家定制操作'， description:'您的自定义操作'， 输入方案： { 类型：“对象”， 属性：{ 参数：｛类型：“string”｝ }, 必填项：['param] } } 在src/services/PlaywrightService.js中实现： javascriptasync自定义操作（参数）{ //您的实施 return{状态：'成功'，结果：'数据'}； } 多个浏览器上下文 javascript//在PlaywrightService.js中 异步创建新上下文）{ const newContext=等待这个.browser.newContext（）； const newPage=等待newContext.newPage（）； return{context:newContext，page:newPage}； } 📚 额外资源

剧作家文档 MCP协议规范 WebSocket协议 JSON-RPC 2.0规范

🤝 贡献

复刻仓库 创建要素分支 进行更改 彻底测试 提交拉取请求

相关 MCP