1. 项目概述：当AI助手遇上浏览器自动化

最近在折腾一个挺有意思的组合：在VS Code里，让Claude Code这个AI编程助手，通过MCP（Model Context Protocol）协议，直接调用Playwright这个强大的浏览器自动化工具。简单来说，就是你可以在写代码或者调试的时候，直接跟Claude聊天，让它帮你执行一些网页操作，比如“点一下那个登录按钮”、“把表格第一行的数据抓下来”、“看看这个页面加载完没有”，然后Claude就能通过Playwright MCP Server去实际操控浏览器，并把结果反馈给你。这可不是简单的代码补全，而是真正意义上的“边聊边测”，把自然语言指令实时转化为自动化操作。

这个玩法的核心价值在于，它极大地降低了编写和调试自动化测试脚本的门槛。以前，你要写一个Playwright脚本，得熟悉它的API、处理异步操作、编写选择器，调试起来更是费时费力。现在，你只需要用大白话描述你的意图，Claude就能理解并尝试执行。对于快速验证一个想法、进行探索性测试，或者辅助编写复杂的测试用例，效率提升不是一点半点。无论是前端开发者想快速验证页面交互，还是测试工程师在构建自动化用例，甚至是运营同学想定期抓取一些数据，这个组合都能派上用场。它模糊了“编码”和“操作”的边界，让浏览器自动化变得更直观、更交互式。

2. 环境搭建与核心组件解析

2.1 基础环境准备：VS Code与Node.js

工欲善其事，必先利其器。我们首先需要把最基础的环境搭建好。整个流程的基石是VS Code和Node.js运行环境。

VS Code ：这个没什么好说的，它是我们的主战场。确保你安装的是较新的稳定版本。我个人习惯禁用一些不相关的插件，保持编辑器的纯净，避免潜在的冲突。如果你还没有安装，直接去官网下载安装即可，过程非常简单。

Node.js ：这是Playwright和后续MCP Server运行的引擎。我强烈推荐使用 Node.js 18 LTS或更高版本 。为什么是18+？因为更现代的Node版本在ES模块支持、性能和一些底层API上更稳定，能避免很多依赖安装和运行时稀奇古怪的问题。安装Node.js的同时， npm （Node包管理器）也会一并安装。安装完成后，打开终端（VS Code内置的或系统自带的都行），运行 node --version 和 npm --version 来确认安装成功。

注意：有些教程可能会让你用 nvm （Node Version Manager）来管理多个Node版本，这对于需要切换不同项目环境的开发者来说是很好的实践。但对于我们这个单一目标，直接安装官方LTS版本是最直接省事的选择。

2.2 核心主角一：Claude Code扩展

Claude Code是Anthropic公司为VS Code开发的官方AI编程助手扩展。它不同于那些仅仅调用云端API的插件，Claude Code被设计成一个更深入集成开发环境的智能体，能够理解项目上下文、执行命令，并通过MCP协议与外部工具（服务器）通信。

安装与配置 ：

  1. 在VS Code的扩展市场（Ctrl+Shift+X）中搜索“Claude Code”。
  2. 找到由“Anthropic”发布的扩展，点击安装。
  3. 安装后，VS Code侧边栏会出现一个蚂蚁图标。首次使用需要登录你的Claude账户（通常需要科学上网环境，请注意合规使用网络服务）。登录成功后，你就拥有了一个在编辑器内随时可用的Claude对话界面。

关键特性理解 ：

  • 项目感知 ：Claude Code能读取你当前打开的工作区文件，从而在回答问题时提供基于项目代码的精准建议。
  • 终端集成 ：它可以执行一些简单的终端命令，并读取输出。
  • MCP客户端 ：这是本项目最关键的功能。Claude Code内置了MCP客户端，允许我们为其配置“工具”（即MCP Server）。配置成功后，Claude就能在对话中主动提供并使用这些工具，比如我们即将配置的Playwright浏览器控制工具。

Claude Code的核心优势在于其“行动力”。它不止于聊天和生成代码片段，更能将指令转化为实际动作，这正是我们实现“边聊边自动化”的基础。

2.3 核心主角二：Playwright与Playwright MCP Server

