---
name: edge-webapp-testing
description: edge_collector 前端 Web 测试与 Playwright 验证规范。用于边缘侧或云端前端白屏、布局错乱、交互失败、按钮无反馈、图表遮挡、页面构建后验证时，指导使用浏览器检查、截图、接口和构建验证。
---

# edge_collector Web 测试

## 适用前端

- 边缘侧：`frontend/config_app`
- 云端：`frontend/cloud_app`

## 排查顺序

1. 构建是否成功：`npm run build`
2. 页面是否白屏：检查控制台错误和路由。
3. API 是否失败：检查 Network、状态码、响应体。
4. CSS 是否遮挡/溢出：检查 DOM 和 computed style。
5. 交互状态是否正确：按钮 loading、禁用、toast、dialog。

## Playwright 验证建议

需要浏览器验证时：

- 先确认 dev server 或目标地址。
- 访问用户指定 URL。
- 截图 desktop 和必要的 mobile 宽度。
- 检查 console error。
- 点击关键按钮并观察 DOM/网络反馈。

## 本项目重点页面

- 边缘高级功能：WiFi、内网穿透、端口转发、硬件控制。
- 离线缓存页面。
- AI 分析页面。
- OTA 升级页面。
- 云端历史趋势和 AI 分析。

## 验证输出

最终说明要包含：

- 访问 URL。
- 验证的页面/操作。
- 是否有 console error。
- 构建命令结果。
- 发现的问题和截图路径（如有）。