Playwright MCP 服务器 🎭
Playwright MCP 服务器是一个 Model Context Protocol (MCP) 服务器,它利用 Playwright 提供了强大的浏览器自动化能力。通过这个服务器,大型语言模型 (LLMs) 能够与网页进行交互,执行诸如截取屏幕截图、生成测试代码、进行网页抓取以及在真实的浏览器环境中执行 JavaScript 等操作。
功能亮点
- 浏览器交互: 使 LLMs 能够像用户一样在网页上进行操作。
- 屏幕截图: 捕获网页的当前视图。
- 代码生成: 帮助生成与网页自动化相关的测试或操作代码。
- 网页抓取: 提取网页内容和数据。
- JavaScript 执行: 在浏览器沙箱中运行指定的 JavaScript 代码。
- 真实环境: 所有操作都在真实的浏览器实例中进行,确保准确性。
(这里可以添加截图的说明,尽管文本中没有提供截图本身)
文档和API参考
项目提供了详细的文档和API参考供开发者查阅,以便更好地理解和使用该服务器的功能。
安装
你可以通过以下几种方式安装 Playwright MCP 服务器:
- 使用 npm:
bash
npm install -g @executeautomation/playwright-mcp-server - 使用 mcp-get:
bash
npx @michaellatman/mcp-get@latest install @executeautomation/playwright-mcp-server - 使用 Smithery:
为了自动安装 Playwright MCP 以便在 Claude Desktop 中使用 Smithery,运行以下命令:
bash
npx @smithery/cli install @executeautomation/playwright-mcp-server --client claude
在 VS Code 中安装
可以在 VS Code 中方便地安装 Playwright MCP 服务器。
- 使用 VS Code CLI:
- 对于标准版 VS Code:
bash
code --add-mcp '{"name":"playwright","command":"npx","args":["@executeautomation/playwright-mcp-server"]}' - 对于 VS Code Insiders 版:
bash
code-insiders --add-mcp '{"name":"playwright","command":"npx","args":["@executeautomation/playwright-mcp-server"]}'
- 对于标准版 VS Code:
安装完成后,ExecuteAutomation Playwright MCP 服务器将可在 VS Code 中与您的 GitHub Copilot agent 一起使用。
配置以使用 Playwright 服务器
以下是一个针对 Claude Desktop 的配置示例,用于指定如何使用 Playwright 服务器:
json
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"-y",
"@executeautomation/playwright-mcp-server"
]
}
}
}
此配置指定了一个名为 playwright
的 MCP 服务器,并定义了启动它的命令和参数。
测试
该项目使用 Jest 进行测试。测试文件位于 src/__tests__
目录。
运行测试的方式:
- 使用自定义脚本(带覆盖率):
bash
node run-tests.cjs - 使用 npm 脚本:
bash
npm test - 运行测试(不带覆盖率):
bash
npm run test:coverage - 运行测试(带覆盖率):
bash
npm run test:custom
测试覆盖率报告将生成在coverage
目录中。
运行评估测试 (evals)
evals
包加载一个 mcp 客户端,然后运行 index.ts
文件,因此在运行评估测试之间无需重新构建项目。可以通过在 npx 命令前加上环境变量来加载它们。更多详细文档可在此处找到。
示例命令(使用 OPENAI_API_KEY):bash
OPENAI_API_KEY=your-key npx mcp-eval src/evals/evals.ts src/tools/codegen/index.ts
特别感谢
特别感谢 Warp,这款面向开发者的 AI 终端,它支持 MacOS、Linux 和 Windows。