Playwright ：这是一个由微软开发的现代浏览器自动化测试库。它支持Chromium、Firefox和WebKit三大浏览器引擎，并且是跨平台的。相比于老牌的Selenium，Playwright的API设计更现代（基于异步Promise），自动等待机制更智能，执行速度也更快。它不仅能用于测试，也是一个强大的网页爬取和机器人流程自动化（RPA）工具。

Playwright MCP Server ：这是连接Claude Code和Playwright的桥梁。MCP（Model Context Protocol）是一个开放的协议，允许像Claude这样的AI模型去安全、可控地调用外部工具和服务。Playwright MCP Server就是一个实现了MCP协议的服务端程序，它暴露了一系列工具函数（如 navigate_browser ， click_element ， get_text 等）。当Claude Code配置了这个Server后，Claude模型就能在对话中识别用户的自然语言请求，并选择调用合适的工具来操作浏览器。

安装Playwright MCP Server ： 这个Server通常是一个独立的Node.js项目或包。一个常见且维护良好的实现是 @modelcontextprotocol/server-playwright 。我们在一个合适的目录（比如你的项目根目录，或者一个专门的工具目录）下，打开终端执行以下命令：

# 初始化一个新的npm项目（如果目录下没有package.json）
npm init -y

# 安装Playwright MCP Server包
npm install @modelcontextprotocol/server-playwright

# 安装Playwright本身及其浏览器
npx playwright install

最后一步 npx playwright install 非常重要，它会下载Playwright需要使用的实际浏览器二进制文件（Chromium, Firefox, WebKit），这些浏览器是专门为自动化定制的版本，与我们日常使用的浏览器是分开的。

3. 保姆级配置与连接流程

3.1 配置Claude Code连接MCP Server

安装好组件后，最关键的一步是告诉Claude Code去哪里找我们的Playwright MCP Server。配置是通过VS Code的设置（ settings.json ）完成的。

  1. 在VS Code中，按下 Ctrl+Shift+P (Windows/Linux) 或 Cmd+Shift+P (Mac) 打开命令面板。
  2. 输入 “Preferences: Open User Settings (JSON)” 并选择，这会打开你的用户级 settings.json 文件。你也可以在工作区级别的 .vscode/settings.json 中配置，仅对当前项目生效。
  3. 在JSON文件中，添加如下配置：
{
  "claude.code.mcpServers": {
    "playwright": {
      "command": "node",
      "args": [
        "/ABSOLUTE/PATH/TO/YOUR/PROJECT/node_modules/@modelcontextprotocol/server-playwright/dist/index.js"
      ],
      "env": {
        "BROWSER": "chromium" // 可选：指定默认浏览器，还可是 "firefox" 或 "webkit"
      }
    }
  }
}

配置参数深度解析 ：

  • claude.code.mcpServers : 这是Claude Code扩展定义的配置项，值是一个对象，每个键值对代表一个MCP Server。
  • playwright : 这是我们给这个Server起的名字，可以自定义，稍后Claude的对话中会用到这个名字来指代工具集。
  • command : 启动Server的命令。这里我们使用 node 来执行一个JavaScript文件。
  • args : 传递给命令的参数。这里最重要的就是 指向Playwright MCP Server入口文件的绝对路径 。你必须将 /ABSOLUTE/PATH/TO/YOUR/PROJECT 替换成你实际安装 @modelcontextprotocol/server-playwright 的目录路径。例如： “C:\\Users\\YourName\\Projects\\playwright-mcp\\node_modules\\...” 或 /home/yourname/projects/playwright-mcp/node_modules/... 。
    • 如何找到这个路径？ 在你安装包的目录下，运行 npm list @modelcontextprotocol/server-playwright 可以查看其精确位置。通常入口文件在 dist/index.js 。
  • env : 可传递给Server进程的环境变量。这里我们设置 BROWSER 来指定默认启动的浏览器类型。不设置的话，可能默认使用Chromium。

实操心得 ：路径错误是导致连接失败的最常见原因。建议先直接在终端用 node [绝对路径]/dist/index.js 命令试运行一下Server，如果能启动并监听端口（通常会有日志输出），说明路径和包本身没问题。另外，Windows用户注意路径中的反斜杠需要转义（ \\ ）或直接使用正斜杠（ / ），JSON字符串中要正确处理。

