Logo Vincent
返回文章列表

Claude Code + Playwright MCP：AI 终于能"看见"页面了

Claude
Claude Code + Playwright MCP：AI 终于能"看见"页面了

一个 bug，修了 5 次

事情是这样的。

我的项目里有一个 VIP 升级弹窗，用的 Ant Design Modal，里面放了两张套餐卡��——Free Plan 和 VIP Plan。

某天我发现，这两张卡片溢出了 Modal 的边界，底部的按钮被截断了。

很常见的 CSS 问题对吧？我让 Claude Code 来修。

第一次，它加了 maxHeight: 'calc(100vh - 200px)'，没用。

第二次，它改成了 overflow: auto，出现了难看的滚动条。

第三次，它把 Ant Design 的 <List> 组件换成了普通 <div>，想消除虚拟列表的滚动条。

第四次，它又把 Modal body 的高度约束删了。

第五次……

dfef989 fix(nweb): update VIP button color to match theme and fix modal overflow
d399709 fix(nweb): fix pricing modal body overflow with calc-based maxHeight
68395c4 fix(nweb): fix pricing modal body overflow with calc-based maxHeight
b736345 fix(nweb): remove modal body height constraint to fix scrollbar
b4118b2 fix(nweb): replace antd List with plain div to eliminate virtual-list scrollbar

5 个 fix commit，问题还在。

为什么反复修不好？

原因很简单：Claude Code 看不到页面。

它能读代码，能分析 CSS 属性，能推理布局逻辑。但它不知道页面实际渲染出来长什么样。

就好比一个闭着眼睛的修理工，你告诉他”管道漏水了”，他能根据经验猜一个方案，但他看不到水到底从哪里漏的。

所以它每次修的时候，都是在”猜”——猜 maxHeight 够不够，猜 overflow 该设什么值，猜是不是 List 组件的问题。每次改完都觉得应该没问题了，但实际效果它完全不知道。

Playwright MCP：给 AI 装上眼睛

然后我想起了一个东西：Playwright MCP。

Playwright 本身是微软开源的浏览器自动化工具，能模拟用户操作浏览器。而 Playwright MCP 是它的 MCP Server 版本，装上之后，Claude Code 就能：

  • 打开浏览器，导航到任意 URL
  • 截图，真正”看到”页面渲染效果
  • 点击按钮，模拟用户交互
  • 执行 JS，获取 DOM 元素的实际尺寸
  • 填表单、拖拽、等待元素出现……

简单说，Claude Code 从一个”只能读代码的 AI”，变成了一个”能打开浏览器实际操作的 AI”。

安装配置

安装非常简单。运行 /mcp 命令，添加 Playwright MCP Server：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@anthropic-ai/mcp-server-playwright@latest"]
    }
  }
}

加完之后 Claude Code 就多了一堆 browser 相关的工具：browser_navigate、browser_click、browser_snapshot、browser_take_screenshot、browser_evaluate 等等。

实战：一次定位，一次修复

装上 Playwright MCP 后，我再让 Claude Code 来修这个 bug。

第一步，它自己启动了 dev server，然后用 Playwright 打开了 http://localhost:3000：

await page.goto('http://localhost:3000');

第二步，它找到 “Upgrade VIP” 按钮并点击，打开 Modal：

await page.getByRole('button', { name: 'crown Upgrade VIP' }).click();

第三步，它截了一张图，真正”看到”了问题——两张卡片确实顶到了 Modal 底部边缘。

第四步，它用 browser_evaluate 执行 JS，直接测量了 DOM 尺寸：

{
  "modalBody": { "height": 480, "scrollHeight": 508 },
  "cards": [{ "height": 506 }, { "height": 508 }]
}

数据一目了然：Modal body 480px，卡片 508px，溢出了 28px。

第五步，它继续深入，检查了 Row、Col 和卡片的尺寸关系：

{
  "row": { "height": 456 },
  "cols": [{ "height": 456 }, { "height": 456 }],
  "cards": [{ "height": 506 }, { "height": 508 }]
}

Col 高度 456px，但卡片 506/508px——卡片溢出了 Col。根因找到了：卡片设了 height: '100%'，但内容比 Col 高，height: 100% 不会限制内容，反而让 Col 无法被内容撑开。

