MseeP.ai 安全评估	特别感谢 扭曲, 开发者的 AI 终端

Playwright MCP 服务器 QQ

一个模型背景协议服务器,使用Playwright提供浏览器自动化能力. 这个服务器可以使LLMs与网页交互,取出截图,生成测试代码,网页刮取页面,并在真实的浏览器环境中执行JavaScript.

v1.0.10中的新内容

XQ设备模拟 143个真实设备预设!

测试您的网络应用程序 真实设备配置 带有简单命令:

// Test on iPhone 13 with automatic user-agent, touch support, and device pixel ratio
await playwright_resize({ device: "iPhone 13" });

// Switch to iPad with landscape orientation
await playwright_resize({ device: "iPad Pro 11", orientation: "landscape" });

// Test desktop view
await playwright_resize({ device: "Desktop Chrome" });

人工智能助理的自然语言支持:

• "iPhone 13测试"
• 切换到 iPad 视图
• "转入地貌"

支持143个设备: iPhone, iPad, Pixel, Galaxy, 和桌面浏览器, 适当模拟了取景口, 用户代理, 触摸事件, 以及设备像素比例 .

📚 查看设备快速引用 | 提示指南

截图

文档 | API 参考

安装

您可以使用 npm 、 mcp- get 或 Smithery 安装软件包 :

使用 npm :

npm install -g @executeautomation/playwright-mcp-server

使用 mcp- get :

npx @michaellatman/mcp-get@latest install @executeautomation/playwright-mcp-server

使用闪烁

为克洛德桌面自动安装 Playwright MCP 史密斯术数字 :

npx @smithery/cli install @executeautomation/playwright-mcp-server --client claude

使用 Claude 代码 :

claude mcp add --transport stdio playwright npx @executeautomation/playwright-mcp-server

在 VS 代码中安装

在 VS 代码中安装 Playwright MCP 服务器 :

或者,您可以使用 VS 代码 CLI 安装 Playwright MCP 服务器 :

# For VS Code
code --add-mcp '{"name":"playwright","command":"npx","args":["@executeautomation/playwright-mcp-server"]}'

# For VS Code Insiders
code-insiders --add-mcp '{"name":"playwright","command":"npx","args":["@executeautomation/playwright-mcp-server"]}'

在安装后, Execute Automation Playwright MCP 服务器将可用您的 GitHub 副驾驶代理在 VS 代码中使用 .

浏览器安装

自动安装( 建议)

Playwright MCP 服务器 自动安装浏览器二进制 当你第一次使用它。 当服务器发现浏览器缺失时,它将:

1. 自动下载并安装所需的浏览器( Chromium, Firefox, 或 WebKit)
2. 在控制台中显示安装进度
3. 安装完成后重试您的请求

不需要手动设置! 刚刚开始使用服务器,它处理您的浏览器安装.

手动安装( 可选)

如果您喜欢手动安装浏览器或遇到任何自动安装的问题:

# Install all browsers
npx playwright install

# Or install specific browsers
npx playwright install chromium
npx playwright install firefox
npx playwright install webkit

浏览器存储位置

浏览器安装到:

• 窗口 : %USERPROFILE%\AppData\Local\ms-playwright
• 马可斯: ~/Library/Caches/ms-playwright
• 林纳: ~/.cache/ms-playwright

要使用 Playwright 服务器的配置

标准模式( stdio)

这是 claude 桌面推荐模式。 。 。 .

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@executeautomation/playwright-mcp-server"]
    }
  }
}

说明: 在stdio模式下,日志会自动被引导到只有文件(而不是控制台)来维护干净的JSON-RPC通信. 日志写入 ~/playwright-mcp-server.log。 。 。 .

HTTP 模式( 自动服务器)

在不显示或从IDes的工人进程运行系统时,您可以将MCP服务器作为独立的HTTP服务器运行:

Claude 桌面用户的说明 : Claude桌面目前需要stdio模式(命令/args配置). 为VS代码,自定义客户端以及远程部署推荐了HTTP模式. 见 CLUDE DESKTOP CONFig.md (英语) 详细情况.