3.2 验证连接与首次对话

保存 settings.json 后，需要 重启VS Code 以使配置生效。重启后，打开Claude Code侧边栏。

  1. 观察状态 ：如果配置正确，Claude Code通常会在后台自动启动你配置的MCP Server。你可以查看VS Code底部状态栏，或者Claude Code面板，有时会有连接状态的提示。
  2. 发起测试对话 ：在Claude Code的聊天框中，输入简单的问候并尝试触发工具。例如：
    • 你：“嗨，我们现在可以开始用Playwright工具了吗？”
    • Claude的回复可能会展示它现在可用的工具。或者，你可以更直接地请求：
    • 你：“请使用playwright工具打开浏览器，访问百度首页。”
    • 如果一切正常，Claude会理解你的意图，并在回复中表明它将要或已经执行了某个操作。它可能会生成一个包含工具调用的思考过程，并最终给出结果，比如“已使用Playwright导航至 https://www.baidu.com”。

连接成功的标志 ：Claude在回复中，明确提到了“使用playwright工具”，并且其回复内容是基于浏览器操作的真实结果（例如页面标题、某个元素的文本），而不是凭空猜测的描述。你可能会听到电脑风扇轻微转动（浏览器在后台启动），或者在某些配置下，会看到一个弹出的浏览器窗口。

4. 核心自动化操作实战详解

配置成功只是开始，真正的威力在于如何通过自然语言指挥Claude完成复杂的浏览器操作。下面我们分解几个核心场景。

4.1 基础导航与页面操作

这是最常用的功能，模拟用户最基本的浏览行为。

典型指令与Claude理解 ：

  • 你 ：“用playwright打开谷歌浏览器，去一下GitHub官网。”
  • Claude的思考与行动 ：Claude会解析出关键意图：“打开浏览器”（工具： launch_browser ）和“导航到URL”（工具： navigate_browser ）。它可能会先调用启动工具，指定浏览器为 chromium ，然后调用导航工具，传入URL https://github.com 。执行成功后，它会回复你“已在Chromium浏览器中打开GitHub首页”。
  • 你 ：“在当前页面里，点击那个‘Sign in’按钮。”
  • Claude的思考与行动 ：Claude需要定位元素。它可能会调用 find_element 或 click_element 工具。这里有一个关键点： Claude如何知道哪个是‘Sign in’按钮？ 它可能会尝试使用文本选择器（如 text=Sign in ）或者角色选择器（如 role=button[name=“Sign in”] ）。这是MCP Server和Playwright API封装要解决的问题。通常，Server提供的工具会允许通过多种方式定位元素。

实操要点 ：

  • 页面加载等待 ：在导航后立即操作元素常会失败，因为页面还没加载完。好的MCP Server工具会内置智能等待。你在给指令时也可以更明确：“等页面完全加载后，再找到搜索框。”
  • 浏览器选择 ：你可以在指令中指定浏览器，如“用firefox打开...”。如果配置中指定了默认浏览器，不指明时就会用它。

4.2 元素定位与交互

精准定位页面元素是自动化的灵魂。通过自然语言描述元素，对Claude和MCP Server都是挑战，但也是展现其智能的地方。

描述元素的技巧 ：

  1. 文本内容 ：最直接的方式。“点击写着‘提交申请’的按钮”、“找到包含‘用户协议’的链接”。
  2. 视觉位置与关系 ：“在用户名输入框下面的那个密码框”、“表格里第一行、第三列的那个单元格”。
  3. 属性特征 ：“找到那个蓝色的、圆角的按钮”、“ID是‘search-input’的输入框”。

Claude与Server的协作 ：当你给出“填写用户名”的指令时，Claude需要：

  1. 判断当前页面上下文（可能在登录页）。
  2. 推断“用户名”对应的HTML元素很可能是一个 <input> 标签，且其 type 可能是 text ， name 或 placeholder 属性可能包含“user”、“name”、“login”等词。
  3. 调用如 find_element 工具，并尝试构造一个Playwright选择器，比如 input[type=“text”]:near(:text(“用户名”)) 或 input[name=“username”] 。具体的选择器语法取决于Server的实现。
  4. 找到元素后，再调用 fill_text 工具输入你指定的内容。

