Files
easy_tdx_max/web-ui/e2e/README.md
T
GitHub 211052f0e3 feat(e2e): Playwright E2E 前端测试基建 — 后端合成数据 mock 模式 + 5 用例 + CI
- web/e2e_mock.py:EASY_TDX_E2E_MOCK=1 时 lifespan 替换 TDX/MAC 客户端为
  确定性合成数据(CRC32 播种随机游走,分页语义对齐真实 /bars);回测/WF/
  评估/自选/策略库仍走真实后端,SSE 由 QuoteStreamer 真轮询(mock 下 2s 一拍)
- web-ui:@playwright/test + playwright.config.ts(webServer 自动起 serve,
  EASY_TDX_CONFIG_DIR 指向每轮临时目录);e2e/ 5 用例覆盖看板五指数/SSE、
  自选增删、回测全流程、附加分析(WF 柱状图+一条龙评估卡)、策略库保存
- package.json 加 test:e2e;CI frontend job 追加 E2E;verify_ci.sh 补前端段
- tests/unit/test_e2e_mock.py(11 例)守护 mock 契约;本地 npx playwright test 全绿
2026-09-01 22:56:38 +08:00

58 lines
2.8 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# easy-tdx Web UI — Playwright E2E
无头浏览器端到端测试,覆盖:市场看板(五大指数 SSE)、自选增删、回测全流程
(取行情→净值图→绩效表→成交记录)、「附加分析」开关(WF 逐窗柱状图 + 一条龙
评估卡)、策略库保存。
## Mock 方案:后端合成数据(EASY_TDX_E2E_MOCK=1),不是 page.route 拦截
两种可行路径的取舍:
| | 后端 mock(已选) | Playwright `page.route` 拦截 |
|---|---|---|
| 回测/WF/评估/自选/策略库 | **走真实后端代码**schema 变更会被 E2E 捕获 | 静态 JSON,会与后端 schema 漂移 |
| SSE `/stream/quotes`EventSource | QuoteStreamer 真轮询合成数据,SSE 全链路被覆盖 | 无法稳定 mock(需流式 body |
| 任务型端点(提交→轮询→done) | 天然支持 | 要手写状态机 |
| 代价 | 后端多一个 `src/easy_tdx/web/e2e_mock.py`(约 400 行,由单测守护契约) | 无后端改动 |
实现:`playwright.config.ts``webServer``EASY_TDX_E2E_MOCK=1` 启动
`easy-tdx serve --port 8001`lifespan 把 TDX/MAC 客户端替换为合成数据客户端
(确定性随机游走、按 (market, code) 播种,逐轮结果完全一致)。
`EASY_TDX_CONFIG_DIR` 指向每轮独立的临时目录——自选/策略库/任务从空开始,
断言可以写死,也不污染真实 `~/.easy_tdx`
## 本地跑法
```bash
# 仓库根(Python 侧,一次性)
pip install -e ".[web]" # fastapi + uvicorn
cd web-ui
npm install
npx playwright install chromium # 首次下载浏览器(约 115MB
npm run build # 必须:serve 从 ../web-ui/dist 托管前端
npm run test:e2e # = npx playwright test(无头)
```
- Python 解释器自动探测仓库 `.venv`;没有 `.venv` 时用 `EASY_TDX_PYTHON`
环境变量指定(CI 里是系统 `python`)。
- 调试:`npx playwright test --headed`,或 `--ui` 打开交互式运行器;
失败时自动留 trace/截图在 `e2e/.results/`(已 gitignore)。
- 想复用已启动的 serve:直接跑即可(`reuseExistingServer`,本地非 CI 默认开),
但注意该 serve 必须带 `EASY_TDX_E2E_MOCK=1` 才有合成行情。
## CI
`.github/workflows/ci.yml``frontend` job 在 typecheck+build 后追加:
安装 Python + `pip install -e ".[web]"``npx playwright install chromium`
`npm run test:e2e`(mock 模式,不需要任何真实行情连接)。
## 用例清单
| 文件 | 覆盖 |
|---|---|
| `dashboard.spec.ts` | 五大指数区块渲染 + SSE 首帧价格 + 市场统计卡 |
| `watchlist.spec.ts` | 自选加入(含名称补全)/删除/空态 |
| `backtest.spec.ts` | 策略下拉 + 回测全流程 + WF 柱状图 + 一条龙评估卡 |
| `strategies.spec.ts` | 保存策略对话框 + 策略库页可见 |