启动 HTTP 服务器

# Using npx
npx @executeautomation/playwright-mcp-server --port 8931

# Or after global installation
playwright-mcp-server --port 8931

服务器将启动并显示可用的端点 :

==============================================
Playwright MCP Server (HTTP Mode)
==============================================
Port: 8931

ENDPOINTS:
- SSE Stream:     GET  http://localhost:8931/sse
- Messages:       POST http://localhost:8931/messages?sessionId=<id>
- MCP (unified):  GET  http://localhost:8931/mcp
- MCP (unified):  POST http://localhost:8931/mcp?sessionId=<id>
- Health Check:   GET  http://localhost:8931/health
==============================================

HTTP 模式的客户端配置

{\FN黑体\FS22\BORD1\SHAD0\3AHBE\4AH00\FSCX67\FSCY66\2CHFFFFFF\3CH808080}你觉得呢 这个 "type": "http" 字段为 需求 hTTP/SSE运输!

VS 代码 GitHub 副驾驶 :

{
  "github.copilot.chat.mcp.servers": {
    "playwright": {
      "url": "http://localhost:8931/mcp",
      "type": "http"
    }
  }
}

自定义 MCP 客户 :

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/mcp",
      "type": "http"
    }
  }
}

重要内容: 无 "type": "http",连接将失败.

对于克洛德桌面: 代之以使用 stdio 模式( 见上文标准模式)

HTTP 模式使用大小写

• 在不显示的系统(如远程服务器)上运行首选项浏览器
• 与 VS 代码 GitHub 合并
• 作为背景服务运行服务器
• 从多个客户端访问服务器
• 与调试 /health 结束点
• 自定义 MCP 客户端集成

监测: 服务器包括一个从动态分配的端口(避免冲突)开始的监测系统. 检查控制台输出到实际端口 .

说明: 对于克洛德桌面,现在继续使用stdio模式(上方标准模式).

解决问题

"没有找到会话的运输工具" Id" 错误

症状 : 400 个错误, 有信件“ 坏请求: 找不到会话的传送 爱德"

解决方案 :

1. 检查配置包含 "type": "http"

   {
     "url": "http://localhost:8931/mcp",
     "type": "http"  // ← This is REQUIRED!
   }
   

2. 验证服务器日志显示连接 :

   # Should see these in order:
   # 1. "Incoming request" - GET /mcp
   # 2. "Transport registered" - with sessionId
   # 3. "POST message received" - with same sessionId
   

3. 重新启动服务器和客户端

连接问题

• 服务器未启动 : 检查是否可用的端口 8931
• 外部访问被屏蔽 : 这是设计(安全)的。 服务器只绑定到本地主机
• 对于远程访问: 使用 SSH 隧道 :

  ssh -L 8931:localhost:8931 user@remote-server
  

测试

这个项目使用Jest进行测试. 测试地点位于 src/__tests__ 目录.

运行测试

您可以使用下列命令之一进行测试:

# Run tests using the custom script (with coverage)
node run-tests.cjs

# Run tests using npm scripts
npm test           # Run tests without coverage
npm run test:coverage  # Run tests with coverage
npm run test:custom    # Run tests with custom script (same as node run-tests.cjs)

测试范围报告将载于 coverage 目录.

运行 evals

Evals包装入一个mcp客户端,然后运行索引.ts文件,因此在测试之间不需要重建. 您可以通过前缀 npx 命令来加载环境变量 。 完整的文档可以找到 这里。 。 。 .

OPENAI_API_KEY=your-key  npx mcp-eval src/evals/evals.ts src/tools/codegen/index.ts

捐款

在添加新工具时,请注意工具名称长度. 有些客户端,如Cursor,对合并服务器和工具名有60个字符限制(server_name:tool_name) (中文(简体) ).

我们的服务器名称是 playwright-mcp。请确保工具名称的短到不超过这个限制.

恒星历史