# 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

### 已知问题

无

### 后续优化

- 添加更多历史事件数据
- 实现搜索和筛选功能
- 添加事件详情页面
- 优化移动端卡片间距