# UI测试迁移指南

## 概述

本文档说明了UI测试从旧版本迁移到新React前端的主要变更。

## 主要变更

### 1. 输出目录变更

**旧版本:**
```
dockerapp/test_playlists/{playlist_name}/
```

**新版本:**
```
output_playlists/{playlist_name}/
```

### 2. 服务器端口变更

**旧版本:**
- 测试服务器: `http://localhost:8000`

**新版本:**
- Docker映射端口: `http://localhost:8888`
- 容器内端口: `8080`

### 3. UI架构变更

**旧版本:**
- 传统的HTML模板 (Jinja2)
- 选择器: `#addRuleBtn`, `select[name='mode']`, `input[name='pattern']`

**新版本:**
- React + TypeScript + Vite
- 策略选择器: 中间位置的圆形按钮下拉菜单
- 正则规则在StrategySelector组件中管理
- 选择器: `button[title='Add Rule']`, `input[placeholder='Regex Pattern']`

### 4. 测试文件修改

#### `conftest_ui.py`
- 更新BASE_URL为`http://localhost:8888`
- 修改server fixture为仅验证服务器运行状态
- 要求手动启动Docker Compose服务

#### `test_ui_case_mix.py`
- 添加`SyncStrategy`枚举类
- 实现`_open_strategy_selector()`和`_close_strategy_selector()`辅助函数
- 更新策略选择逻辑以适配React UI
- 更新正则规则添加逻辑
- 修改输出路径为`output_playlists/case_mix/`

#### `test_ui_regex_rules.py`
- 完全重写所有测试用例以适配React UI
- 添加辅助方法`_open_strategy_selector()`和`_close_strategy_selector()`
- 更新所有选择器以匹配新UI结构
- 适配Toast通知验证

## 运行测试

### 前提条件

1. **启动Docker Compose服务:**
   ```powershell
   docker compose up -d
   ```

2. **验证服务运行:**
   ```powershell
   # 在浏览器中访问
   # http://localhost:8888
   ```

3. **安装测试依赖:**
   ```powershell
   pip install pytest-playwright requests
   playwright install
   ```

### 运行测试

**显示浏览器模式 (调试用):**
```powershell
pytest tests/test_ui_case_mix.py --headed
pytest tests/test_ui_regex_rules.py --headed
```

**无头模式 (CI/CD):**
```powershell
pytest tests/test_ui_case_mix.py
pytest tests/test_ui_regex_rules.py
```

**运行所有UI测试:**
```powershell
pytest tests/test_ui_*.py --headed
```

## 新UI元素定位

### 策略选择器

- **触发按钮:** `button` with SVG icon (圆形按钮)
- **下拉菜单:** `div.absolute.top-14`
- **策略选项:** `div:has-text('{strategy_label}')` with SVG

### 正则规则

- **添加按钮:** `button[title='Add Rule']` 或 `button:has-text('Add Rule')`
- **删除按钮:** `button[title='Delete Rule']`
- **模式输入:** `input[placeholder='Regex Pattern']`
- **替换输入:** `input[placeholder='Replacement']`
- **保存按钮:** `button:has-text('Save Changes')`
- **重置按钮:** `button:has-text('Revert')`

### Toast通知

- **成功通知:** `div:has-text('Regex preprocessing rules have been saved')`
- **策略保存:** `div:has-text('Selected strategy "{label}" has been saved')`

## 策略映射

| UI显示名称 | SyncStrategy枚举 | 旧版mode值 | 预期输出文件 |
|-----------|-----------------|-----------|-------------|
| Local Overwrite | LOCAL_OVERWRITE | local_force | case_mix_local_force.m3u |
| Cloud Overwrite | CLOUD_OVERWRITE | remote_force | case_mix_remote_force.m3u |
| Two-way Merge (Local Priority) | MERGE_LOCAL | merge_local_primary | case_mix_merge_local_primary.m3u |
| Two-way Merge (Cloud Priority) | MERGE_CLOUD | merge_remote_primary | case_mix_merge_remote_primary.m3u |

## 已知问题和注意事项

1. **同步触发:** 新UI需要通过API显式触发同步操作。测试中使用 `POST /api/sync` 端点:
   ```python
   import requests
   sync_response = requests.post(
       f"{BASE_URL}/api/sync",
       json={"mode": None}  # 使用当前配置的策略
   )
   ```

2. **Toast通知:** Toast通知有动画效果，需要适当的等待时间 (300-500ms)。

3. **下拉菜单:** 策略选择器的下拉菜单需要通过ESC键关闭，或点击外部区域。

4. **测试隔离:** 每个测试应该清理自己添加的规则，避免影响后续测试。

## 故障排除

### 服务器未运行
```
错误: 无法连接到测试服务器: http://localhost:8888
解决: docker compose up -d
```

### 元素未找到
```
错误: Timeout waiting for locator('button[title="Add Rule"]')
解决: 检查策略选择器是否已打开，确保调用了_open_strategy_selector()
```

### 输出文件未生成
```
错误: AssertionError: {strategy_label}: local_result.m3u8 未生成
解决: 
1. 检查output_playlists/case_mix/目录是否存在
2. 验证Docker volume映射配置
3. 检查后端日志: docker compose logs
```

## 更新日期

2024-11-29 - 初始迁移完成