复杂交互示例 ：

  • 你 ：“在刚才的GitHub搜索框里，输入‘Playwright MCP’然后按回车搜索。”
  • Claude执行链 ： find_element (选择器定位搜索框) -> fill_text (输入文本) -> press_key (模拟按下Enter键)。
  • 你 ：“把搜索结果第一个仓库的名字和星数复制下来告诉我。”
  • Claude执行链 ：这需要更复杂的解析。它可能需要先 find_elements 获取所有结果项，然后对第一个结果项再执行 find_element 分别定位仓库名和星数元素，最后用 get_text 工具获取文本内容。

注意事项 ：网页结构是动态的，仅靠文本描述有时会定位失败。如果Claude多次尝试失败，你可以提供更精确的信息。例如，打开VS Code的开发者工具（F12），检查元素，获取其更稳定的选择器（如 data-testid ， 唯一的ID， 或者精确的CSS路径），然后告诉Claude：“请使用选择器 [data-testid=‘search-input’] 来定位搜索框。” 这相当于你在教Claude如何更准确地操作。

4.3 数据抓取与断言验证

这个场景结合了自动化和测试验证，非常实用。

数据抓取流程 ：

  1. 导航到目标列表页 。
  2. 定位列表容器 ：指令如“找到所有商品条目”。
  3. 遍历与提取 ：Claude可能需要调用循环逻辑（这取决于Server工具是否支持批量操作）。理想情况下，Server提供一个如 get_elements_text 的工具，可以一次性获取多个元素的文本。否则，Claude可能会尝试描述如何通过选择器获取所有项。
  4. 结构化输出 ：Claude将抓取到的文本列表整理后，在聊天框中呈现给你。你可以进一步要求：“把它们整理成JSON格式，包含name和price字段。”

断言验证示例（自动化测试核心） ：

  • 你 ：“去我的产品详情页，验证一下标题是不是‘AI自动化测试工具’，并且‘立即购买’按钮是可见可点击的。”
  • Claude执行链 ：
    • navigate_browser -> 产品页URL。
    • find_element -> 定位标题元素。
    • get_text -> 获取标题文本。
    • 断言（逻辑判断） ：Claude在内部比较获取的文本与“AI自动化测试工具”是否一致，并告诉你结果。
    • find_element -> 定位“立即购买”按钮。
    • is_element_visible / is_element_enabled -> 检查元素状态（如果Server提供了此类工具）。
    • 综合所有检查结果，给出验证结论：“标题验证通过，按钮状态验证通过。”

这个过程生动展示了如何将测试用例的自然语言描述，直接转化为可执行的自动化验证步骤，无需手动编写一行测试代码。

5. 高级技巧与集成应用场景

5.1 编写可复用的测试脚本草稿

虽然“边聊边测”很酷，但最终我们可能希望将稳定的操作流程固化成可重复执行的脚本。Claude Code在这里可以成为一个强大的“脚本编写助手”。

操作流程 ：

  1. 探索与记录 ：针对一个测试场景，通过自然语言指令指挥Claude完成全部操作。例如，完成一个完整的登录-检查仪表盘-退出的流程。
  2. 请求生成脚本 ：操作成功后，向Claude提出请求：“请将刚才我们完成的登录到退出的所有操作，生成一个完整的Playwright（Python/JavaScript）测试脚本。”
  3. Claude生成代码 ：基于它刚刚通过MCP工具调用的实际序列，以及它对Playwright API的了解，Claude会生成一段结构清晰、包含正确选择器和等待逻辑的代码。这段代码的质量通常会比单纯让它凭空想象高得多，因为它基于了一次成功的“实践”。
  4. 优化与存储 ：你将生成的代码复制到一个新的 .spec.js 或 .py 文件中，进行必要的微调（比如添加更详细的断言、错误处理），然后就得到了一个可纳入你测试套件的正式脚本。

这种方法将“探索性测试”和“脚本编写”无缝衔接，大大提升了测试开发的效率。

