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 是必装的。

更多同类文章

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