mcpp-e2e

AI 助手使用 Playwright 进行浏览器自动化测试的 MCP Server。

安装

npm install mcpp-e2e

配置

在 MCP 配置文件中添加：

{
  "mcpServers": {
    "e2e": {
      "command": "npx",
      "args": ["-y", "mcpp-e2e@latest"],
      "env": {
        "MCP_ACCESS_KEY": "your-access-key",
        "HEADLESS": "true",
        "BROWSER": "chromium",
        "TIMEOUT": "30000"
      }
    }
  }
}

环境变量

| 变量 | 说明 | 默认值 | |------|------|--------| | MCP_ACCESS_KEY | 访问密钥 (必填) | - | | HEADLESS | 无头模式 | true | | BROWSER | 浏览器类型 (chromium/firefox/webkit) | chromium | | TIMEOUT | 超时时间(ms) | 30000 | | VIEWPORT_WIDTH | 视口宽度 | 1280 | | VIEWPORT_HEIGHT | 视口高度 | 720 |

工具列表

页面导航

| 工具 | 参数 | 功能 | |------|------|------| | open_page | url | 打开网页 | | get_url | - | 获取当前 URL | | get_title | - | 获取页面标题 | | close | - | 关闭浏览器 |

元素操作

| 工具 | 参数 | 功能 | |------|------|------| | click | selector | 点击元素 | | fill | selector, value | 填写输入框 | | select | selector, value | 选择下拉框 | | press | key | 按下键盘按键 |

元素查询

| 工具 | 参数 | 功能 | |------|------|------| | get_text | selector | 获取元素文字 | | get_attribute | selector, attr | 获取元素属性 | | get_html | selector? | 获取 HTML 内容 |

截图

| 工具 | 参数 | 功能 | |------|------|------| | screenshot | - | 页面截图 (base64) | | get_element_screenshot | selector | 元素截图 (base64) |

等待

| 工具 | 参数 | 功能 | |------|------|------| | wait | ms | 等待毫秒 | | wait_for | selector, timeout? | 等待元素出现 |

存储

| 工具 | 参数 | 功能 | |------|------|------| | set_storage | key, value | 设置 localStorage | | get_storage | key | 获取 localStorage | | set_cookie | name, value, domain? | 设置 Cookie |

认证

| 工具 | 参数 | 功能 | |------|------|------| | login | url, username, password, token_key?, storage_key? | 调用登录 API 并注入 token |

高级

| 工具 | 参数 | 功能 | |------|------|------| | evaluate | script | 执行 JavaScript |

使用示例

基本流程

1. open_page("https://example.com")
2. fill("#username", "admin")
3. fill("#password", "123456")
4. click("text=登录")
5. wait_for(".dashboard")
6. screenshot()

跳过登录 (注入 token)

1. open_page("https://example.com")
2. set_storage("token", "your-jwt-token")
3. open_page("https://example.com/dashboard")

API 登录

1. open_page("https://example.com")
2. login("https://api.example.com/login", "admin", "123456", "data.token", "token")
3. open_page("https://example.com/dashboard")

验证码处理

1. 使用 get_element_screenshot 截取验证码图片
2. 使用 login 工具调用 API 登录（适用于无验证码的 API）
3. 使用 set_storage 直接注入 token 跳过登录
4. 测试环境配置万能验证码

License

MIT