107 lines
2.3 KiB
Markdown
107 lines
2.3 KiB
Markdown
# Timeline E2E 测试指南
|
||
|
||
## 使用 chrome-devtools-mcp 测试
|
||
|
||
### 1. 启动测试环境
|
||
|
||
```bash
|
||
# 确保开发服务器运行
|
||
pnpm dev
|
||
```
|
||
|
||
### 2. 页面加载测试
|
||
|
||
使用 `new_page` 或 `navigate_page`:
|
||
```
|
||
URL: http://localhost:3000/timeline
|
||
预期: 页面成功加载，中文路径重定向到 /zh/timeline
|
||
```
|
||
|
||
使用 `take_snapshot`:
|
||
- 验证页面结构正确，包含 header 和 timeline sections
|
||
- 验证导航菜单包含"AI 时间轴"链接
|
||
|
||
### 3. 数据验证
|
||
|
||
使用 `evaluate_script`:
|
||
```javascript
|
||
() => {
|
||
const yearSections = document.querySelectorAll('section');
|
||
const eventCards = document.querySelectorAll('.stack-card');
|
||
|
||
return {
|
||
yearCount: yearSections.length,
|
||
eventCount: eventCards.length,
|
||
hasHeader: document.querySelector('h1') !== null
|
||
};
|
||
}
|
||
```
|
||
|
||
预期结果:
|
||
```json
|
||
{
|
||
"yearCount": 2,
|
||
"eventCount": 3,
|
||
"hasHeader": true
|
||
}
|
||
```
|
||
|
||
### 4. 无控制台错误
|
||
|
||
使用 `list_console_messages` with `types: ["error", "warn"]`:
|
||
- Expected: 空数组或仅资源预加载警告（可忽略）
|
||
|
||
### 5. 响应式测试
|
||
|
||
使用 `resize_page`:
|
||
- 桌面: 1920x1080
|
||
- 移动: 375x667 (iPhone SE)
|
||
|
||
验证: 布局在不同尺寸下正常显示，移动端显示汉堡菜单
|
||
|
||
### 6. 截图对比
|
||
|
||
使用 `take_screenshot`:
|
||
- 保存路径: `tests/screenshots/timeline-page.png`
|
||
- 手动对比与设计原型
|
||
- 验证视觉风格符合 Neo-brutalism 设计
|
||
|
||
## 测试记录
|
||
|
||
### 2025-01-27 测试结果
|
||
|
||
- ✅ 页面加载成功（自动重定向到 /zh/timeline）
|
||
- ✅ 数据渲染正确（2年3事件：2018年2个，2017年1个）
|
||
- ✅ 年份降序排列（2018 → 2017）
|
||
- ✅ 导航菜单"AI 时间轴"链接正常
|
||
- ✅ 无控制台错误（仅1个资源预加载警告）
|
||
- ✅ 移动端响应式布局正常
|
||
- ✅ 桌面端截图已保存
|
||
|
||
### 测试数据
|
||
|
||
**2018年事件（2个）:**
|
||
1. BERT发布 - Google发布BERT预训练模型 (2018/10/11)
|
||
2. GPT-1发布 - OpenAI发布第一代GPT模型 (2018/6/11)
|
||
|
||
**2017年事件（1个）:**
|
||
1. Transformer论文 - Google团队发表Transformer架构 (2017/6/12)
|
||
|
||
### 测试环境
|
||
|
||
- Node.js: v22
|
||
- Next.js: 15.1.11
|
||
- 浏览器: Chrome (chrome-devtools-mcp)
|
||
- 测试时间: 2025-01-27 21:40
|
||
|
||
### 已知问题
|
||
|
||
无
|
||
|
||
### 后续优化
|
||
|
||
- 添加更多历史事件数据
|
||
- 实现搜索和筛选功能
|
||
- 添加事件详情页面
|
||
- 优化移动端卡片间距
|