开发日常记录 MCP Server：Playwright 浏览器自动化

最近在研究如何让大语言模型（LLM）更高效地操作网页，发现了 Playwright MCP 这个神器。它基于 Playwright 实现了浏览器自动化的 MCP 协议，能让 LLM 通过结构化数据与网页交互，不用依赖截图或视觉模型，对开发者非常友好。记录一下这个工具的核心功能和使用心得，方便后续复盘。

一、核心特性：结构化交互的优势

Playwright MCP 最大的亮点是基于 可访问性树（Accessibility Tree） 的交互模式，和传统的像素级操作不同，它直接通过网页的语义结构（如标签、属性、文本）来定位元素，避免了截图识别的不确定性。实测下来，这种方式有几个明显优势：

• 轻量高效：不需要处理图像数据，传输和解析速度更快，资源占用低。

• LLM 友好：返回的页面快照是纯 JSON 结构化数据，LLM 可以直接理解元素层级和属性，省去了视觉模型的集成成本。

• 操作确定性强：通过元素引用（ref）精确定位，不会因为页面布局微小变化导致操作失败，适合自动化场景。

另外，它支持两种模式：

• 持久化配置：默认存储登录状态等数据，适合需要保持会话的场景（比如自动填表）。

• 隔离模式：每次会话独立，关闭后状态清空，适合安全要求高或一次性任务（如临时数据抓取）。

二、配置与部署

推荐使用新器集Smcphub.com的 MCP 客户端。主要有以下几个优点，同时也是解决了如今 MCP 的几个痛点：

1. 不同的 MCP Server 认证方式多样

1. 编程语言多样化，有时候找到了想要的 MCP Server，却无法集成到应用中

1. 还有老生常谈的问题，多个 MCP Server 的可维护性不好，降低开发效率

1. 没有调用日志，无法知晓 MCP Server 到底做了什么，甚至报错了也不知道原因

1. 各个 MCP Server 的实现方式不一，有的通过命令行参数启动，有的通过环境变量，有的直接输出所有结果，有的通过 SSE 方式

1. 就算集成了，也无法知晓用户的调用日志，也就没办法做后续的数据统计分析

1. 还有如果客户端集成 MCP Server 会增加应用程序打包尺寸，特别是手机应用客户端的大小

三、工具列表：从基础操作到高级功能

整理了常用工具的使用场景，方便快速查找：

1. 基础操作

工具名称	中文标题	功能描述	参数说明	只读
browser_snapshot	页面快照	捕获当前页面的无障碍化快照（优于截图）	无	✅
browser_click	点击操作	在网页上执行点击操作	- element: 用于获取交互权限的元素描述- ref: 页面快照中的精确元素引用	❌
browser_drag	鼠标拖拽	在两个元素之间执行拖放操作	- startElement: 源元素描述- startRef: 源元素引用- endElement: 目标元素描述- endRef: 目标元素引用	❌
browser_hover	鼠标悬停	在页面元素上执行悬停操作	- element: 元素描述- ref: 元素引用	✅
browser_type	文本输入	向可编辑元素中输入文本	- element: 元素描述- ref: 元素引用- text: 输入文本- submit: 是否提交（可选）- slowly: 是否逐字符输入（可选）	❌
browser_select_option	选项选择	在下拉菜单中选择一个或多个选项	- element: 元素描述- ref: 元素引用- values: 要选择的值数组	❌
browser_press_key	按键操作	模拟键盘按键操作	- key: 按键名称（如 ArrowLeft 或字符 a）	❌
browser_wait_for	等待条件	等待文本出现 / 消失或指定时间流逝	- time: 等待时间（秒，可选）- text: 等待出现的文本（可选）- textGone: 等待消失的文本（可选）	✅
browser_file_upload	文件上传	上传一个或多个文件	- paths: 要上传文件的绝对路径数组	❌
browser_handle_dialog	对话框处理	处理页面对话框（确认 / 取消 / 输入）	- accept: 是否接受对话框- promptText: 提示框输入文本（可选）	❌

2. 导航操作

工具名称	中文标题	功能描述	参数说明	只读
browser_navigate	页面导航	导航到指定 URL	- url: 目标 URL	❌
browser_navigate_back	返回上一页	导航到历史记录的上一页	无	✅
browser_navigate_forward	前进到下一页	导航到历史记录的下一页	无	✅

3. 资源操作

