金大哥 - Playwright Plus MCP 详情

article

README

🚀 Playwright 服务器 MCP 服务

Playwright 服务器 MCP 服务集成了 MCP 工具，可提供便捷的自动化操作与笔记管理功能。其支持多样化的工具指令，能满足不同场景下的自动化需求，并且具备简单的笔记存储系统，方便用户记录与管理信息。点击访问

🚀 快速开始

若你想使用该服务，可参考后续的组件介绍、配置说明、开发信息以及配置示例，了解如何配置和使用该服务。

✨ 主要特性

资源

该服务器实现了一个简单的笔记存储系统，具备以下功能：

自定义的 note:// URI 方案，可用于访问单个笔记。
每个笔记资源包含名称、描述和 text/plain MIME 类型。

提示

该服务器提供了一个实用的提示功能：

summarize-notes：能够生成所有存储笔记的摘要。
- 支持可选参数 "style" 以控制详细程度（简洁/详细）。
- 会根据当前所有笔记生成提示语，并优先考虑风格偏好。

工具

该服务器实现了一系列实用工具：

playwright_navigate：导航到指定 URL。若没有活动会话，此操作将自动创建一个新的会话。
- 需要一个 url 参数（字符串）。
playwright_screenshot：截取当前页面或特定元素的截图。
- 需要一个 name 参数（字符串）作为截图文件名。
- 可选参数 selector（字符串），指定 CSS 选择器来截取特定元素。若未提供选择器，则截取全页截图。
playwright_click：通过 CSS 选择器点击页面上的某个元素。
- 需要一个 selector 参数（字符串）来指定要点击的元素的 CSS 选择器。
playwright_fill：填写输入字段的内容。
- 需要一个 selector 参数（字符串）来指定输入字段的 CSS 选择器。
- 需要一个 value 参数（字符串）来指定要填充的值。
playwright_evaluate：在浏览器控制台中执行 JavaScript 代码。
- 需要一个 script 参数（字符串）来指定要执行的 JavaScript 脚本。
playwright_click_text：通过文本内容点击页面上的某个元素。
- 需要一个 text 参数（字符串）来指定要点击的元素的文本内容。
playwright_get_element_attribute：获取元素的属性值。
- 需要两个参数：selector（字符串，指定元素的 CSS 选择器）和 attribute_name（字符串，指定要获取的属性名称）。
- 返回指定元素的属性值。

📦 安装指南

MCP Desktop 配置路径

Windows：%APPDATA%\MCP\config.json
Linux：~/.config/MCP/config.json

💻 使用示例

基础用法

若你想使用 playwright_navigate 工具导航到指定页面，可按如下步骤操作：

# 假设需要导航到百度页面
playwright_navigate url="https://www.baidu.com"

高级用法

若你想使用 playwright_screenshot 工具截取特定元素的截图，可按如下步骤操作：

# 假设需要截取百度搜索框的截图
playwright_screenshot name="baidu_search_box" selector="#kw"

📚 详细文档

开发信息

发布步骤

运行 uv build 命令进行构建。
执行 uv package 生成发布包。
使用 uv install 安装服务。

调试方法

执行以下命令启动调试：

npm run dev

配置示例

MCP Desktop 示例路径

{
  "playwright_server": {
    "enabled": true,
    "path": "C:/Users/Administrator/AppData/MCP/config.json"
  }
}

MCP Inspector 示例命令

npm run dev -- --port 9234

Playwright Plus