---
name: edge-frontend-testing
description: 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. 状态反馈检查。

## 构建命令

按实际目录执行：

```bash
npm run build
```

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

## Playwright 验证流程

使用浏览器验证时：

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

优先使用稳定选择器：

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

## 重点页面检查

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

## 失败提示检查

前端不能只显示：

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

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

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

## 截图要求

复杂 UI 改动至少检查：

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

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

## 回归重点

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