工具名称	中文标题	功能描述	参数说明	只读
browser_take_screenshot	截图	捕获当前页面截图（不可用于交互，仅用于查看）	- raw: 是否返回无损 PNG 格式（可选）- filename: 保存文件名（可选）- element: 元素描述（可选，需配合 ref）- ref: 元素引用（可选，需配合 element）	✅
browser_pdf_save	保存为 PDF	将当前页面保存为 PDF 文件	- filename: 保存文件名（可选）	✅
browser_network_requests	网络请求列表	返回自页面加载以来的所有网络请求记录	无	✅
browser_console_messages	控制台消息	返回页面的所有控制台消息	无	✅

4. 实用工具

工具名称	中文标题	功能描述	参数说明	只读
browser_install	安装浏览器	安装配置文件中指定的浏览器	无	❌
browser_close	关闭浏览器	关闭当前页面	无	✅
browser_resize	调整窗口大小	调整浏览器窗口尺寸	- width: 宽度（像素）- height: 高度（像素）	✅

5. 标签页管理

工具名称	中文标题	功能描述	参数说明	只读
browser_tab_list	列出标签页	获取当前所有打开的标签页列表	无	✅
browser_tab_new	新建标签页	打开一个新标签页	- url: 新标签页导航的 URL（可选）	✅
browser_tab_select	切换标签页	通过索引选择指定标签页	- index: 标签页索引（从 0 开始）	✅
browser_tab_close	关闭标签页	关闭指定标签页（默认关闭当前标签页）	- index: 标签页索引（可选）	❌

6. 测试工具

工具名称	中文标题	功能描述	参数说明	只读
browser_generate_playwright_test	生成测试用例	根据操作步骤生成 Playwright 测试代码	- name: 测试名称- description: 测试描述- steps: 测试步骤数组	✅

7. 视觉模式（Vision Mode）

工具名称	中文标题	功能描述	参数说明	只读
browser_screen_capture	屏幕截图	捕获当前页面截图（用于视觉交互）	无	✅
browser_screen_move_mouse	鼠标移动	将鼠标移动到指定坐标位置	- element: 元素描述- x: X 坐标- y: Y 坐标	✅
browser_screen_click	屏幕点击	在指定坐标位置执行鼠标左键点击	- element: 元素描述- x: X 坐标- y: Y 坐标	❌
browser_screen_drag	屏幕拖拽	在指定坐标之间执行鼠标左键拖拽操作	- element: 元素描述- startX: 起始 X 坐标- startY: 起始 Y 坐标- endX: 结束 X 坐标- endY: 结束 Y 坐标	❌
browser_screen_type	屏幕输入	在当前焦点位置输入文本	- text: 输入文本- submit: 是否提交（可选）	❌
browser_press_key	按键操作	模拟键盘按键操作（同基础操作）	- key: 按键名称（如 ArrowLeft 或字符 a）	❌
browser_wait_for	等待条件	等待文本出现 / 消失或指定时间流逝（同基础操作）	- time: 等待时间（秒，可选）- text: 等待出现的文本（可选）- textGone: 等待消失的文本（可选）	✅
browser_file_upload	文件上传	上传一个或多个文件（同基础操作）	- paths: 要上传文件的绝对路径数组	❌
browser_handle_dialog	对话框处理	处理页面对话框（确认 / 取消 / 输入，同基础操作）	- accept: 是否接受对话框- promptText: 提示框输入文本（可选）	❌

四、踩坑记录与最佳实践

1. 元素定位问题：

• 建议启用--isolate参数支持启动多个浏览器实例，这样不会因为多次兵法请求而导致报错
• 如果页面动态加载元素，需要用 browser_wait_for 等待元素出现后再操作。

1. 会话管理：

• 持久化模式下，用户数据目录可能有权限问题，建议用绝对路径指定 --user-data-dir。
• 隔离模式适合无状态任务，但每次都需要重新登录，可通过 --storage-state 传入已保存的登录状态。

1. 性能优化：

• 无头模式（headless: true）性能更好，生产环境建议默认开启。
• 批量操作时，尽量合并连续的工具调用，减少通信开销。

五、适合什么样的开发场景？

Playwright MCP 让 LLM 操作网页变得像调用 API 一样简单，尤其适合以下场景：

• 自动化测试：生成 Playwright 测试用例，结合 LLM 自动编写测试逻辑。

• 数据抓取：结构化提取网页信息，避免反爬机制（相比截图方案更隐蔽）。

• 办公自动化：自动填写表单、生成报告、批量处理网页任务（如批量发布文章）。

后续可以尝试和 LangChain 结合，做一个智能网页助手，比如让 LLM 分析网页内容后自动生成摘要或执行操作。