wind_power_cal/.agents/skills/edge-frontend-testing/SKILL.md

name, description

name	description
edge-frontend-testing	edge_collector 前端测试与浏览器验证规范。用于边缘侧或云平台 React/Vite 页面白屏、布局错乱、按钮无反馈、弹窗异常、图表遮挡、接口失败、构建后验证时，使用 npm build、浏览器控制台、Network、Playwright 截图和交互脚本进行验证。

edge_collector 前端测试

适用范围

• frontend/config_app
• frontend/cloud_app
• 云平台公网页面 http://119.45.4.75
• 边缘网关页面，如 http://192.168.40.<host>/

验证顺序

1. 构建验证。
2. 页面加载验证。
3. 控制台错误检查。
4. Network 接口响应检查。
5. 关键交互点击。
6. 布局截图和窄屏检查。
7. 状态反馈检查。

构建命令

按实际目录执行：

npm run build

如果不能构建，最终说明原因，例如缺少依赖、Node 版本不对或远程主机不可用。

Playwright 验证流程

使用浏览器验证时：

打开目标 URL
  -> wait networkidle
  -> 收集 console error
  -> 截图
  -> 定位关键按钮/输入框
  -> 执行操作
  -> 检查 loading/toast/dialog/network
  -> 再截图

优先使用稳定选择器：

• 可见文本。
• button role/name。
• 表单 label。
• 现有 data 属性。
• 必要时再用 CSS selector。

重点页面检查

• 高级功能：WiFi、内网穿透、端口转发、硬件控制。
• 数据查看：历史趋势、AI 分析弹窗、AI 分析报告。
• 离线缓存：参数默认值、保存反馈、状态展示。
• OTA：包列表、升级确认、进度和失败提示。
• 管理后台：AI 配置、权限、启用配置唯一性。

失败提示检查

前端不能只显示：

failed to request cloud config
AI 服务请求失败
操作失败

应尽量展示后端或 agent 给出的具体原因，并转成用户可理解文案：

• 连接失败。
• 请求超时。
• 权限不足。
• 配置缺失。
• 服务未运行。
• 返回格式异常。

截图要求

复杂 UI 改动至少检查：

• 桌面宽度。
• 窄屏或移动宽度。
• 长内容状态。
• 操作中状态。
• 错误状态。

最终说明截图路径或验证 URL。

回归重点

• 页面不白屏。
• 无严重 console error。
• 按钮 loading 不导致布局抖动。
• 报告和表格区域可滚动。
• 文案不泄露内部实现。
• 动态配置不会因为前端保存被清空。