AI导哈

浏览器自动化工具

通过自然语言控制Playwright进行浏览器自动化测试和交互的工具，适用于AI助手集成和快速原型开发。

  • by Sumit06-09
  • HTML
  • 本地部署
  • 更新于
在 GitHub 查看 Sumit06-09/Playwright_MCP

使用说明

🎭 剧作家MCP自动化

弥合人工智能助手和浏览器自动化之间的差距 --使用模型上下文协议（MCP）直接从自然语言提示中控制剧作家。

🌟 概述

该项目整合 剧作家 随着 模型上下文协议（MCP），使GitHub Copilot、Claude Desktop或Cursor等人工智能工具能够通过简单的对话提示执行浏览器自动化任务。

为什么选择MCP+剧作家？

  • 自然语言控制：描述你想要什么，而不是编写测试代码
  • AI驱动的测试：让AI助手处理浏览器交互
  • 快速原型制作：无需手动编写脚本即可测试想法
  • 柔性自动化：结合基于视觉的点击、PDF生成和断言

✨ 你能做什么

只需询问您的AI助手：

"Open Google and search for Playwright"
"Verify the title contains 'Playwright' and take a screenshot"
"Click the Docs tab and generate a PDF of the page"
"Find the download button using visual recognition and click it"

AI翻译您的请求→ MCP协议→ 浏览器操作→ 结果✨

无需奔跑 npx playwright test 手动！

📁 项目结构

Playwright_MCP/
├── tests/
│   └── mcp-playwright.spec.ts    # Example Playwright test suite
├── scripts/
│   └── run-via-mcp.js             # Manual MCP client (optional)
├── mcp.config.json                # MCP server configuration
├── playwright.config.ts           # Playwright configuration
├── package.json                   # Dependencies
└── README.md                      # This file

🚀 入门指南

先决条件

确保已安装以下内容：

工具 检查版本 所需版本
Node.js node --version v18.0.0或更高版本
npm npm --version 最新稳定
剧作家 npx playwright --version 最新消息

安装

  1. 克隆或导航到项目目录

  2. 安装依赖项

    npm install

  3. 安装Playwright浏览器 （如果尚未安装）

    npx playwright install

⚙️ 配置

MCP服务器设置

MCP配置在 mcp.config.json:

{
  "servers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--caps=vision,pdf,testing,tracing"
      ],
      "env": {}
    }
  }
}

已启用的功能

能力 描述
视觉 使用坐标和OCR进行元素交互
PDF 生成网页的PDF快照
测试 运行断言（可见性、文本内容、值）
追踪 收集调试跟踪以进行故障排除

🎯 用法

方法1：人工智能助手集成（推荐）

  1. 启动MCP服务器 在终端中：

    npx @playwright/mcp@latest --caps=vision,pdf,testing,tracing --output-dir=playwright-mcp-output

    您应该看到：

    Listening on http://localhost:8931

    ⚠️ 保持此终端运行 --MCP服务器必须保持活动状态

  2. 打开你的AI工具 （Claude Desktop、Cursor、GitHub Copilot等）

  3. 发出自然语言命令:

    "Open google.com, search 'Playwright', verify results appear, and take a screenshot"

  4. 看魔术发生 --AI将：

    • 连接到您的MCP服务器
    • 控制浏览器
    • 执行自动化
    • 返回结果/截图

方法2：手动MCP客户端（测试）

如果你想在没有人工智能助手的情况下测试MCP功能：

node scripts/run-via-mcp.js

此脚本将：

  • 通过MCP启动浏览器
  • 导航到谷歌
  • 搜索“剧作家”
  • 在本地保存屏幕截图

方法3：传统剧作家测试

运行Playwright测试的标准方式（无MCP）：

npx playwright test tests/mcp-playwright.spec.ts

📦 输出和工件

所有生成的文件都保存到：

playwright-mcp-output/

示例工件：

  • google-playwright-search.png --屏幕截图
  • page.pdf --PDF导出
  • trace.zip --剧作家跟踪文件

🔧 故障排除

问题 解决方案
Error: spawn npx ENOENT 确保MCP服务器在单独的终端中运行
Server disconnected 重新启动MCP服务器终端窗口
Browser not launching 快跑 npx playwright install 安装浏览器二进制文件
Port 8931 already in use 终止现有的MCP进程或更改端口
Vision capabilities not working 确保 --caps=vision 包含在服务器参数中

调试模式

运行带有详细日志记录的MCP服务器：

DEBUG=* npx @playwright/mcp@latest --caps=vision,pdf,testing,tracing

🎯 路线图和未来增强功能

  • []通过MCP自动化复杂的登录流程
  • []高级基于光标的交互
  • []文件下载验证
  • []跟踪AI助手的日志流
  • []支持多浏览器（Chromium、Firefox、WebKit）
  • []CI/CD管道集成

🤝 贡献

欢迎投稿！请随意：

  • 报告错误
  • 建议新功能
  • 提交拉取请求

📄 许可证

该项目根据MIT许可证获得许可。

🔗 资源

内置于❤️ 使用剧作家和MCP

相关 MCP