最终修复，两行改动：

  1. 把 Row 的垂直 gutter 从 [24, 24] 改成 [24, 0]（水平布局不需要垂直间距）
  2. 把卡片的 height: '100%' 改成 flex: 1，Col 加 display: 'flex'（让 flex 布局自然撑开）

修完之后，它再次截图 + 测量验证：

{
  "modalBody": { "height": 480, "scrollHeight": 480 },
  "cards": [{ "height": 456 }, { "height": 456 }]
}

scrollHeight === height，零溢出。问题彻底解决。

前后对比

没有 Playwright MCP 时：

  • Claude Code 只能读代码猜问题
  • 5 次 commit，反复试错
  • 每次都是”我觉得应该修好了”，但实际没有

有了 Playwright MCP 后：

  • 截图看到真实渲染
  • JS 测量拿到精确数据
  • 一次定位根因，一次修复
  • 修完自己验证，确认无溢出

什么场景该用 Playwright MCP

不是所有 bug 都需要 Playwright MCP。纯逻辑 bug、接口问题、构建错误，Claude Code 看代码就能搞定。

但这些场景，强烈建议装上：

  • CSS 布局问题：溢出、对齐、响应式，光看代码真猜不准
  • UI 交互 bug：弹窗、下拉框、动画，需要实际操作才能复现
  • 视觉回归：改完代码后想确认页面没被搞坏
  • E2E 验证：不只是修完代码，还要验证用户流程是通的

总结

这次 bugfix 让我有一个很深的感触：

AI 写代码的能力已经很强了，但它最大的短板不是”不会写”，而是”看不见”。

它能写出正确的 CSS，但如果看不到渲染效果，就只能靠猜。猜对了是运气，猜错了就是反复 commit。

Playwright MCP 补上了这块短板。让 AI 能看到页面、能操作浏览器、能验证结果——这才是完整的开发闭环。

如果你也在用 Claude Code 做前端开发，这个 MCP 是必装的。

相关推荐

AI-first 创业公司，为什么只需要一种编程语言？

技术架构越简单 = AI Coding 效率越高。从 Java 的"防人"设计到 TypeScript 全栈通吃，聊聊 AI 时代创业公司的编程语言选择。

cc-ping：一行命令 Ping 所有 Claude Code 配置

用多个 Claude Code API Key 或中继？cc-ping 帮你管理配置、一键切换，还能并行 Ping 所有节点比速度。

震惊！程序员用这个工具，4分钟干完95分钟的活！效率暴涨24倍

躺床上发3条消息，4分钟搞定3个项目。传统方式需要95分钟，这就是冷兵器和热兵器的差距。

CCBot - 研发提效 24 倍

通过 IM 机器人控制 Claude Code，3 个项目 4 分钟全部搞定。传统编程需要 95 分钟，效率提升 24 倍。

Claude Code /add-dir：被低估的 Monorepo 神器

Claude Code 默认只能看到当前目录。/add-dir 打破这个限制——分享我每天跨 5 个仓库使用的经验。

Claude Code 省 Token 小技巧：感叹号的妙用

一个简单却容易被忽略的技巧——用感叹号直接执行命令，省 token、提速度、更可控。

我做了个机器人，让团队在飞书里用 Claude Code

CCBot 让你的团队在飞书群聊里直接用 Claude Code——不需要终端、不需要 SSH。开源、自部署、五分钟搞定。

Claude Code /btw 命令详解：不打扰主线的快问快答

详细介绍 Claude Code 的 /btw 命令——它是什么、怎么用、什么时候该用，以及它和子代理、/compact 的区别。

Claude Code /compact：释放上下文，不丢进度

任务做到一半上下文满了？/compact 帮你压缩对话继续干活——和 /clear、/rewind 的区别一次讲清。

Claude Code /config：一文搞懂所有可调设置

用 Claude Code 却从没打开过 /config？这篇带你逐项拆解——从权限模式到自动压缩，从主题切换到通知配置，帮你打造最顺手的 AI 编程环境。

Claude Code /context：你的上下文都被什么吃了？

对话到一半 Claude Code 说上下文不够了？/context 用一张可视化网格告诉你：上下文被什么占了、占了多少、怎么优化。

