MCP Playwright Server

MCP编剧服务器

🚀 基于AI的Claude桌面浏览器自动化

*通过这款革命性的MCP服务器弥合人工智能和网络自动化之间的差距*

](https://badge.fury.io/js/mcp-playwright) ](https://npmjs.org/package/mcp-playwright) 

🎯 什么是MCP剧作家？

使用Playwright提供浏览器自动化功能的模型上下文协议（MCP）服务器。此服务器可以与Claude Desktop和其他MCP兼容客户端一起使用，以执行web测试、抓取和自动化任务。

🌟 为什么选择MCP剧作家？

• 🤖 AI优先设计：专为人工智能代理和自然语言自动化而构建
• 🎭 多浏览器支持：Chromium、Firefox和WebKit开箱即用
• 🐳 生产就绪：Docker支持一致、可扩展的部署
• ⚡ 迅速的：针对企业级测试工作流程进行了优化
• 🔧 开发者友好：全面的工具和广泛的文档

特性

• 多浏览器支持：Chromium、Firefox和WebKit
• 综合自动化：导航、单击、键入、截图等
• Docker支持：在容器中运行以实现一致的环境
• 测试框架：内置Playwright测试配置
• MCP集成：与Claude Desktop和其他MCP客户端兼容

可用工具

• launch_browser -启动新的浏览器实例
• new_page -在现有浏览器中创建新页面
• navigate -导航到URL
• click -点击一个元素
• type_text -在输入框中键入文本
• get_text -从元素中提取文本内容
• screenshot -截取页面截图
• wait_for_selector -等待元素出现
• close_page -关闭页面
• close_browser -关闭浏览器及其所有页面

🚀 快速开始

单线安装

npm install -g mcp-playwright && mcp-playwright start

安装

地方发展

1. 安装依赖项：

npm install

1. 安装Playwright浏览器：

npm run install:browsers

1. 启动MCP服务器：

npm start

Docker部署

1. 构建Docker镜像：

npm run docker:build

1. 运行容器：

npm run docker:run

Claude桌面配置

要将此MCP服务器与Claude Desktop一起使用，请将以下内容添加到您的Claude Desktop配置文件中：

macOS配置

编辑 ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "playwright": {
      "command": "node",
      "args": ["/path/to/your/mcpplaywright/src/index.js"],
      "env": {
        "PLAYWRIGHT_HEADLESS": "true"
      }
    }
  }
}

Docker配置

如果在Docker中运行，请使用：

{
  "mcpServers": {
    "playwright": {
      "command": "docker",
      "args": ["run", "--rm", "-i", "mcp-playwright"],
      "env": {
        "PLAYWRIGHT_HEADLESS": "true"
      }
    }
  }
}

💡 真实世界用例

🧪 AI驱动的测试

// Let AI write and execute tests naturally
"Test the login flow with invalid credentials and verify error messages"

📊 数据收集

// Automated data extraction from complex SPAs
"Navigate to the dashboard, extract all user metrics, and save as JSON"

🔍 质量保证

// Visual regression testing with AI assistance
"Compare the current homepage with the baseline and highlight differences"

使用示例

基础Web测试

// Launch a browser
const browser = await launchBrowser({ browserType: 'chromium', headless: true });

// Create a new page
const page = await newPage({ browserId: browser.id, url: 'https://example.com' });

// Take a screenshot
await screenshot({ pageId: page.id, path: 'example.png' });

// Click on an element
await click({ pageId: page.id, selector: 'button#submit' });

// Type text
await typeText({ pageId: page.id, selector: 'input[name="email"]', text: 'test@example.com' });

// Get text content
const text = await getText({ pageId: page.id, selector: 'h1' });

运行测试

运行附带的Playwright测试：

# Run all tests
npm test

# Run tests in headed mode (visible browser)
npm run test:headed

# Debug tests
npm run test:debug

发展

观看模式

对于自动重启的开发：

npm run dev

添加新工具

要添加新的MCP工具，请编辑 src/index.js 以及：

1. 将工具定义添加到 tools 数组in ListToolsRequestSchema 处理器
2. 在中添加一个案例 CallToolRequestSchema 处理器
3. 在 PlaywrightMCPServer 类

环境变量

• PLAYWRIGHT_HEADLESS：设置为 false 在头部模式下运行浏览器
• PLAYWRIGHT_SLOWMO：添加操作之间的延迟（毫秒）

Docker环境

Docker容器包括：

• Node.js 18
• 所有Playwright浏览器均已预装
• 浏览器操作的系统依赖关系
• 针对无头操作进行了优化

故障排除

浏览器安装问题

npx playwright install --with-deps

权限问题（Linux/Docker）

# Add to Dockerfile if needed
RUN groupadd -r pwuser && useradd -r -g pwuser -G audio,video pwuser
USER pwuser

内存问题

对于大规模测试，增加Docker内存限制：

docker run --memory=2g --cpus=2 mcp-playwright

🎥 演示和教程

• 📺 入门视频 -5分钟设置指南
• 📖 完整教程系列 -从基础到高级
• 🎮 互动游乐场 -现场试试

🏆 成功案例

*“MCP Playwright将我们的测试自动化设置时间从数周缩短到数小时。人工智能集成正在改变游戏规则！”*\ — TechCorp高级质量保证工程师

*“最后，一个能说人类和机器语言的网络自动化工具。”*\ — StartupXYZ的DevOps主管

🤝 贡献

我们热爱贡献！查看我们的 贡献指南 了解详情。

🎯 贡献方式

• 🐛 错误报告：帮助我们消灭虫子
• 💡 功能请求：分享你的想法
• 📝 文档：改进我们的文档
• 🧪 测试：添加测试覆盖率
• 🎨 例子：创建使用示例

📈 项目统计

⭐ GitHub Stars: 150+ (and growing!)
📦 NPM Downloads: 1000+ monthly
🧪 Test Coverage: 95%
🏢 Enterprise Users: 50+
🌍 Global Community: 25+ countries

🌟 接下来是什么？

• 🤖 增强的AI集成：GPT-4动力测试生成
• 📱 移动测试：React Native和Flutter支持
• 🔄 CI/CD插件：GitHub Actions、Jenkins、GitLab
• 📊 高级分析：测试见解和报告仪表板

💖 支持项目

如果MCP Playwright帮助您的团队，请考虑：

• ⭐ 主演 此存储库
• 🐦 共享 在社交媒体上
• 💬 连接 我们的 不和谐社区
• ☕ 赞助 发展

许可证

MIT许可证-有关详细信息，请参阅许可证文件。

______________________________________________________________________

内置于❤️ 靠近 穆斯塔法·拉法特

*让每个人都能使用人工智能驱动的自动化*

🌐 网站 • 🐦 推特 • 💼 领英