MCP-Server-Playwright

<h1 align="center">MCP Server Playwright</h1>
<p align="center">
  <a href="https://www.automatalabs.io"><img alt="MCP Playwright" src="https://automatalabs.io/icon.svg" height="250"/></a>
</p>
<p align="center">
  <b>一个使用 Playwright 提供浏览器自动化功能的模型上下文协议服务器</b></br>
  <sub>使 LLM 能够与网页交互、截取屏幕截图并在真实的浏览器环境中执行 JavaScript</sub>
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@automatalabs/mcp-server-playwright"><img alt="NPM Version" src="https://img.shields.io/npm/v/@automatalabs/mcp-server-playwright.svg" height="20"/></a>
  <a href="https://npmcharts.com/compare/@automatalabs/mcp-server-playwright?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@automatalabs/mcp-server-playwright.svg" height="20"/></a>
  <a href="https://github.com/Automata-Labs-team/MCP-Server-Playwright/blob/main/LICENSE"><img alt="License" src="https://img.shields.io/github/license/Automata-Labs-team/MCP-Server-Playwright.svg" height="20"/></a>
  <a href="https://smithery.ai/server/@automatalabs/mcp-server-playwright"><img alt="Smithery Installs" src="https://smithery.ai/badge/@automatalabs/mcp-server-playwright" height="20"/></a>
</p>

<a href="https://glama.ai/mcp/servers/9q4zck8po5"><img width="380" height="200" src="https://glama.ai/mcp/servers/9q4zck8po5/badge" alt="MCP-Server-Playwright MCP server" /></a>

## 目录

- [特性](#features)
- [安装](#installation)
- [配置](#configuration)
- [组件](#components)
  - [工具](#tools)
  - [资源](#resources)
- [许可](#license)

## 特性

- 🌐 完整的浏览器自动化功能
- 📸 捕获整个页面或特定元素的屏幕截图
- 🖱️ 全面的 Web 交互（导航、点击、表单填写）
- 📊 控制台日志监控
- 🔧 在浏览器上下文中执行 JavaScript

## 安装

### 通过 Smithery 安装

要通过 [Smithery](https://smithery.ai/server/@automatalabs/mcp-server-playwright) 为 Claude Desktop 自动安装 MCP Server Playwright：

```bash
npx -y @smithery/cli install @automatalabs/mcp-server-playwright --client claude

您可以使用 npx 或 mcp-get 安装软件包：

使用 npx：

npx @automatalabs/mcp-server-playwright install

此命令将：

1. 检查您的操作系统兼容性（Windows/macOS）
2. 创建或更新 Claude 配置文件
3. 配置 Playwright 服务器集成

配置文件将自动创建/更新在：

• Windows: %APPDATA%\Claude\claude_desktop_config.json
• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

使用 mcp-get：

npx @michaellatman/mcp-get@latest install @automatalabs/mcp-server-playwright

配置

安装过程会自动将以下配置添加到您的 Claude 配置文件中：

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

组件

工具

browser_navigate

导航到浏览器中的任何 URL

{
  "url": "https://stealthbrowser.cloud"
}

browser_screenshot

捕获整个页面或特定元素的屏幕截图

{
  "name": "screenshot-name",     // 必需
  "selector": "#element-id",     // 可选
  "fullPage": true              // 可选，默认：false
}

browser_click

使用 CSS 选择器点击页面上的元素

{
  "selector": "#button-id"
}

browser_click_text

通过文本内容点击页面上的元素

{
  "text": "Click me"
}

browser_hover

使用 CSS 选择器悬停在页面上的元素上

{
  "selector": "#menu-item"
}

browser_hover_text

通过文本内容悬停在页面上的元素上

{
  "text": "Hover me"
}

browser_fill

填写输入字段

{
  "selector": "#input-field",
  "value": "Hello World"
}

browser_select

使用 CSS 选择器在 SELECT 元素中选择一个选项

{
  "selector": "#dropdown",
  "value": "option-value"
}

browser_select_text

通过文本内容在 SELECT 元素中选择一个选项

{
  "text": "Choose me",
  "value": "option-value"
}

browser_evaluate

在浏览器控制台中执行 JavaScript

{
  "script": "document.title"
}

资源

1. 控制台日志 (console://logs)

   • 以文本格式访问浏览器控制台输出
   • 包括来自浏览器的所有控制台消息

2. 屏幕截图 (screenshot://<n>)

   • 访问捕获的屏幕截图的 PNG 图像
   • 通过捕获期间指定的名称引用

许可

该项目已获得 MIT 许可 - 有关详细信息，请参阅 LICENSE 文件。