agent-park/docs/e2e-testing-guide.md

Timeline E2E 测试指南

使用 chrome-devtools-mcp 测试

1. 启动测试环境

# 确保开发服务器运行
pnpm dev

2. 页面加载测试

使用 new_page 或 navigate_page:

URL: http://localhost:3000/timeline
预期: 页面成功加载，中文路径重定向到 /zh/timeline

使用 take_snapshot:

• 验证页面结构正确，包含 header 和 timeline sections
• 验证导航菜单包含"AI 时间轴"链接

3. 数据验证

使用 evaluate_script:

() => {
  const yearSections = document.querySelectorAll('section');
  const eventCards = document.querySelectorAll('.stack-card');

  return {
    yearCount: yearSections.length,
    eventCount: eventCards.length,
    hasHeader: document.querySelector('h1') !== null
  };
}

预期结果:

{
  "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

已知问题

无

后续优化

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