Cursor 浏览器自动化：Playwright MCP Server 使用指南

一、介绍

这是一个基于模型上下文协议 (Model Context Protocol, MCP) 的自动化服务器系统，它深度整合了 Playwright 框架来提供全面的浏览器自动化功能。该服务器系统主要服务于大型语言模型(LLM)，为其提供了丰富的网页交互能力，具体功能包括：

网页交互与控制：
- 支持完整的页面导航控制（前进/后退/刷新）
- 可模拟用户操作（点击、滚动、拖拽等）
- 支持表单自动填写和提交
- 能够处理复杂的页面跳转流程
可视化功能：
- 高精度页面截图（支持全屏或指定区域）
- 页面渲染状态监控
- 支持将网页保存为PDF格式（包括自定义页眉页脚）
开发辅助功能：
- 自动生成测试代码（支持多种测试框架）
- 录制和回放用户操作
- 提供元素定位辅助工具
数据处理能力：
- 结构化网页内容抓取（支持XPath和CSS选择器）
- 动态数据提取（包括AJAX加载内容）
- 支持数据格式化输出（JSON/CSV等）
执行环境：
- 完整的JavaScript执行沙箱
- 支持多浏览器引擎（Chromium/WebKit/Firefox）
- 提供设备模拟功能（多种移动设备参数预设）

技术实现上，该系统通过结构化的可访问性快照（Accessibility Snapshot）与网页进行深度交互，这种设计使得：

能够准确识别和操作页面元素
支持无障碍访问测试
提供可靠的元素定位机制
实现跨框架的内容访问

典型应用场景包括：

自动化测试（生成和执行测试用例）
数据采集（电商价格监控、新闻聚合等）
网页内容分析（SEO优化、竞品分析）
RPA流程自动化（企业业务流程自动化）
AI训练数据收集（为机器学习模型提供网页数据）

系统采用模块化设计，支持功能扩展和自定义插件开发，可根据具体需求灵活配置自动化流程。

二、环境准备

1、安装环境

步骤 1:下载安装包

·访问Node.js 官网，选择 macOs的.pkg 安装包

步骤 2:安装 Node.js

·双击下载的.pkg 文件，启动安装向导。

按照提示完成安装，通常会自动将 Node.is 添加到系统路径中。

步骤 3:验证安装

·打开终端，输入以下命令:

复制代码

node -v
npm -v

如果看到版本号，说明安装成功

步骤 4:配置环境变量(可选)

·如果需要自定义 npm 的全局模块路径，可以使用以下命令:

复制代码

npm config set prefix "/usr/local/node_global"
npm config set cache "/usr/local/node cache"

然后将 /usr/local/node_global添加到 PATH中。

2、安装Playwright MCP包

通过 npm 全局安装 Playwright MCP 服务包:

在cmd输入以下命令(这里建议使用管理员身份启动cmd，不然可能会失败)

复制代码

npm install-g @executeautomation/playwright-mcp-server

出现问题：

复制代码

npm warn deprecated node-domexception@1.0.0: Use your platform's native DOMException instead

解决：

清除缓存和锁文件后再安装

复制代码

sudo rm -rf /Users/leiyuxing/Library/Caches/ms-playwright
sudo npm install -g @executeautomation/playwright-mcp-server

3、安装NPX包

如果你已经安装了 npm(nodejs自带的，只要安装了nodejs就行了)，可以直接通过cmd命令行输入以下命令安装npx :(这里要也建议使用管理员身份启动)

复制代码

npm install -g npx

这个命令会将 npx全局安装到你的系统中。安装完成后，你可以通过以下命令验证是否安装成功:

复制代码

npx -V

这里使用的是

https://github.com/executeautomation/mcp-playwright

点击设置，点击Tools &integration，然后点击 New MCP Server

有多个mcp的情况下，注意参考如下操作

4、安装 Playwright MCP 服务器

通过 npm 全局安装 Playwright MCP 服务器