Claude Code /diff：这次对话改了什么，一目了然

Claude Code 帮你改了一堆文件，但你不确定到底改了什么？/diff 用交互式界面展示所有改动——既有 git 视角的全量 diff，也有按对话轮次拆分的逐步 diff。

Claude Code /fast：同样的 Opus，两倍速——值不值？

/fast 不会降级模型，还是 Opus，只是更快。什么时候该开、什么时候该关，以及实际体验差异。

Claude Code 引用外部知识的最佳实践：GitHub MCP + Context7

用 GitHub MCP 和 Context7 MCP 两个工具组合，解决 Claude Code 知识过时导致的代码错误问题。

Claude Code /hooks：让 AI 按你的规矩办事

想在 Claude Code 执行命令前自动检查？想在任务完成后自动通知？/hooks 让你用脚本、AI 甚至 HTTP 请求，在关键节点插入自定义逻辑。

Claude Code /init：10 秒自动生成 CLAUDE.md

别再手写 CLAUDE.md 了。看看 /init 自动生成的效果、怎么自定义输出，以及一个让 Claude Code 效率翻倍的小技巧。

Claude Code MCP：让 AI 连接 GitHub、数据库等一切工具

MCP 把 Claude Code 从代码阅读器升级为全栈 Agent。哪些 MCP 服务器值得装、配置怎么写，实测分享。

Claude Code /memory 详解：让 AI 真正记住你的项目

详细介绍 Claude Code 的 /memory 命令和记忆系统——CLAUDE.md 手动指令、Auto Memory 自动记忆、模块化规则，让 Claude 跨会话记住项目规范和个人偏好。

Claude Code /model：Opus、Sonnet、Haiku 怎么选？

不是每个任务都需要 Opus。怎么切换模型、哪个场景用哪个、怎么省 token 又不掉质量。

Claude Code /permissions：谁能干什么，你说了算

每次 Claude Code 要跑命令都弹窗问你？嫌烦又不敢全放开？/permissions 帮你精细控制每个工具的权限——该放的放，该拦的拦。

Claude Code /plan 详解：先想清楚再动手

详细介绍 Claude Code 的 /plan 命令和 Plan Mode——只读规划模式，让 Claude 先分析代码、制定方案，确认后再动手，避免复杂任务翻车。

Claude Code /resume 命令详解：别让对话白聊

详细介绍 Claude Code 的 /resume 命令——恢复历史对话、管理会话、实用技巧，让你的每一轮对话都不浪费。

Claude Code /review：让 AI 帮你做 Code Review

提了 PR 没人看？想在合并前多一道把关？/review 让 Claude Code 像一个资深开发者一样审查你的代码——还有 /ultrareview 和 /security-review 两个进阶选择。

Claude Code Skills 详解：打造你的专属命令库

详细介绍 Claude Code 的 Skills 功能——创建自定义斜杠命令、复用提示词模板、共享团队最佳实践，让 AI 编程更高效更一致。

Claude Code /stats：看看 AI 到底帮你写了多少代码

好奇 Claude Code 到底写了多少行代码？/stats 给你完整数据——token、编辑次数、工具调用，教你怎么看。

Claude Code /status 命令详解：一眼看清会话全貌

详细介绍 Claude Code 的 /status 命令——它是什么、怎么用、能看到哪些信息，以及它在日常工作流中的实际价值。

Claude Code /tasks 命令详解：后台任务尽在掌控

详细介绍 Claude Code 的 /tasks 命令——查看后台任务、管理并行 Agent、掌控长时间运行的进程，让多任务开发井井有条。

Claude Code /usage 命令详解：你的额度还剩多少

详细介绍 Claude Code 的 /usage 命令——查看用量、了解限额、避免突然被限速，让你对自己的额度心中有数。

Claude Code /vim：在 AI 编程助手里用 Vim 键位

习惯了 Vim 的操作方式？/vim 让你在 Claude Code 的输入框里用 hjkl 移动、dd 删行、ciw 替换单词——不用改变肌肉记忆。

Claude Code 使用指南：从安装到实战，一篇就够（2026）

用了半年 Claude Code 的经验总结——5 分钟安装配置、最常用的命令、CLAUDE.md 编写技巧，以及没人告诉你的实战心得。

