# 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)