bash 复制代码

 npm install -g @playwright/mcp@0.0.18

执行成功后如下：

启动 Playwright MCP 服务器

在终端中运行以下命令启动服务器:

bash 复制代码

 npx @playwright/mcp@0.0.18

默认情况下，服务器将以有头模式(显示浏览器窗口)运行。如果你想使用无头模式(后台运行)，可以添加 --headless 参数:

bash 复制代码

sudo npx @playwright/mcp@0.0.18 --headless

执行后:

5、常用错误修复指引

实际按照执行但是还是报错了：

检查下原因有三：

1、没有安装**Claude Desktop，**它是一个独立的桌面应用程序，也是你配置 MCP 和让 AI 真正"动手操作"的必要载体。

终端里手动启动 MCP 服务，但没有安装"宿主"应用 。这就像造好了轮子却没装车------MCP服务器在空转，Claude根本连不上它，所以才会报错 No server info found。

Mac用户 ：访问 claude.ai 下载，或通过 Homebrew 安装：
复制代码
```
brew install --cask claude
```

**2、**根本原因

你之前用 sudo 运行过 npm/npx 命令 ，导致 /Users/xxx/.npm/ 目录下的一些文件变成了 root 所有者 。现在普通用户（leiyuxing）没有权限写入这些文件，Claude Desktop 以普通用户身份运行时就会报错 EACCES: permission denied。

修复方法：

复制代码

# 1. 修复 npm 目录所有权（直接复制日志里的命令）
sudo chown -R 501:20 "/Users/leiyuxing/.npm"

# 2. 清理 npm 缓存（确保没有残留的root文件）
npm cache clean --force

# 3. 验证修复结果
ls -la ~/.npm | head -5  # 应该都是你的用户名，不是root

3、重新启动后不要用root！这下正常了

复制代码

npx @playwright/mcp@0.0.18 --headless

三、playwright的工具指令介绍

可以看到 Playwright 的一些tool，列表如下：

1. 页面交互操作指令

browser_click：点击页面上的元素
browser_hover：悬停到某个元素上
browser_drag：拖拽元素到目标元素位置
browser_type：输入文本到可编辑元素中
browser_select_option：选择下拉菜单中的选项

2. 基于视觉的操作

browser_screen_move_mouse：将鼠标移动到指定坐标
browser_screen_click：点击页面某个坐标位置
browser_screen_drag：在坐标点间拖动鼠标
browser_screen_type：视觉模式下输入文本

3. 快照与截图

browser_snapshot：获取页面快照（用于后续点击等操作）
browser_take_screenshot：拍摄当前页面截图（非交互用）
browser_screen_capture：基于视觉的整页截图

4. 键盘操作

browser_press_key：模拟按下键盘上的某个键

5. 文件与导出

browser_file_upload：上传本地文件
browser_pdf_save：将当前页面保存为 PDF 文件

6. 标签页管理

browser_tab_list：列出所有浏览器标签
browser_tab_new：打开一个新标签页（可指定 URL）
browser_tab_select：切换到指定的标签页（通过索引）
browser_tab_close：关闭标签页（默认当前页）

7. 页面导航

browser_navigate：跳转到指定的 URL
browser_navigate_back：返回上一页面
browser_navigate_forward：前进到下一页面

8. 其他操作

browser_wait：等待指定时间（最多 10 秒）
browser_close：关闭页面
browser_install：安装配置中指定的浏览器

四、简单实操

我们使用 Playwright 来做一些常见的浏览器操作。

1. 打开网页

我们在cursor的chat中要求打开一个网站。

2、数据搜索

输入进入csdn专业开发者社区，大模型搜索到网站，playwright 进入网站。

在此页面搜进击的雷神这个人

通过 browser_snapshot 获取页面快照，然后调用 browser_type 输入搜索文本到搜索框中，最后通过多次 browser_clik 点击动作完成页面的跳转，结果如下图：