个人知识库

2026-06-03-youtube-claude-code-playwright-browser-automation

10分钟阅读

Claude Code + Playwright CLI：3 个浏览器自动化实战场景

将 Playwright CLI 接入 Claude Code，实现 QA 自动测试、网页信息抓取、登录态自动化操作三大场景——核心价值在于 AI 能自动试错迭代脚本，把浏览器操作编译成可重复执行的 Skill。

基本信息

  • 来源类型：视频（YouTube）
  • 原文位置：raw/articles/2026-06-03-youtube-claude-code-playwright-browser-automation.md
  • 原文 URL：https://youtu.be/J-6pnl5DQg8?si=j8U5SBQRVWn7Bemz
  • 消化日期：2026-06-03
  • 作者：Nathan Harrison（YouTube 创作者）

核心观点

  1. Playwright CLI 优于 Chrome DevTools MCP 的核心原因是 Token 效率：Chrome DevTools MCP 每个工具都有很长的描述，占用大量上下文窗口 Token；Playwright CLI 作为命令行工具，由 Claude Code 直接调用脚本，显著节省 Token，同时功能完整（截图、点击、输入、导航、Cookie 持久化都支持）。

  2. 浏览器自动化的最大价值是”AI 自动试错迭代”：以 QA 测试为例，Claude Code 用一个 prompt 生成多页表单网站，再用 Playwright 自动填写并测试；发现 Bug（如 Enter 键无法跳转到下一步、review 页面不加载）后自动修复代码并重新测试，形成”测试→发现→修复→再测试”的自动闭环。整个过程无需人工干预，经过 2-3 轮迭代后测试通过。

  3. 登录态持久化让浏览器自动化进入真实工作流：通过 Playwright 的 persistent browser profile（使用现有 Chrome 用户数据），首次手动登录后 Cookie 被保存，后续运行自动复用登录态。作者演示了用此方案在 School.com 社区中自动点赞 wins 频道帖子——找到心形 SVG 按钮、识别已点赞（黄色）vs 未点赞（灰色）、跳过已点赞帖子、自动翻页，经过 4-5 次迭代后脚本稳定运行。

  4. 浏览器自动化脚本可以封装成 Skill 实现定时自动执行：作者在 Claude Code Desktop 中设置了定时任务（scheduled tasks），每天自动执行”社区互动”技能——包括浏览 wins 频道并点赞、回复帖子评论、发布每日 AI 新闻摘要、甚至自动发生日祝福帖。每次执行时 AI Agent 真正在浏览器中操作，遇到新问题会自动更新脚本。

  5. Headed vs Headless 模式各有适用场景：Headed（有头）模式打开可见浏览器窗口，适合调试和演示；Headless（无头）模式在后台运行，适合生产环境的定时任务。作者的社区互动 bot 默认使用 Headless 模式运行，用户看不到浏览器弹出。

实操内容保留

操作步骤

Playwright CLI 安装与初始化：

  1. 在 Claude Code 项目目录中进入 Plan Mode
  2. 输入提示词：I want to use Playwright CLI in order to do some browser automation stuff, whether that means testing out web apps or getting screenshots of things, whatever the case, I just need you to figure out how you can install this for me and then go ahead and build a plan and let's do it.
  3. Claude Code 自动执行：初始化项目 → 安装 Playwright → 创建演示脚本 → 运行截图验证安装成功

QA 自动测试闭环：

  1. 让 Claude Code 构建一个多页表单网站（12 个问题，每页一个问题）
  2. 进入 Plan Mode，要求：Spin up a server so that you can actually run this. And then what I want you to do is use your browser use and test it out. So, fill in the fields, click through and if there's any bugs or if there's anything wrong with the functionality of the site, make note so that you can go ahead and fix the actual site itself. I also want you to do this in a headed browser so that I can watch what's going on.
  3. Claude Code 自动运行：启动服务器 → Playwright 打开浏览器 → 逐页填写表单 → 截图记录每一步 → 发现 Bug → 修复代码 → 重启测试
  4. 第二轮测试通过，自动关闭服务器

登录态自动化（以 School.com 社区点赞为例）：

  1. 使用 persistent browser profile 启动浏览器：Playwright 配置使用现有 Chrome 用户数据目录
  2. 首次运行时手动登录账号，登录态自动保存
  3. 给 Claude Code 具体指令：The first thing is that it was hitting the like button like four times. So it ended up not even liking the post. The second thing is once you switch to the wins channel, try to filter the posts by newest.
  4. Claude Code 自动迭代脚本：识别已点赞（黄色）vs 未点赞（灰色）→ 单击点赞 → 跳过已点赞 → 翻页继续

Prompt 模板

初始化浏览器自动化项目：

I want to use Playwright CLI in order to do some browser automation stuff, whether that means testing out web apps or getting screenshots of things, whatever the case, I just need you to figure out how you can install this for me and then go ahead and build a plan and let’s do it.

要求 AI 自动 QA 并修复：

Spin up a server so that you can actually run this. And then what I want you to do is use your browser use and test it out. So, fill in the fields, click through and if there’s any bugs or if there’s anything wrong with the functionality of the site, make note so that you can go ahead and fix the actual site itself. I also want you to do this in a headed browser so that I can watch what’s going on.

课程纠正迭代方向：

A couple issues from the first couple runs. The first thing is that it was hitting the like button like four times. So it ended up not even liking the post. The second thing is once you switch to the wins channel, try to filter the posts by newest. So there’s a little sandwich bar menu option near the channel filter, and that will allow you to change the view to newest. And then you can go through and make sure that all of the posts are liked. You can tell that they are liked because the thumbs up icon on the post will be yellow rather than gray.

关键概念

  • Playwright — 作为浏览器自动化底层引擎，Claude Code 通过 CLI 调用其脚本控制浏览器
  • Claude Code — AI 编程 Agent，在此场景中承担”写脚本 + 测试 + 迭代修复”的全流程角色
  • Skill — 浏览器自动化脚本可封装为可重复执行的 Skill，配合定时任务实现全自动运行
  • Computer Use — 同为 AI 操控屏幕/浏览器的技术方案，但 Playwright CLI 方案 Token 效率更高
  • AI编程开发 — 浏览器自动化是 AI 编程的一个重要子场景

与其他素材的关联

原文精彩摘录

So, when you give a tool as powerful as Claude code, access to literally control a browser, if you think about it, you can actually automate anything. Whether that’s stress testing an app, downloading reports, or even playing a game.

So, the Chrome dev tools MCP takes up so many tokens because there’s so many different tools and each tool has a description. So, that’s how I was like, “Hmm, maybe I don’t want to use the MCP server. Let me just go ahead and try this Playwright CLI.” And it works really well.

What’s really cool is now that you have these Playwright CLI automations that can do things in your browser, and it can save your cookies. So basically you stay logged in. You can actually start to automate things when you use the desktop app… When these scheduled runs actually run, it’s an agent literally like you see in Cloud Code walking through what’s going on.

And remember how I talked about with Playwright CLI, you have to use the skill more and more or run the script more and more in order for it to understand what to click on and where to submit things, and it has to learn how the actual UI works.

相关页面

关系图谱

快速导航

反向链接