MCP 服务器 Playwright 详细介绍
MCP 服务器 Playwright 是一个实现了模型上下文协议（Model Context Protocol，简称 MCP）的服务器，它利用强大的 Playwright 库提供了全面的浏览器自动化能力。其主要目的是赋能大型语言模型（LLMs），使其能够在一个真实的浏览器环境中与网页进行交互，例如访问网站、截取页面截图以及执行 JavaScript 代码。
以下是根据提供的 README 内容整理的关键信息和详细介绍：
功能特性 (Features)
此部分列出了 MCP 服务器 Playwright 的核心功能：
- 🌐 全面的浏览器自动化能力： 提供在真实浏览器中执行各种操作的能力。
- 📸 截取屏幕截图： 可以截取整个网页或页面上特定元素的屏幕截图。
- 🖱️ 全面的网页交互： 支持导航到指定 URL、点击页面元素、填写表单等多种交互方式。
- 📊 监控控制台日志： 能够获取浏览器控制台中输出的日志信息。
- 🔧 在浏览器上下文中执行 JavaScript： 允许直接在浏览器环境中运行 JavaScript 代码。
安装 (Installation)
本部分详细说明了如何安装 MCP 服务器 Playwright，特别是针对 Claude Desktop 环境。
- 通过 Smithery 安装： 如果使用 Claude Desktop，可以通过 Smithery 自动安装。
bash
npx -y @smithery/cli install @automatalabs/mcp-server-playwright --client claude - 使用 npx 安装： 也可以直接使用 npx 进行安装。
bash
npx @automatalabs/mcp-server-playwright install
此命令将执行以下步骤：- 检查操作系统兼容性（支持 Windows/macOS）。
- 创建或更新 Claude 的配置文件。
- 配置 Playwright 服务器的集成。
配置文件将自动创建/更新到以下位置： - Windows:
%APPDATA%\Claude\claude_desktop_config.json - macOS:
~/Library/Application Support/Claude/claude_desktop_config.json
- 使用 mcp-get 安装： 还可以使用 mcp-get 工具进行安装。
bash
npx @michaellatman/mcp-get@latest install @automatalabs/mcp-server-playwright
配置 (Configuration)
安装过程会自动在 Claude 的配置文件中添加以下配置，用于注册并启动 Playwright MCP 服务器：
json
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"-y",
"@automatalabs/mcp-server-playwright"
]
}
}
}
此配置指定了一个名为 “playwright” 的 MCP 服务器，该服务器通过执行 npx -y @automatalabs/mcp-server-playwright 命令来启动。
组件 / 工具 (Components / Tools)
这部分列出了大型语言模型可以调用的具体工具（或命令），以实现浏览器自动化功能。每个工具都有一个名称和相应的参数结构（JSON 格式）。
browser_navigate：导航到浏览器中的任意 URL。
参数示例：
json
{
"url": "https://stealthbrowser.cloud"
}
（url为必需参数，指定要访问的网址）browser_screenshot：截取整个页面或特定元素的屏幕截图。
参数示例：
json
{
"name": "screenshot-name", // 必需，截图的名称
"selector": "#element-id", // 可选，指定要截取元素的 CSS 选择器
"fullPage": true // 可选，默认为 false，指定是否截取整个页面
}browser_click：使用 CSS 选择器点击页面上的元素。
参数示例：
json
{
"selector": "#button-id" // 必需，指定要点击元素的 CSS 选择器
}browser_click_text：通过元素的文本内容点击页面上的元素。
参数示例：
json
{
"text": "Click me" // 必需，指定要点击元素的文本内容
}browser_hover：使用 CSS 选择器将鼠标悬停在页面元素上。
参数示例：
json
{
"selector": "#menu-item" // 必需，指定要悬停元素的 CSS 选择器
}browser_hover_text：通过元素的文本内容将鼠标悬停在页面元素上。
参数示例：
json
{
"text": "Hover me" // 必需，指定要悬停元素的文本内容
}browser_fill：填写输入字段（如文本框、文本区域）。
参数示例：
json
{
"selector": "#input-field", // 必需，指定输入字段的 CSS 选择器
"value": "Hello World" // 必需，指定要填写的值
}browser_select：使用 CSS 选择器在SELECT元素中选择一个选项。
参数示例：
json
{
"selector": "#dropdown", // 必需，指定 SELECT 元素的 CSS 选择器
"value": "option-value" // 必需，指定要选择选项的值（value 属性）
}browser_select_text：通过元素的文本内容在SELECT元素中选择一个选项。
参数示例：
json
{
"text": "Choose me", // 必需，指定要选择选项的文本内容
"value": "option-value" // 必需，指定要选择选项的值（value 属性）
}browser_evaluate：在浏览器控制台中执行 JavaScript 代码。
参数示例：
json
{
"script": "document.title" // 必需，指定要执行的 JavaScript 脚本
}
资源 (Resources)
此部分描述了如何访问浏览器执行操作后产生的输出信息。
- 控制台日志 (
console://logs)： 通过此资源可以获取浏览器控制台输出的文本格式信息，包括所有控制台消息。 - 屏幕截图 (
screenshot://<n>)： 通过此资源可以访问以 PNG 格式存储的捕获屏幕截图。<n>通常是截图时指定的名称，可以根据名称引用特定的截图。
许可证 (License)
本项目采用 MIT 许可证。更多详情请参阅项目中的 LICENSE 文件。