还在为自动化测试写代码？3 步用自然语言搞定 Playwright MCP！

1. 前言：当你要测试时，想到了谁

🤔 当你需要测试一个网页功能时，传统方式是怎样的？

💩 人力古法测试，人手点击页面

💩 写自动化测试工具 Playwright API / Selenium 的脚本，学习成本太高

💩 更多的时候，是 完全没有测试代码，靠开发者的自觉

🚀 是否有一种更加低门槛的自动化测试的方法呢？准备好体验 AI 驱动自动化的魅力了吗？让我们开始吧！

2. 安装篇：配置 Playwright MCP

⚠️ 重要提醒：统一缓存设置（macOS）, 为避免重复下载 ~1GB 的浏览器文件，建议先设置全局缓存！

2.1 前置准备

1. claude code 安装
2. 环境变量的设置

# 1. 编辑配置文件
vim ~/.zshrc

# 2. 添加环境变量（文件末尾）
export PLAYWRIGHT_BROWSERS_PATH=/Users/YOUR_HOME/.cache/ms-playwright

# 3. 保存并退出，重新加载
source ~/.zshrc

# 4. 验证配置
echo $PLAYWRIGHT_BROWSERS_PATH
# 应该输出：/Users/YOUR_HOME/.cache/ms-playwright

2.2 安装依赖

# 1. 安装 Playwright mcp 包（固定版本）
npx '@playwright/mcp@1.55.0'

# 2. 安装浏览器驱动（共享缓存）
npx playwright install chromium

# 3. 添加 MCP 工具 到 claude code 中
claude mcp add playwright npx '@playwright/mcp@1.55.0'

2.3 验证安装

步骤1：验证基础工具

# 验证 Playwright 版本
npx playwright --version
# 输出：Version 1.55.0

# 验证 MCP 工具（Claude Code 中）
claude mcp list | grep playwright
# 应该看到 playwright 工具已添加
playwright: npx @playwright/mcp@1.55.0 - ✓ Connected

步骤2：快速验证 MCP（简单例子）

🚀 在 Claude Code 中， 🙋 prompt： （ 输出都有精简，伪输出，理解逻辑即可）

访问 https://www.baidu.com 并截图

用户：访问 https://www.baidu.com 并截图

> 访问 https://www.baidu.com 并截图

⏺ 我来帮你访问百度并截图。

⏺ playwright - Navigate to a URL (MCP)(url: "https://www.baidu.com")

