cloud
105 lines
2.4 KiB
Markdown
105 lines
2.4 KiB
Markdown
---
|
|
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 不导致布局抖动。
|
|
- 报告和表格区域可滚动。
|
|
- 文案不泄露内部实现。
|
|
- 动态配置不会因为前端保存被清空。
|