iven/zclaw_openfang
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity
Files
0d4fa96b8283512bba0a757b1396aae7f85d5adc
zclaw_openfang/docs/knowledge-base/web-e2e-testing.md
iven 978dc5cdd8
Some checks failed
CI / Lint & TypeCheck (push) Has been cancelled
Details
CI / Unit Tests (push) Has been cancelled
Details
CI / Build Frontend (push) Has been cancelled
Details
CI / Rust Check (push) Has been cancelled
Details
CI / Security Scan (push) Has been cancelled
Details
CI / E2E Tests (push) Has been cancelled
Details
fix(安全): 修复HTML导出中的XSS漏洞并清理调试日志 
refactor(日志): 替换console.log为tracing日志系统
style(代码): 移除未使用的代码和依赖项

feat(测试): 添加端到端测试文档和CI工作流
docs(变更日志): 更新CHANGELOG.md记录0.1.0版本变更

perf(构建): 更新依赖版本并优化CI流程
2026-03-26 19:49:03 +08:00

3.3 KiB
Raw Blame History

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 影响: 备用连接方案不可用

测试执行

运行测试

# 启动 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 流程，定期进行回归测试

相关文档