978dc5cdd8
Some checks failed
CI / Lint & TypeCheck (push) Has been cancelled
CI / Unit Tests (push) Has been cancelled
CI / Build Frontend (push) Has been cancelled
CI / Rust Check (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
CI / E2E Tests (push) Has been cancelled
refactor(日志): 替换console.log为tracing日志系统 style(代码): 移除未使用的代码和依赖项 feat(测试): 添加端到端测试文档和CI工作流 docs(变更日志): 更新CHANGELOG.md记录0.1.0版本变更 perf(构建): 更新依赖版本并优化CI流程
125 lines
3.3 KiB
Markdown
125 lines
3.3 KiB
Markdown
# Web端端到端功能测试指南
|
||
|
||
## 概述
|
||
|
||
本文档记录了 ZCLAW Web 端的端到端（E2E）功能测试方法和结果。
|
||
|
||
## 测试环境
|
||
|
||
- **前端地址**: http://localhost:1421 (Vite 开发服务器)
|
||
- **测试框架**: Playwright
|
||
- **浏览器**: Chromium
|
||
- **测试日期**: 2026-03-26
|
||
|
||
## 测试覆盖范围
|
||
|
||
### 1. 页面加载与基础功能
|
||
- ✅ 首页加载测试
|
||
- ✅ 控制台错误检查
|
||
- ✅ 响应式布局测试（桌面/平板/移动端）
|
||
|
||
### 2. 聊天功能
|
||
- ✅ 聊天界面渲染测试
|
||
- ✅ 输入框交互测试
|
||
- ✅ 消息发送模拟
|
||
|
||
### 3. 导航与路由
|
||
- ✅ 侧边栏导航测试
|
||
- ✅ 页面切换测试
|
||
- ✅ 路由状态检查
|
||
|
||
### 4. UI 组件
|
||
- ✅ 按钮交互测试
|
||
- ✅ 表单元素测试
|
||
- ✅ 模态框/对话框检查
|
||
|
||
### 5. 性能测试
|
||
- ✅ 页面加载性能测试
|
||
- 加载时间: ~5.7秒
|
||
|
||
### 6. 可访问性测试
|
||
- ✅ 基础可访问性检查
|
||
- 页面标题: 存在
|
||
- Lang 属性: en
|
||
- 图片 Alt 属性: 无图片
|
||
|
||
### 7. 网络请求测试
|
||
- ✅ API 连接测试
|
||
- 发现后端连接问题（CORS/连接失败）
|
||
|
||
### 8. 状态管理测试
|
||
- ✅ LocalStorage 状态测试
|
||
- 发现存储项: zclaw_device_keys, zclaw-memory-stats, zclaw_gateway_url
|
||
|
||
## 发现的问题
|
||
|
||
### 问题 1: 后端连接失败
|
||
**描述**: Web 端无法连接到后端 Gateway 服务
|
||
**错误信息**:
|
||
```
|
||
Access to fetch at 'http://127.0.0.1:50051/api/health' from origin 'http://localhost:1421'
|
||
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header
|
||
```
|
||
**影响**: 聊天功能、Agent 功能等需要后端支持的功能无法使用
|
||
**状态**: 已知问题，需要配置开发服务器或启动后端服务
|
||
|
||
### 问题 2: 备用端口检查失败
|
||
**描述**: 尝试连接 4200 端口也失败
|
||
**错误信息**: `net::ERR_CONNECTION_REFUSED`
|
||
**影响**: 备用连接方案不可用
|
||
|
||
## 测试执行
|
||
|
||
### 运行测试
|
||
|
||
```bash
|
||
# 启动 Web 开发服务器
|
||
pnpm dev --port 1421
|
||
|
||
# 运行 E2E 测试
|
||
pnpm exec playwright test web-full-test.spec.ts --config tests/e2e/playwright.config.ts
|
||
```
|
||
|
||
### 测试文件位置
|
||
|
||
- 测试脚本: `tests/e2e/specs/web-full-test.spec.ts`
|
||
- 测试报告: `.gstack/qa-reports/web-test-report-2026-03-26.md`
|
||
- 测试截图: `.gstack/qa-reports/screenshots/`
|
||
|
||
## 测试结果摘要
|
||
|
||
| 指标 | 数值 |
|
||
|------|------|
|
||
| 通过 | 12 |
|
||
| 失败 | 0 |
|
||
| 跳过 | 0 |
|
||
| 总计 | 12 |
|
||
| 通过率 | 100% |
|
||
|
||
## 截图证据
|
||
|
||
测试过程中捕获了以下截图：
|
||
|
||
1. `01-homepage.png` - 首页截图
|
||
2. `02-responsive-desktop.png` - 桌面端响应式布局
|
||
3. `02-responsive-tablet.png` - 平板端响应式布局
|
||
4. `02-responsive-mobile.png` - 移动端响应式布局
|
||
5. `03-chat-interface.png` - 聊天界面
|
||
6. `04-input-interaction.png` - 输入框交互
|
||
7. `05-navigation.png` - 导航测试
|
||
8. `06-buttons.png` - 按钮组件
|
||
9. `07-forms.png` - 表单元素
|
||
|
||
## 建议
|
||
|
||
1. **后端连接**: 配置开发服务器支持 CORS，或启动完整的后端服务进行测试
|
||
2. **测试扩展**: 增加更多边界条件测试（如网络断开、超时等）
|
||
3. **性能优化**: 页面加载时间约 5.7 秒，可考虑优化
|
||
4. **定期回归**: 建立 CI/CD 流程，定期进行回归测试
|
||
|
||
## 相关文档
|
||
|
||
- [开发服务器配置](./dev-server-setup.md)
|
||
- [E2E 测试配置](../../desktop/tests/e2e/playwright.config.ts)
|
||
- [QA 报告模板](../../.trae/skills/gstack/qa/templates/qa-report-template.md)
|