playwright-mcp

Playwright 的 MCP（Model Context Protocol）封装。该服务器使由 LLM（大语言模型）驱动的客户端能够控制浏览器以执行自动化任务。

组件

资源

服务器提供了访问浏览器截图的资源：

• 截图资源 URI: screenshot://{page_id}
• 所有打开的页面都会自动提供截图资源

提示

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

• interpret-page: 分析当前网页的内容和结构
  • 可选参数 page_id 用于选择要解释的页面
  • 可选参数 focus 用于关注特定方面（full, forms, navigation, text）
  • 返回文本分析结果和页面截图

工具

服务器实现了一整套浏览器自动化工具：

• 浏览器导航

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

• 页面交互

  • click: 使用 CSS 选择器点击元素
  • type: 在输入框中输入文本
  • wait_for_selector: 等待页面上出现某个元素

• 内容提取

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

配置

安装依赖

bash 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>

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

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

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

</details>

开发

构建和发布

为分发准备包：

1. 同步依赖并更新锁文件： bash uv sync

2. 构建包分发： bash uv build

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

1. 发布到 PyPI： bash uv publish

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

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

调试

由于 MCP 服务器通过 stdio 运行，调试可能会比较困难。为了获得最佳调试体验，我们强烈建议使用 MCP Inspector。

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

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

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