5.2 与现有测试项目结合

你不需要完全抛弃现有的Playwright测试框架。这个组合可以作为现有项目的强力补充。

  • 快速调试与元素定位器生成 ：当你在编写或调试一个复杂的测试用例，为某个元素找不到稳定的选择器而头疼时，可以切换到Claude Code。打开被测页面，然后告诉Claude：“点击这个弹窗里的确认按钮。” Claude通过MCP操作成功后，你可以追问：“你刚才点击那个按钮使用的Playwright选择器是什么？” Claude可能会回复它实际调用的选择器字符串，这为你自己的脚本提供了直接可用的参考。
  • 生成测试数据 ：你可以让Claude操作浏览器，在后台管理界面手动（但通过指令自动）创建一条测试订单或一个测试用户，然后抓取这条数据的ID等信息，再将这些信息用于你后续的API测试或更复杂的场景测试中。
  • 辅助代码审查 ：对于团队编写的Playwright测试代码，你可以将代码片段丢给Claude，让它分析潜在问题，或者询问“这段代码在点击前缺少等待，如何优化？”它不仅能给出建议，还能通过MCP快速执行优化后的代码逻辑进行验证。

5.3 复杂逻辑编排与错误处理

随着操作变复杂，你需要更精细地控制流程。

  • 条件判断 ：你可以用自然语言描述条件逻辑。“如果页面出现了‘加载失败’的提示，就点击‘重试’按钮；否则，继续检查下一个模块。” Claude需要理解“如果...否则...”的结构，并将其转化为一系列的工具调用决策。这要求Claude具备一定的逻辑推理能力，并在工具调用失败时能执行备用分支。
  • 循环操作 ：“遍历这个表格的每一行，把第二列的数据都读出来。” Claude需要理解“遍历”和“每一行”的概念，并可能通过组合 find_elements （获取所有行）和循环调用 get_text （针对每一行的特定列）来实现。
  • 错误处理与恢复 ：这是目前通过纯自然语言交互的难点。如果Claude执行点击时元素不存在，MCP Server会返回错误。Claude可能会在回复中告诉你错误信息，并停止后续操作。你可以介入指导：“那个按钮可能还没加载出来，先等2秒再试试。” 更高级的用法是，你在初始指令中就预设容错：“尝试点击保存按钮，如果5秒内没找到，就刷新页面再试一次。” 这需要Claude和Server工具支持更复杂的指令编排，目前可能还需要较多的人工干预。

6. 常见问题、排查技巧与优化实践

6.1 连接与启动故障排查

问题现象 可能原因 排查步骤与解决方案
Claude Code侧边栏提示MCP Server连接失败或未找到工具。 1. settings.json 中Server路径错误。
2. 依赖未安装完整。
3. 端口冲突或Server进程启动失败。		 1. 检查路径 ：在终端中手动执行 node [你的绝对路径]/dist/index.js ，看是否报错。确保路径中的斜杠和转义正确。
2. 检查依赖 ：在Server目录下运行 npm list 确保 @modelcontextprotocol/server-playwright 已列出。可尝试 npm install 重装。
3. 查看日志 ：打开VS Code的输出面板（Output），选择“Claude Code”或“MCP”相关的日志通道，查看具体的错误信息。
发送指令后，Claude回复“我不知道如何操作”或根本不提Playwright工具。 1. Claude未成功识别MCP Server提供的工具集。
2. 指令描述过于模糊，Claude未关联到浏览器操作。		 1. 重启大法 ：完全关闭VS Code再重新打开，确保配置加载和Server进程启动。
2. 明确指令 ：在指令中明确包含“使用playwright工具”、“用浏览器打开”等关键词。可以先问：“你现在可以使用哪些工具？” 看Claude是否列出Playwright相关工具。
3. 检查配置名 ：确认在 settings.json 里配置的Server名字（如 playwright ），尝试在指令中指定：“请调用 playwright 工具打开浏览器。”
浏览器闪退或无法启动。 1. Playwright浏览器未安装或损坏。
2. 系统缺少依赖（多见于Linux）。
3. 已有浏览器进程冲突。		 1. 重装浏览器 ：在Server目录运行 npx playwright install --force 。
2. 安装系统依赖 ：参考Playwright官方文档，运行其提供的安装脚本（如 npx playwright install-deps ）。
3. 关闭冲突进程 ：手动关闭所有Chromium/Chrome浏览器实例。

