AI导哈

单页应用浏览器自动化工具

基于Playwright的MCP服务器，专为现代单页应用设计，支持持久会话、React/Vue/Angular框架检测、143+设备模拟和智能DOM等待功能。

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

使用说明

🎭 剧作家SPA MCP

Playwright MCP服务器专为现代web应用程序构建——持久会话、React/Vue/Angular支持、143多个设备和智能DOM等待。

安装 · 为什么 · 工具 · 示例 · 局限性

概述

一 主控程序 驱动真正Chromium浏览器的服务器，专为单页应用程序构建。您的助手可以登录、单击、键入和截图，SPA的状态在通话中仍然有效：

你： 登录app.example.com，打开仪表板并截图。

助理： （电话 spa_session_start那么 spa_chain [类型现实→ 点击→ 等待空闲]，然后 spa_screenshot) 登录并捕获仪表板——在整个会话中保留React状态。

为什么是这个服务器？

专题 剧作家spa mcp 其他剧作家mcp
持续会话 ✅ ❌
React/Vue/角度检测 ✅ ❌
智能DOM空闲等待 ✅ ❌
真实打字 ✅ ❌
设备仿真 143+ 有限
动作链 ✅ ❌
带有浏览器Cookie的HTTP ✅ ❌

安装

# One command — no clone needed
claude mcp add playwright-spa -- npx -y github:manganate006/playwright-spa-mcp

# Install the Chromium browser Playwright drives
npx playwright install chromium

Claude 桌面版 (claude_desktop_config.json):

{
  "mcpServers": {
    "playwright-spa": {
      "command": "npx",
      "args": ["-y", "github:manganate006/playwright-spa-mcp"]
    }
  }
}
Alternative: clone & install locally 
git clone https://github.com/manganate006/playwright-spa-mcp.git
cd playwright-spa-mcp
npm install
npx playwright install chromium
claude mcp add playwright-spa -- node $(pwd)/src/index.js

工具

22个工具， spa_ 前缀。链式操作列表、143+设备快捷方式和CLI使用情况： docs/ADVANCED.md.

组 工具
📸 屏幕截图和导航 spa_screenshot, spa_navigate, spa_go_back, spa_go_forward, spa_wait_idle
📝 互动 spa_click, spa_fill, spa_type_realistic, spa_upload, spa_drag
⛓️ 链条 spa_chain （在一次调用中运行多个操作）
🔐 会议 spa_session_start, spa_session_end, spa_session_list
🔎 检查 spa_get_text, spa_assert, spa_evaluate, spa_http_request
🖼️ iframe spa_iframe_click, spa_iframe_fill
ℹ️ 发现 spa_list_devices, spa_list_actions

示例

登录React应用程序并保持会话 --现实主义打字激发了React的 onChange:

spa_session_start({ session: "myapp" })

spa_chain({
  session: "myapp",
  url: "https://app.example.com/login",
  spaMode: "react",
  chain: [
    { action: "type-realistic", selector: "#email", value: "user@example.com" },
    { action: "type-realistic", selector: "#password", value: "secret123" },
    { action: "click", selector: "button[type=submit]" },
    { action: "wait-for-idle" },
    { action: "screenshot" }
  ]
})

// Same session — React state is preserved
spa_click({ session: "myapp", selector: ".dashboard-item" })

移动设备仿真：

spa_screenshot({ url: "https://example.com", device: "iPhone 15 Pro", fullPage: true })

已通过身份验证的API调用重用会话Cookie：

spa_http_request({ session: "myapp", url: "https://api.example.com/user/profile", method: "GET" })

局限性

  • 仅铬 --Firefox/WebKit未连接；需要 npx playwright install chromium
  • 本地浏览器 --生成一个真正的浏览器进程；不适合没有沙盒的沙盒
  • SPA启发式 --React/Vue/Angular就绪性是启发式检测的(spaMode: "auto")；繁重的自定义框架可能需要显式 wait-for / wait-for-idle
  • 会话在内存中 --它们与服务器进程共存，不会在重启后持续存在

SPA框架支持

检测并正确等待 反应 （完成渲染，适当 onChange), Vue （v-model绑定）和 Angular （Zone.js稳定性）。使用 spaMode: "auto" 自动检测。细节在 docs/ADVANCED.md.

使用此MCP构建

项目 描述
atp.mangi.fr 🎾 自1968年以来的ATP网球统计数据
piscinade.com 🏊 在法国寻找泳池派对

许可证

麻省理工学院 ©锰酸盐006

相关 MCP