mcpField
P
playwright-mcp-dev

playwright-mcp-dev

github.com/microsoft开发98.8k313 次安装今天更新
代码仓库

关于 playwright-mcp-dev

面向 Playwright 贡献者的仓库技能，说明如何扩展 MCP 工具和 CLI，并涵盖实现、注册、配置、测试与 lint 流程。

主要功能

  1. 01MCP 工具实现步骤
  2. 02CLI 命令开发指引
  3. 03配置更新说明
  4. 04测试与 lint 命令

适用场景

  1. 01添加 Playwright MCP 工具
  2. 02扩展 Playwright CLI
  3. 03修改 MCP 或 CLI 选项

MCP 相关

介绍在 Playwright 中添加和注册 MCP 工具的流程，包括能力配置与测试。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/microsoft/playwright --skill playwright-mcp-dev

安装后在 Claude Code 中输入/playwright-mcp-dev确认已加载。

详细介绍

MCP

添加 MCP 工具

  • 在 packages/playwright/src/mcp/browser/tools/your-tool.ts 中创建新工具
  • 在 packages/playwright/src/mcp/browser/tools.ts 中注册该工具
  • 在 packages/playwright/src/mcp/config.d.ts 中添加 ToolCapability
  • 在 tests/mcp/mcp-<category>.spec.ts 中放置新测试

构建

  • 假设 watch 始终在运行，运行 lint 查看类型错误

测试

  • 运行测试：npm run ctest-mcp <category>
  • 不要运行 test --debug

CLI

添加命令

  • CLI 命令基于 MCP 工具。如果需要，请按照上文“添加 MCP 工具”部分实现相应的 MCP 工具。
  • 如有需要，为工具添加新的 CLI 类别：
    • 在 packages/playwright/src/mcp/terminal/command.ts 中添加 Category
    • 更新文档生成器 packages/playwright/src/mcp/terminal/helpGenerator.ts
  • 在 packages/playwright/src/mcp/terminal/commands.ts 中注册命令
  • 更新 packages/playwright/src/skill/SKILL.md 中的 skill 文件，并根据需要更新 packages/playwright/src/skill/references/ 中的参考文件
  • 在 tests/mcp/cli-<category>.spec.ts 中放置新测试

添加 CLI 选项或配置选项

需要向配置中添加内容时，请执行以下操作。

  • packages/playwright/src/mcp/program.ts
    • 添加 CLI 选项和文档
  • packages/playwright/src/mcp/config.d.ts
    • 添加并说明该选项
  • packages/playwright/src/mcp/config.ts
    • 如有需要，修改 FullConfig
    • 如有需要，修改 CLIOptions
    • 将其添加到 configFromEnv

构建

  • 假设 watch 始终在运行，运行 lint 查看类型错误

测试

  • 运行测试：npm run ctest-mcp cli-<category>
  • 不要运行 test --debug

Lint

  • 提交前运行 npm run flint 检查所有内容

SKILL 文件

skill 文件位于 packages/playwright/src/skill/SKILL.md。其中包含所有可用 CLI 命令和 MCP 工具的文档。添加新命令或工具时，请更新此文件。 你可以随时运行 "npm run playwright-cli -- --help" 查看最新的可用命令，并据此更新 skill 文件。

评论

支持 Markdown