使用说明

项目简介

Playwright MCP Server 是一个基于 Model Context Protocol (MCP) 构建的服务器,它扩展了大型语言模型(LLM)的能力,使其能够通过 Playwright 操控浏览器。该服务器提供了一系列工具,允许 LLM 客户端执行网页导航、截图、元素点击、内容提取等操作,从而实现更丰富的交互式应用。

主要功能点

  • 资源 (Resources)
    • 虽然代码中资源功能(note 存储系统)未完全实现,但框架已搭建,未来可扩展支持自定义资源的管理和访问。
  • Prompt 模板 (Prompts)
    • 代码中 Prompt 模板功能同样未实现,但在 'README.md' 中提到了 'summarize-notes' Prompt,未来可以扩展 Prompt 模板来定制 LLM 的交互行为。
  • 工具 (Tools)
    • playwright_navigate: 导航到指定 URL。
    • playwright_screenshot: 截取当前页面或指定元素的屏幕截图。
    • playwright_click: 点击页面上的元素。
    • playwright_fill: 填写输入框。
    • playwright_evaluate: 执行 JavaScript 代码。
    • playwright_click_text: 点击包含特定文本内容的元素。
    • playwright_get_text_content: 获取页面上所有可见元素的文本内容。
    • playwright_get_html_content: 获取页面上指定元素的 HTML 内容。

安装步骤

  1. 环境准备:确保已安装 Python 环境。建议使用 Python 3.8 或更高版本。
  2. 下载仓库:克隆 GitHub 仓库 'https://github.com/PatrickAbainza/playwright-plus-python-mcp_my_version' 到本地。
  3. 安装依赖:在仓库根目录下,使用 'uv sync' 命令安装项目依赖。(如果未安装 'uv',请先安装 'uv' 工具)

服务器配置

MCP 服务器需要配置到 MCP 客户端中才能使用。以 Claude Desktop 为例,配置信息通常在 'claude_desktop_config.json' 文件中。以下是配置示例,请根据实际情况修改:

开发/未发布服务器配置

"mcpServers": {
  "playwright-server": {  // 服务器名称,客户端配置中引用此名称
    "command": "uv",      // 启动服务器的命令,这里使用 uv 运行
    "args": [             // 启动参数
      "--directory",      // 指定工作目录
      "C:\\Users\\xxxxx\\Documents\\project\\python\\mcp\\playwright-server", //  <-- 替换为你的仓库本地路径
      "run",              // uv run 命令
      "playwright-server" //  运行的可执行模块名,对应 src/playwright_server/__init__.py 中的 main 函数
    ]
  }
}

发布服务器配置

"mcpServers": {
  "playwright-server": {  // 服务器名称
    "command": "uvx",     // 启动命令,uvx 用于运行已发布的包
    "args": [             // 启动参数
      "playwright-server" //  已发布包的可执行模块名
    ]
  }
}

注意

  • 请将 'C:\Users\xxxxx\Documents\project\python\mcp\playwright-server' 替换为你实际的仓库本地路径。
  • 根据你使用的 MCP 客户端,配置文件路径和格式可能有所不同,请参考 MCP 客户端的文档进行配置。

基本使用方法

  1. 启动服务器:配置完成后,MCP 客户端(如 Claude)会自动尝试启动 Playwright MCP Server。

  2. 在 LLM 中调用工具:在与 LLM 的对话中,你可以指示 LLM 使用 Playwright 提供的工具来操作网页。例如:

    • "请打开 https://www.example.com 并截取整个页面的截图,保存为 example.png。"
    • "点击页面上 'Search' 按钮。"
    • "在输入框中填写 'Playwright' 并提交。"

    LLM 会根据你的指令,调用相应的 Playwright 工具来执行操作,并将结果返回给你。

调试: 如果遇到问题,可以使用 MCP Inspector 工具进行调试,具体方法请参考仓库 'README.md' 中的 "Debugging" 部分。

信息

分类

开发者工具