6.2 操作执行过程中的典型问题

问题现象 可能原因 排查步骤与解决方案
Claude报告“找不到元素”或“超时”。 1. 页面未加载完成就进行操作。
2. 元素选择器不准确或页面结构已变。
3. 元素在iframe或shadow DOM内。		 1. 增加等待 ：在指令中加入等待，如“等页面完全加载后，再点击...”。或让Claude先执行一个等待操作（如果Server有 wait 工具）。
2. 提供更精确选择器 ：使用开发者工具检查元素，提供ID、 data-* 属性等更稳定的选择器给Claude。
3. 处理特殊上下文 ：对于iframe，需要先切换上下文。指令可以是：“先切换到名为‘paymentFrame’的iframe内部，再填写卡号。”
操作顺序错乱或结果不符合预期。 1. Claude对指令的解析出现歧义。
2. 异步操作未等待完成。		 1. 拆分复杂指令 ：将“登录然后搜索然后下单”拆分成多个简单的指令依次执行，每一步确认成功后再进行下一步。
2. 分步验证 ：不要在一个指令中包含太多动作。每一步操作后，让Claude反馈结果（如“点击后，页面上出现了什么文字？”），确保状态正确再继续。
性能缓慢，每个指令响应都很慢。 1. 每次指令都启动新浏览器实例。
2. Claude思考或网络延迟。		 1. 利用上下文 ：确保Claude在一个对话中连续操作，MCP Server通常会保持浏览器会话打开。
2. 指令合并 ：尽量用一个指令完成一个连贯的小场景，减少来回交互次数。

6.3 安全与最佳实践建议

  1. 环境隔离 ：建议在独立的目录或项目中进行Playwright MCP的配置和实验，避免影响你主要的开发或测试环境。可以使用不同的VS Code工作区。
  2. 谨慎对待生产环境 ：绝对不要将配置了浏览器自动化能力的AI助手直接连接到生产网站或拥有敏感操作权限的后台。最好在测试、预发布环境或本地开发的演示网站上进行操作。
  3. 指令明确具体 ：给Claude的指令越清晰、越具体，成功率越高。使用明确的URL、精确的按钮文本、稳定的元素属性（如 data-testid ）来辅助描述。
  4. 结合传统编程 ：认识到这种交互模式的局限性。它非常适合探索、原型构建和辅助编写脚本，但对于需要复杂逻辑、严格错误处理和高可靠性的生产级自动化流程，最终仍需要转化为由你完全控制的、经过精心编写的传统代码。
  5. 保持组件更新 ：Claude Code扩展、Playwright库和MCP Server都在快速迭代。定期更新到稳定版本，可以获取新功能、性能提升和Bug修复。

这个“边聊天边自动化测试”的模式，其魅力在于它提供了一种全新的、低门槛的与浏览器交互的方式。它不能完全替代严谨的自动化测试开发，但作为一个强大的辅助工具、一个快速验证想法的手段、一个生动教学演示的途径，它的价值是毋庸置疑的。从我个人的体验来看，最大的收获不是用它替代了多少编码工作，而是在与它交互的过程中，迫使自己更清晰、更结构化地去思考和描述测试步骤，这种思维训练反过来也让我在编写传统测试代码时更加得心应手。刚开始玩的时候，可能会在环境配置和元素定位上踩点坑，但一旦跑通，看到浏览器随着你的文字指令而活动起来，那种感觉还是非常奇妙的。不妨就从打开VS Code，安装第一个插件开始试试吧。

Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

cover

【安心陪诊 Agent】老年陪诊需求分析：家属、老人、医生三方到底缺什么

avatar AI Agent技术社区
cover

生产级AI Agent系统架构实战，从模块拆解到代码落地与K8s部署

avatar AI Agent技术社区
cover

深度解耦的 AI 新生态：大模型上下文协议（MCP）全栈落地实战

avatar AI Agent技术社区