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

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

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

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

• 轻量高效：不需要处理图像数据，传输和解析速度更快，资源占用低。
• LLM 友好：返回的页面快照是纯 JSON 结构化数据，LLM 可以直接理解元素层级和属性，省去了视觉模型的集成成本。
• 操作确定性强：通过元素引用（ref）精确定位，不会因为页面布局微小变化导致操作失败，适合自动化场景。

另外，它支持两种模式：

• 持久化配置：默认存储登录状态等数据，适合需要保持会话的场景（比如自动填表）。
• 隔离模式：每次会话独立，关闭后状态清空，适合安全要求高或一次性任务（如临时数据抓取）。

二、配置与部署：快速启动的几种方式

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

1. 不同的MCP Server认证方式多样
2. 编程语言多样化，有时候找到了想要的MCP Server，却无法集成到应用中
3. 还有老生常谈的问题，多个MCP Server的可维护性不好，降低开发效率
4. 没有调用日志，无法知晓MCP Server到底做了什么，甚至报错了也不知道原因
5. 各个MCP Server的实现方式不一，有的通过命令行参数启动，有的通过环境变量，有的直接输出所有结果，有的通过SSE方式
6. 就算集成了，也无法知晓用户的调用日志，也就没办法做后续的数据统计分析
7. 还有如果客户端集成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. 元素定位问题：
   • 建议加上--isolated参数，这样可以启动多个浏览器实例。
   • 如果页面动态加载元素，需要用 browser_wait_for 等待元素出现后再操作。
2. 会话管理：
   • 持久化模式下，用户数据目录可能有权限问题，建议用绝对路径指定 --user-data-dir。
   • 隔离模式适合无状态任务，但每次都需要重新登录，可通过 --storage-state 传入已保存的登录状态。
3. 性能优化：
   • 无头模式（headless: true）性能更好，生产环境建议默认开启。
   • 批量操作时，尽量合并连续的工具调用，减少通信开销。

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

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

• 自动化测试：生成 Playwright 测试用例，结合 LLM 自动编写测试逻辑。
• 数据抓取：结构化提取网页信息，避免反爬机制（相比截图方案更隐蔽）。
• 办公自动化：自动填写表单、生成报告、批量处理网页任务（如批量发布文章）。

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