用 Playwright MCP 实现浏览器自动化

如何教会 Claude Code 操控一个真实的浏览器——用于网页抓取、测试和自动化。

Model Context Protocol（MCP） 用外部工具扩展了 Claude Code 的能力。其中最强大的扩展之一，就是 Playwright MCP，它让 Claude 能够操控一个真实的浏览器。

一分钟完成配置

安装过程简单得出奇。启动 Claude 之前，只需一条命令：

$ claude mcp add playwright npx '@playwright/mcp@latest'

就这么简单。配置会保存在 ~/.claude.json 中，并在后续会话里持续生效。

它是如何工作的

配置完成后，Claude 就能操控一个可见的 Chrome 窗口。你可以实时看到智能体在做什么：加载页面、填写表单、点击按钮。

一个实用的小技巧：在请求中明确提到 “Playwright MCP”。这样 Claude 就会选对工具，而不会试图去用普通的 Bash 命令。

身份验证轻松搞定

一个重要优势：Claude 会显示登录页面，由你亲手完成身份验证。会话 Cookie 在整个交互过程中都会被保留下来。你无需把凭据交给 AI。

可用的浏览器工具

Playwright MCP 提供了 25 个浏览器功能。你不需要记住这些名字，Claude 会根据你的任务自动选对功能：

browser_navigate

打开 URL

browser_click

点击元素

browser_type

输入文本

browser_screenshot

截取屏幕截图

browser_snapshot

捕获 DOM 结构

browser_tabs

管理标签页

browser_drag

拖放操作

browser_hover

悬停效果

browser_select_option

操作下拉菜单

browser_file_upload

上传文件

browser_pdf_save

生成 PDF

browser_network

监控网络请求

实际应用场景

1. 抓取需要 JavaScript 渲染的网页

许多现代网站只有在 JavaScript 执行后才会渲染出内容。Playwright 会自动等待页面完全渲染，然后再提取数据。

# Prompt for Claude:
"Use Playwright MCP to open the page example.com/products
and extract all product names and prices as JSON."

2. 自动化测试

Claude 可以执行端到端测试，甚至能生成 Playwright 测试脚本，供你之后集成到自己的 CI/CD 流水线中。

3. 表单自动化

重复性的表单填写？让 Claude 来填，由你来核对最终的取值。

4. 截图存档

自动截取网站截图，用于文档记录或监控，需要的话还能加上标注。

最佳实践

明确点名工具：说 “用 Playwright MCP”，好让 Claude 选对工具
分步下达指令：对于复杂的工作流，把任务拆解开来
快照优于截图：browser_snapshot 提供的是结构化数据，Claude 处理起来更高效
盯住身份验证：在登录页面你可以亲手介入

安全方面的考量

由于 Claude 操控的是一个真实的浏览器，有几点需要注意：

未经审查，不要用敏感的生产数据来操作
做自动化实验时使用测试账号
盯着浏览器的每一步操作——一切都在你眼前实时进行
永远不要把敏感凭据直接交给 Claude

用到的工具：

Playwright Claude Code

想把浏览器自动化集成进你的工作流吗？联系我。我可以帮你搭建配置，并开发量身定制的解决方案。

用 Playwright MCP 和 Claude Code 实现浏览器自动化