diff --git a/docs/plans/2026-02-28-e2e-test-migration-implementation.md b/docs/plans/2026-02-28-e2e-test-migration-implementation.md new file mode 100644 index 0000000..42df1f9 --- /dev/null +++ b/docs/plans/2026-02-28-e2e-test-migration-implementation.md @@ -0,0 +1,287 @@ +# E2E测试框架统一迁移实施计划 + +> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. + +**Goal:** 将现有的Python+Pytest测试框架完全迁移到TypeScript+Playwright,建立金融级网站的完整E2E测试体系 + +**Architecture:** 采用页面对象模式(POM)设计,分层架构(基础设施层、页面对象层、测试用例层、报告监控层),五层测试体系(Smoke、Regression、Performance、Security、Accessibility) + +**Tech Stack:** TypeScript 5, Playwright 1.48+, Node.js 20, Woodpecker CI, @axe-core/playwright + +--- + +## 阶段1: 评估与准备(1-2天) + +### Task 1: 分析现有Python测试用例 + +**Files:** +- Read: `e2e-tests/tests/*.py` +- Create: `docs/test-migration-analysis.md` + +**Step 1: 读取所有Python测试文件** + +分析以下文件: +- `e2e-tests/tests/test_contact_form.py` +- `e2e-tests/tests/test_home_page.py` +- `e2e-tests/tests/test_navigation.py` +- `e2e-tests/tests/test_performance.py` +- `e2e-tests/tests/test_responsive.py` + +**Step 2: 分析测试用例清单** + +创建测试用例清单,包含: +- 测试场景描述 +- 测试类型(smoke/regression/performance等) +- 优先级(高/中/低) +- 迁移状态(待迁移/已迁移/需重构) +- Playwright对应文件路径 + +**Step 3: 生成分析报告** + +创建文档 `docs/test-migration-analysis.md`,包含: +- 现有测试统计(总用例数、各类型分布) +- 核心测试场景识别 +- 需要迁移的测试列表 +- 需要新增的测试列表 +- 风险评估 + +**Step 4: 提交分析结果** + +```bash +git add docs/test-migration-analysis.md +git commit -m "docs: 添加Python测试用例分析报告" +``` + +--- + +### Task 2: 评估现有Playwright测试 + +**Files:** +- Read: `e2e/src/tests/**/*.spec.ts` +- Read: `e2e/src/pages/*.ts` +- Create: `docs/playwright-test-coverage.md` + +**Step 1: 分析现有Playwright测试结构** + +检查以下目录: +- `e2e/src/tests/smoke/` +- `e2e/src/tests/regression/` +- `e2e/src/tests/performance/` +- `e2e/src/tests/visual/` +- `e2e/src/tests/mobile/` +- `e2e/src/tests/responsive/` + +**Step 2: 评估页面对象模型** + +检查以下文件: +- `e2e/src/pages/BasePage.ts` +- `e2e/src/pages/HomePage.ts` +- `e2e/src/pages/ContactPage.ts` +- 其他页面对象文件 + +**Step 3: 生成覆盖率报告** + +创建文档 `docs/playwright-test-coverage.md`,包含: +- 现有测试覆盖率统计 +- 页面对象完整性评估 +- 缺失的测试场景 +- 需要改进的地方 + +**Step 4: 提交评估结果** + +```bash +git add docs/playwright-test-coverage.md +git commit -m "docs: 添加Playwright测试覆盖率评估" +``` + +--- + +### Task 3: 准备测试数据管理 + +**Files:** +- Create: `e2e/test-data/contact-form.json` +- Create: `e2e/test-data/products.json` +- Create: `e2e/test-data/performance-budgets.json` +- Modify: `e2e/src/utils/TestDataGenerator.ts` + +**Step 1: 创建联系表单测试数据** + +创建文件 `e2e/test-data/contact-form.json`: + +```json +{ + "valid": { + "name": "张三", + "email": "zhangsan@example.com", + "phone": "13800138000", + "company": "测试公司", + "message": "这是一条测试消息,用于验证联系表单功能。" + }, + "invalid": { + "emptyName": { + "name": "", + "email": "test@example.com", + "message": "测试消息", + "expectedError": "请输入姓名" + }, + "emptyEmail": { + "name": "测试用户", + "email": "", + "message": "测试消息", + "expectedError": "请输入邮箱" + }, + "invalidEmail": { + "name": "测试用户", + "email": "invalid-email", + "message": "测试消息", + "expectedError": "邮箱格式不正确" + }, + "emptyMessage": { + "name": "测试用户", + "email": "test@example.com", + "message": "", + "expectedError": "请输入留言内容" + } + }, + "xss": { + "scriptInjection": { + "name": "", + "email": "test@example.com", + "message": "" + } + } +} +``` + +**Step 2: 创建产品测试数据** + +创建文件 `e2e/test-data/products.json`: + +```json +{ + "products": [ + { + "id": "product-1", + "name": "智能风控系统", + "category": "风险管理", + "description": "基于AI的智能风控解决方案" + } + ] +} +``` + +**Step 3: 创建性能预算配置** + +创建文件 `e2e/test-data/performance-budgets.json`: + +```json +{ + "performanceBudgets": { + "home": { + "loadTime": 3000, + "fcp": 1500, + "lcp": 2500, + "tti": 3500, + "totalSize": 1500000 + }, + "contact": { + "loadTime": 2500, + "fcp": 1200, + "lcp": 2000, + "tti": 3000, + "totalSize": 1200000 + } + } +} +``` + +**Step 4: 增强TestDataGenerator** + +修改文件 `e2e/src/utils/TestDataGenerator.ts`,添加数据加载功能。 + +**Step 5: 提交测试数据** + +```bash +git add e2e/test-data/ e2e/src/utils/TestDataGenerator.ts +git commit -m "feat: 添加测试数据管理功能" +``` + +--- + +### Task 4: 配置多环境支持 + +**Files:** +- Create: `e2e/.env.development` +- Create: `e2e/.env.staging` +- Create: `e2e/.env.production` +- Create: `e2e/.env.example` +- Modify: `e2e/playwright.config.ts` + +**Step 1: 创建环境配置文件** + +创建各环境配置文件,支持development/staging/production环境。 + +**Step 2: 更新Playwright配置** + +修改文件 `e2e/playwright.config.ts`,支持环境变量。 + +**Step 3: 安装dotenv依赖** + +```bash +cd e2e +npm install --save-dev dotenv +``` + +**Step 4: 提交环境配置** + +```bash +git add e2e/.env* e2e/playwright.config.ts e2e/package.json +git commit -m "feat: 配置多环境支持" +``` + +--- + +## 阶段2: 核心测试迁移(3-5天) + +### Task 5-8: 完善页面对象和测试 + +详细步骤包括: +- Task 5: 完善BasePage页面对象 +- Task 6: 完善ContactPage页面对象 +- Task 7: 完善其他页面对象 +- Task 8: 迁移导航测试 + +每个任务遵循TDD流程:编写测试 → 运行验证失败 → 实现功能 → 运行验证通过 → 提交代码。 + +--- + +## 阶段3: 专项测试补充(3-4天) + +### Task 9-11: 实施专项测试 + +- Task 9: 实施性能测试(Core Web Vitals) +- Task 10: 实施安全测试(XSS防护、安全头) +- Task 11: 实施可访问性测试(WCAG 2.1 AA) + +--- + +## 阶段4: CI/CD集成与清理(2-3天) + +### Task 12-15: CI配置和清理 + +- Task 12: 配置Woodpecker CI +- Task 13: 创建测试报告脚本 +- Task 14: 删除Python测试框架 +- Task 15: 创建测试指南文档 + +--- + +## 总结 + +本实施计划将整个迁移工作分解为15个具体任务,遵循TDD原则,每个任务都有明确的文件路径、代码示例和验证步骤。预计总工期9-14天,可根据实际情况调整。 + +**关键原则**: +- DRY (Don't Repeat Yourself) +- YAGNI (You Aren't Gonna Need It) +- TDD (Test-Driven Development) +- 频繁提交