MCP Server Playwright 使用说明

项目简介

MCP Server Playwright 是一个基于 Model Context Protocol (MCP) 构建的服务器，它利用 Playwright 库提供强大的浏览器自动化功能。该服务器允许大型语言模型 (LLM) 通过标准化的 MCP 协议与网页进行交互，从而扩展 LLM 在 Web 环境中的应用能力。

主要功能点

网页导航: LLM 可以控制浏览器访问指定的 URL。
元素交互: 支持点击、悬停、填写表单、选择下拉框等多种网页元素交互操作。
截图功能: 可以捕获整个网页或特定元素的屏幕截图。
JavaScript 执行: 允许 LLM 在浏览器环境中执行 JavaScript 代码，获取动态信息或进行更复杂的网页操作。
控制台日志: 实时监控并获取浏览器控制台输出信息。
资源管理: 将控制台日志和屏幕截图作为资源进行管理和访问。

安装步骤

安装 Node.js 和 npm: 确保你的系统已安装 Node.js 和 npm (Node.js 包管理器)。
使用 npm 安装 MCP Server Playwright: 打开终端或命令提示符，运行以下命令安装软件包：
```
npx @automatalabs/mcp-server-playwright install
```
该命令会自动检测你的操作系统 (Windows/macOS)，并更新或创建 Claude 客户端的配置文件，配置 Playwright 服务器集成。

服务器配置

MCP 服务器主要通过命令行启动，并与 MCP 客户端（如 Claude）通过标准输入/输出 (stdio) 进行通信。

对于 MCP 客户端，你需要在其配置文件中添加 MCP Server Playwright 的配置信息。以下是配置示例，通常 'install' 命令会自动完成配置，你也可以手动检查或添加：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@automatalabs/mcp-server-playwright"]
    }
  }
}

配置参数说明:

'server name': 'playwright' (服务器名称，客户端用此名称识别和调用)
'command': 'npx' (启动服务器的命令，这里使用 'npx' 运行 npm 包)
'args': '["-y", "@automatalabs/mcp-server-playwright"]' (传递给 'npx' 的参数，'-y' 表示自动确认，'@automatalabs/mcp-server-playwright' 是要执行的 npm 包名，即 MCP Server Playwright 服务器程序)

注意: 无需修改 'command' 和 'args'，除非你希望使用全局安装或其他方式运行 'MCP Server Playwright'。

基本使用方法

启动 MCP Server Playwright: 安装完成后，当 MCP 客户端（如 Claude）启动并需要使用 'playwright' 服务器时，会自动根据上述配置启动 MCP Server Playwright。你通常无需手动启动服务器。
LLM 调用工具: 在支持 MCP 协议的 LLM 客户端中，你可以指示 LLM 使用 'playwright' 服务器提供的工具来操作网页。例如，你可以指示 LLM 执行以下操作：
- 导航到特定网页 (使用 'playwright_navigate' 工具)
- 截取当前网页的屏幕截图 (使用 'playwright_screenshot' 工具)
- 点击网页上的某个按钮 (使用 'playwright_click' 或 'playwright_click_text' 工具)
- 在输入框中填写内容 (使用 'playwright_fill' 工具)
- 执行 JavaScript 代码获取网页信息 (使用 'playwright_evaluate' 工具)
访问资源: LLM 可以访问 MCP Server Playwright 提供的资源，例如：
- 获取浏览器控制台日志 (通过 'console://logs' 资源 URI)
- 获取之前截取的屏幕截图 (通过 'screenshot://<screenshot-name>' 资源 URI)

示例场景: 你可以让 LLM 访问电商网站，浏览商品，搜索信息，并将关键页面截图保存，或者让 LLM 自动化填写网页表单等任务。

通过 MCP Server Playwright，LLM 能够突破文本交互的限制，与 Web 内容进行深度互动，实现更复杂和实用的应用场景。

关键词