playwright-mcp

用于 MCP (模型上下文协议) 的 Playwright 封装器。此服务器使 LLM 驱动的客户端能够控制浏览器以执行自动化任务。

组件

资源

该服务器公开了用于访问浏览器屏幕截图的资源：

• 屏幕截图资源 URI：screenshot://{page_id}
• 屏幕截图资源自动适用于所有打开的页面

提示

该服务器提供了一个提示，以帮助客户端解释网页：

• interpret-page: 分析当前网页的内容和结构
  • 可选的 page_id 参数用于选择要解释的页面
  • 可选的 focus 参数用于关注特定方面（完整、表单、导航、文本）
  • 返回文本分析和页面屏幕截图

工具

该服务器实现了一套全面的浏览器自动化工具：

• 浏览器导航

  • navigate: 转到特定 URL
  • new_page: 创建具有特定 ID 的新浏览器页面
  • switch_page: 切换到不同的浏览器页面
  • get_pages: 列出所有可用的浏览器页面

• 页面交互

  • click: 使用 CSS 选择器单击元素
  • type: 将文本键入输入元素
  • wait_for_selector: 等待元素出现在页面上

• 内容提取

  • get_text: 从元素获取文本内容
  • get_page_content: 获取整个页面 HTML
  • take_screenshot: 捕获页面或元素的视觉状态

配置

安装依赖

uv add playwright
playwright install chromium

快速开始

安装

Claude Desktop

在 MacOS 上：~/Library/Application\ Support/Claude/claude_desktop_config.json 在 Windows 上：%APPDATA%/Claude/claude_desktop_config.json

<details> <summary>开发/未发布的服务器配置</summary>

"mcpServers": {
  "playwright-mcp": {
    "command": "uv",
    "args": [
      "--directory",
      "/Users/shannon/Workspace/artivus/playwright-mcp",
      "run",
      "playwright-mcp"
    ]
  }
}

</details>

<details> <summary>已发布的服务器配置</summary>

"mcpServers": {
  "playwright-mcp": {
    "command": "uvx",
    "args": [
      "playwright-mcp"
    ]
  }
}

</details>

开发

构建和发布

要准备用于分发的软件包：

1. 同步依赖项并更新锁定文件：

uv sync

2. 构建软件包分发：

uv build

这将在 dist/ 目录中创建源和 wheel 分发。

3. 发布到 PyPI：

uv publish

注意：您需要通过环境变量或命令标志设置 PyPI 凭据：

• Token: --token 或 UV_PUBLISH_TOKEN
• 或用户名/密码：--username/UV_PUBLISH_USERNAME 和 --password/UV_PUBLISH_PASSWORD

调试

由于 MCP 服务器通过 stdio 运行，因此调试可能具有挑战性。 为了获得最佳调试体验，我们强烈建议使用 MCP Inspector。

您可以通过 npm 使用以下命令启动 MCP Inspector：

npx @modelcontextprotocol/inspector uv --directory /Users/shannon/Workspace/artivus/playwright-mcp run playwright-mcp

启动后，Inspector 将显示一个 URL，您可以在浏览器中访问该 URL 以开始调试。