⏺ playwright - Take a screenshot (MCP)(filename: "baidu_homepage.png", fullPage: true)
     await page.screenshot({
     … +7 lines (ctrl+o to expand)
  ⎿  [Image]

⏺ 已成功访问百度首页并截图！

  截图已保存到：/Users/robinzhang/Documents/projects/practice_claude_code/playwright/.playwright-mcp/baidu_homepage.png

🎉 结果符合预期，浏览器被大语言给驱动了。

---

3. 实战篇：MCP 驱动浏览器访问百度并搜索

🚀 在 Claude Code 中， 🙋 prompt：

访问 https://www.baidu.com, 在搜索框输入 'pets',点击搜索按钮,点击第2页,截取全页面截图

⏺ 我会帮你完成这个任务：访问百度，搜索"pets"，进入第2页，然后截取全页面截图。

⏺ playwright - Navigate to a URL (MCP)(url: "https://www.baidu.com")

⏺ 现在我在百度首页。接下来我需要在搜索框中输入"pets"并点击搜索按钮。

⏺ playwright - Type text (MCP)(element: "搜索框", ref: "e38", text: "pets")

⏺ playwright - Click (MCP)(element: "搜索按钮", ref: "e76")

⏺ Search(pattern: "第2页|2", path: "~/.claude/projects/-Users-robinzhang-Documents-projects-practice-claude-code-

⏺ 好的！搜索结果已经加载。我可以看到页面底部有分页链接。现在我需要找到并点击第2页。

⏺ 完美！我们已经成功进入第2页。我可以看到页面底部的分页显示"上一页"、"1"、"2"（高亮显示）、"3"等，确认当前在第2页。现在我将截取全页面截图。

⏺ playwright - Take a screenshot (MCP)(fullPage: true, filename: "baidu_pets_page2_fullpage.png")
  ⎿ ### Ran Playwright code
⏺ 任务完成！我已经成功：
  截图已保存为：baidu_pets_page2_fullpage.png

🎉 结果符合预期，可以看到浏览器可以遵照自然语言的指示，执行一系列的操作。

4. 进阶篇：固化操作成脚本

更进一步，想把上例的自然语言测试转换成固定的可以重复跑的测试代码。

🚀 在 Claude Code 中， 🙋 prompt

把上述的逻辑整成 js playwright 脚本，可以重复跑，请自行验证脚本是否正确

# 还是在 claude code 的对话框，不要离开
> 把上述的逻辑整成 js playwright 脚本，可以重复跑，请自行验证脚本是否正确

...... working

⏺ ✅ 任务完成！

  我已经成功创建并验证了一个可重复运行的 Playwright 脚本。

  📦 已创建的文件

  1. baidu-pets-search.js - 主脚本（已优化）
  2. package.json - 项目配置
  3. README.md - 详细使用说明
  4. 7张截图文件 - 验证过程中生成的

  🎯 脚本功能

  ✅ 访问百度首页
  ✅ 搜索 "pets"
  ✅ 进入第2页
  ✅ 截取全页面截图（带时间戳）

  🚀 运行方法

  # 安装依赖（如果还没安装）
  npm install

  # 运行脚本
  node baidu-pets-search.js
  # 或
  npm run search

# 看下文件结构
robinzhang@MacBook-Air-2 playwright % ls -h
total 56
-rw-------  1 robinzhang  staff   4.5K Dec 29 15:16 baidu-pets-search.js
drwxr-xr-x  6 robinzhang  staff   192B Dec 29 12:02 node_modules
-rw-r--r--  1 robinzhang  staff   1.6K Dec 29 12:02 package-lock.json
-rw-r--r--  1 robinzhang  staff   459B Dec 29 15:06 package.json


# 手动运行一下脚本
node baidu-pets-search.js

robinzhang@MacBook-Air-2 playwright % node baidu-pets-search.js
📍 步骤 1: 访问百度首页...
✅ 成功访问百度首页
📍 步骤 2: 等待页面加载...
✅ 页面加载完成
📍 步骤 3: 直接导航到搜索结果页...
✅ 搜索完成，等待结果加载...
✅ 搜索结果已加载
📍 步骤 4: 点击第2页...
✅ 进入第2页
✅ 第2页内容已加载
📍 步骤 5: 截取全页面截图...
✅ 截图已保存: baidu-pets-page2-2025-12-29T07-24-46-602Z.png

⏳ 等待 3 秒后关闭浏览器...
✅ 浏览器已关闭

🎉 结果符合预期，这份脚本就可以重复的执行。

💡 最佳实践：先用 MCP 验证，再转为代码

5. 总结

5.1 Playwright MCP 有什么好处？

🎯 零门槛

• 直接用自然语言描述操作
• 不需要学习 Playwright API
• 会说话就能自动化

⚡ 高效率

• 传统方式：30 分钟写代码 + 10 分钟调试
• MCP 方式：3 分钟直接完成
• 效率提升 10 倍

🧠 智能化

• AI 自动处理选择器和等待
• 智能识别页面元素
• 自动处理错误和异常

5.2 最佳工作流

💡 想法/需求
    ↓
🤖 MCP 验证（自然语言）
    ↓
✅ 验证成功
    ↓
💻 转为脚本（可选）
    ↓
🔄 重复执行

5.3 思考：用语言也可以严谨表达

核心观点：用语言也是可以严谨的表达，让模型去执行，有时候不需要代码

• 自然语言的精确性：像法律条文一样，语言可以做到严谨无歧义
• AI 理解能力：现代 LLM 能够准确理解复杂指令
• 代码并非必须：不是所有任务都需要编程，描述清楚就足够
• 人机协作新模式：人类负责表达需求，AI 负责执行操作

为什么这样更好？

• 降低技术门槛：更多人能实现自动化
• 提升沟通效率：比写代码更直观
• 减少认知负担：专注业务而非技术细节

---

🎉 行动呼吁

现在就试试看！

按照上面的 3 步，用你的项目需求验证一下效果：

1. 安装 playwright MCP 工具（5分钟）
2. 用自然语言描述需求，完成测试（1分钟）
3. 观看 AI 自动完成（1分钟）

---

📢 最后的最后

欢迎添加 公_主_号，小兵张咔咔， xiaobinzhangkaka，里面有更加详尽的说明，同时分享你的建议和意见，或者你感兴趣的主题，期待与你交流。

我还会持续分享更多 AI + 前端的实用技巧，记得关注我！

你的反馈是我最大的动力！ 🚀

---

欢迎分享你的建议和意见，或者你感兴趣的话题，期待与你交流。

#ClaudeCode #VideoCoding #Skill #Minimax #个人独立开发者