Claude 全家桶：从聊天到写代码到自动办公，一文讲清楚

一篇文章带你了解 Anthropic 的 Claude 全家桶——Claude.ai、Claude Code、Claude Cowork，以及 Opus、Sonnet、Haiku 三大模型家族。

Claude Code /agents 详解：自定义 AI 子代理，各司其职

详细介绍 Claude Code 的 /agents 命令——查看、管理和创建自定义 Agent，让不同任务由专门的 AI 角色来执行，从代码探索到架构规划各司其职。

Claude Code /doctor 详解：一键诊断你的开发环境

详细介绍 Claude Code 的 /doctor 命令——自动检测安装状态、API 连接、MCP 配置、上下文用量等问题，帮你快速定位和修复环境故障。

Claude Code /effort 详解：控制 AI 思考的深度

详细介绍 Claude Code 的 /effort 命令——调节 Claude 的推理努力程度，在速度和质量之间找到最佳平衡点，让每一次对话都恰到好处。

Claude Code /cost 详解：你的 AI 编程到底花了多少钱

详细介绍 Claude Code 的 /cost 命令——实时查看会话 API 成本，了解各模型定价和 Token 消耗明细，让每一分钱都花得明明白白。

Claude Code /export 详解：把 AI 对话带走

详细介绍 Claude Code 的 /export 命令——将对话导出为文件或复制到剪贴板，方便分享、存档和复盘，让每一次有价值的对话都不浪费。

Claude Code /rewind 详解：AI 改错了？一键回退

详细介绍 Claude Code 的 /rewind 命令——将代码和对话回退到任意历史节点，支持只回退代码、只回退对话、或两者同时回退，是你和 AI 协作时的后悔药。

Claude Code /plugin 详解：给你的 AI 编程助手装插件

详细介绍 Claude Code 的 /plugin 命令——管理插件的安装、启用、禁用和更新，通过插件扩展 Claude Code 的命令、技能、Agent 和 Hook，打造你专属的 AI 编程工具链。

Claude Code /theme 详解：给你的终端换个好看的皮肤

详细介绍 Claude Code 的 /theme 命令——6 种预设主题 + 自动模式，支持深色/浅色、色盲友好、ANSI 兼容，60+ 色值覆盖终端全部 UI 元素。

Claude Code /insights 详解：用 AI 分析你自己用 AI 的方式

详细介绍 Claude Code 的 /insights 命令——五阶段数据分析流水线、七大洞察章节、多维度会话统计，用 Claude Opus 生成专属 HTML 使用报告。

Claude Code /rename 详解：给你的会话取个有意义的名字

详细介绍 Claude Code 的 /rename 命令——手动命名、AI 自动生成（Haiku 模型）、启动参数命名、Plan 模式自动命名，以及双标题系统与 Bridge 同步机制。

Claude Code settings.json 详解（一）：配置文件在哪里、谁说了算

全面介绍 Claude Code 的配置文件体系——五个配置来源的路径、优先级规则、数组合并与单值覆盖的区别、企业管理设置的多种下发方式。

Claude Code settings.json 详解（二）：permissions 权限系统全解析

深入解析 Claude Code 的 permissions 配置——allow/deny/ask 三类规则、通配符语法、MCP 工具权限、defaultMode 各模式含义，以及 additionalDirectories 的作用。

Claude Code settings.json 详解（三）：hooks 钩子全解析

深入解析 Claude Code 的 hooks 配置——四种钩子类型、核心事件（PreToolUse/PostToolUse/Stop/Notification）、stdin/stdout 协议、exit code 语义，以及实用配置示例。

Claude Code settings.json 详解（四）：env、模型、认证与其他实用字段

全面介绍 Claude Code settings.json 中的 env 环境变量注入、模型配置、身份认证辅助、Git 提交署名、会话清理、语言与界面、思考深度、自动更新、记忆系统等实用字段。

Claude Code Agent Loop：拆解 AI 编程助手的心脏

Claude Code 是怎么一步步理解你的需求、调用工具、自我修复的？从源码角度拆解 Agent Loop 的核心架构——流式响应、并行工具执行、自动压缩、错误恢复，一次讲透。

© 2026 vincentqiao.com . 保留所有权利。