Frontend Playwright 是一个用于前端视觉验证的浏览器自动化技能，定位为「前端代码的视觉 QA 关卡」，要求在任何 UI 改动交付前使用，自查界面后再交付。
用途
该技能主要用于：创建或修改组件后验证渲染效果；交付代码前做最终 QA 检查；调试 UI 问题时查看浏览器实际状态；以及进行移动端、平板和桌面端的响应式测试。
主要能力
该技能提供一组浏览器工具，覆盖四类操作：
- 导航：browser_navigate 打开页面（如 { url: "http://localhost:3000" }）；browser_resize 调整视口尺寸；browser_wait_for 按时间或文本等待；browser_close 关闭浏览器。
- 检查：browser_snapshot 获取用于交互的元素引用；browser_take_screenshot 截图（可指定 filename、fullPage）；browser_console_messages 读取控制台消息（onlyErrors: true 时仅看错误，被视为关键检查）；browser_network_requests 查看网络请求；browser_evaluate 执行函数。
- 交互：browser_click 点击元素（通过 element 与 ref）；browser_type 向输入框填写文本；browser_hover 悬停元素。
使用方式
核心流程为 NAVIGATE → VERIFY → FIX → DELIVER：
- 启动开发服务器：npm run dev；
- browser_navigate 打开页面；
- browser_take_screenshot 进行视觉检查；
- browser_console_messages { onlyErrors: true }，结果必须为空；
- 如有问题则修复并重复上述步骤；
- 全部干净后交付。
交付前检查清单要求以下项全部通过：截图看起来正确；仅错误模式的控制台消息为空；网络请求无 4xx/5xx；移动端视口（375px）正常工作。
常见工作流包括：快速验证（导航 → 截图 → 检查控制台错误）；响应式测试（分别以 375×812、768×1024、1440×900 调整视口并截图）；表单测试（snapshot 获取引用 → type 填写 → click 提交 → wait_for 等待结果 → 检查控制台错误）。
文档还给出常用视口尺寸：移动端 375×812（iPhone）、平板 768×1024（iPad）、笔记本 1366×768、桌面 1440×900、Full HD 1920×1080。
常见控制台错误与排查方向
- 「Hydration mismatch」：服务端与客户端渲染不一致，建议使用 'use client'、在 useEffect 中处理仅浏览器代码。
- 「Cannot read property of undefined」：数据尚未加载，建议使用可选链与加载状态。
- 「Failed to fetch」：接口错误，可通过 browser_network_requests 查看详情。
适用场景与限制
适用于前端组件开发后的渲染验证、交付前 QA、UI 问题调试、响应式与表单交互测试。限制方面：文档未提及安装方式、依赖要求、支持的浏览器或框架范围、收费信息，这些暂未提供；实际使用需依赖文档中列出的 browser_* 工具集，参考 tools.md（完整 MCP 工具文档及参数）和 workflows.md（现成验证场景）。