docs: add remaining planning documents

docs/plans/2026-03-05-smoke-test-failures-fix.md

@@ -0,0 +1,830 @@
+# 冒烟测试失败修复实施计划
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**目标:** 修复 233 个冒烟测试失败,将测试通过率从 78.5% 提升至 95% 以上
+
+**架构:** 采用分层修复策略,优先修复关键路径(导航、联系页面、表单),然后处理次要问题(滚动、可见性),最后优化测试稳定性
+
+**技术栈:** Next.js 16.1.6, React 19.2.3, TypeScript 5, Playwright, Tailwind CSS 4
+
+---
+
+## 优先级分类
+
+### P0 - 关键问题 (立即修复)
+- 导航菜单不可见
+- 联系页面加载失败
+- 表单输入功能失败
+- 提交按钮不可见
+
+### P1 - 高优先级 (尽快修复)
+- 区块可见性问题
+- 滚动功能问题
+- 联系信息显示问题
+
+### P2 - 中优先级 (稍后修复)
+- 页脚可见性
+- 页面描述和徽章
+- 必填字段标记
+
+### P3 - 低优先级 (可选优化)
+- 字段占位符
+- 测试稳定性优化
+
+---
+
+## Task 1: 修复导航菜单选择器
+
+**问题:** 导航元素选择器不正确,导致移动端和部分设备上导航测试失败
+
+**文件:**
+- 修改: `src/components/layout/header.tsx:242-248`
+- 测试: `e2e/src/tests/smoke/home-page.smoke.spec.ts:25-29`
+
+**Step 1: 添加导航语义化属性**
+
+在 `src/components/layout/header.tsx` 第 242 行附近,为桌面导航添加 `role="navigation"`:
+
+```tsx
+// 修改前 (第 242 行)
+<nav className="hidden md:flex items-center gap-1">
+
+// 修改后
+<nav className="hidden md:flex items-center gap-1" role="navigation" aria-label="主导航">
+```
+
+**Step 2: 验证导航选择器**
+
+运行测试验证导航可见性:
+
+```bash
+cd e2e && npm test -- home-page.smoke.spec.ts -g "应该显示主导航菜单"
+```
+
+预期: PASS
+
+**Step 3: 添加移动端导航测试**
+
+在 `e2e/src/tests/smoke/home-page.smoke.spec.ts` 第 25 行后添加移动端导航测试:
+
+```typescript
+test('移动端应该显示导航菜单按钮', async ({ homePage, page }) => {
+  await page.setViewportSize({ width: 375, height: 667 });
+  await expect(homePage.mobileMenuButton).toBeVisible();
+});
+```
+
+**Step 4: 运行移动端测试**
+
+```bash
+cd e2e && npm test -- home-page.smoke.spec.ts -g "移动端应该显示导航菜单按钮"
+```
+
+预期: PASS
+
+**Step 5: 提交修改**
+
+```bash
+git add src/components/layout/header.tsx e2e/src/tests/smoke/home-page.smoke.spec.ts
+git commit -m "fix: add navigation role attribute for better test selector"
+```
+
+---
+
+## Task 2: 修复联系页面元素选择器
+
+**问题:** 联系页面多个元素选择器不正确,导致大量测试失败
+
+**文件:**
+- 修改: `e2e/src/pages/ContactPage.ts:16-51`
+- 修改: `src/app/(marketing)/contact/page.tsx:152-165`
+- 测试: `e2e/src/tests/smoke/contact-page.smoke.spec.ts`
+
+**Step 1: 为联系页面元素添加 data-testid**
+
+在 `src/app/(marketing)/contact/page.tsx` 第 152 行附近,为联系信息卡片添加测试标识:
+
+```tsx
+// 修改前 (第 152 行附近)
+<div className="space-y-4">
+  <div className="flex items-start gap-4 group">
+    <div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
+      <Mail className="w-5 h-5 text-white" />
+    </div>
+    <div>
+      <p className="text-sm text-[#5C5C5C] mb-1">邮箱</p>
+      <a href={`mailto:${COMPANY_INFO.email}`} className="text-[#1C1C1C] hover:text-[#C41E3A] transition-colors duration-200">
+        {COMPANY_INFO.email}
+      </a>
+    </div>
+  </div>
+</div>
+
+// 修改后
+<div className="space-y-4" data-testid="contact-info">
+  <div className="flex items-start gap-4 group" data-testid="email-info">
+    <div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
+      <Mail className="w-5 h-5 text-white" />
+    </div>
+    <div>
+      <p className="text-sm text-[#5C5C5C] mb-1">邮箱</p>
+      <a href={`mailto:${COMPANY_INFO.email}`} className="text-[#1C1C1C] hover:text-[#C41E3A] transition-colors duration-200" data-testid="email-link">
+        {COMPANY_INFO.email}
+      </a>
+    </div>
+  </div>
+</div>
+```
+
+**Step 2: 为工作时间卡片添加测试标识**
+
+在第 181 行附近:
+
+```tsx
+// 修改前
+<div className="bg-[#FFFBF5] p-5 rounded-lg border border-[#E5E5E5]">
+  <div className="flex items-center gap-2 mb-3">
+    <Clock className="w-4 h-4 text-[#C41E3A]" />
+    <h4 className="text-sm font-medium text-[#1C1C1C]">工作时间</h4>
+  </div>
+
+// 修改后
+<div className="bg-[#FFFBF5] p-5 rounded-lg border border-[#E5E5E5]" data-testid="work-hours-card">
+  <div className="flex items-center gap-2 mb-3">
+    <Clock className="w-4 h-4 text-[#C41E3A]" />
+    <h4 className="text-sm font-medium text-[#1C1C1C]">工作时间</h4>
+  </div>
+```
+
+**Step 3: 更新 ContactPage 测试选择器**
+
+在 `e2e/src/pages/ContactPage.ts` 第 16 行附近更新选择器:
+
+```typescript
+// 修改前
+this.contactInfoCard = page.locator('[data-slot="card"]').filter({ hasText: '联系方式' }).first();
+this.workHoursCard = page.locator('[data-slot="card"]').filter({ hasText: '工作时间' }).first();
+
+// 修改后
+this.contactInfoCard = page.locator('[data-testid="contact-info"]');
+this.workHoursCard = page.locator('[data-testid="work-hours-card"]');
+this.emailInfo = page.locator('[data-testid="email-info"]');
+this.emailLink = page.locator('[data-testid="email-link"]');
+```
+
+**Step 4: 运行联系页面测试**
+
+```bash
+cd e2e && npm test -- contact-page.smoke.spec.ts
+```
+
+预期: 大部分测试通过
+
+**Step 5: 提交修改**
+
+```bash
+git add src/app/\(marketing\)/contact/page.tsx e2e/src/pages/ContactPage.ts
+git commit -m "fix: add data-testid attributes for contact page elements"
+```
+
+---
+
+## Task 3: 修复表单输入字段选择器
+
+**问题:** 表单输入字段选择器不正确,导致输入测试失败
+
+**文件:**
+- 修改: `src/app/(marketing)/contact/page.tsx:250-290`
+- 修改: `e2e/src/pages/ContactPage.ts:12-17`
+- 测试: `e2e/src/tests/smoke/contact-page.smoke.spec.ts:36-40`
+
+**Step 1: 为表单字段添加 name 属性和 data-testid**
+
+在 `src/app/(marketing)/contact/page.tsx` 第 250 行附近的表单部分:
+
+```tsx
+// 修改前
+<Input
+  type="text"
+  placeholder="请输入您的姓名"
+  value={formData.name}
+  onChange={(e) => handleChange('name', e.target.value)}
+  onBlur={(e) => handleBlur('name', e.target.value)}
+  className={errors.name ? 'border-red-500' : ''}
+/>
+
+// 修改后
+<Input
+  type="text"
+  name="name"
+  data-testid="name-input"
+  placeholder="请输入您的姓名"
+  value={formData.name}
+  onChange={(e) => handleChange('name', e.target.value)}
+  onBlur={(e) => handleBlur('name', e.target.value)}
+  className={errors.name ? 'border-red-500' : ''}
+  required
+/>
+```
+
+对其他字段重复此操作:
+- email (第 260 行附近)
+- phone (第 270 行附近)
+- subject (第 280 行附近)
+- message (第 290 行附近)
+
+**Step 2: 为提交按钮添加测试标识**
+
+```tsx
+// 修改前
+<Button type="submit" disabled={isSubmitting}>
+  {isSubmitting ? (
+    <>
+      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+      发送中...
+    </>
+  ) : (
+    <>
+      <Send className="w-4 h-4 mr-2" />
+      发送消息
+    </>
+  )}
+</Button>
+
+// 修改后
+<Button type="submit" disabled={isSubmitting} data-testid="submit-button">
+  {isSubmitting ? (
+    <>
+      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+      发送中...
+    </>
+  ) : (
+    <>
+      <Send className="w-4 h-4 mr-2" />
+      发送消息
+    </>
+  )}
+</Button>
+```
+
+**Step 3: 更新 ContactPage 选择器**
+
+在 `e2e/src/pages/ContactPage.ts` 第 12 行:
+
+```typescript
+// 修改前
+this.nameInput = page.locator('input[name="name"]');
+this.phoneInput = page.locator('input[name="phone"]');
+this.emailInput = page.locator('input[name="email"]');
+this.subjectInput = page.locator('input[name="subject"]');
+this.messageInput = page.locator('textarea[name="message"]');
+this.submitButton = page.locator('button[type="submit"]');
+
+// 修改后
+this.nameInput = page.locator('[data-testid="name-input"]');
+this.phoneInput = page.locator('[data-testid="phone-input"]');
+this.emailInput = page.locator('[data-testid="email-input"]');
+this.subjectInput = page.locator('[data-testid="subject-input"]');
+this.messageInput = page.locator('[data-testid="message-input"]');
+this.submitButton = page.locator('[data-testid="submit-button"]');
+```
+
+**Step 4: 运行表单输入测试**
+
+```bash
+cd e2e && npm test -- contact-page.smoke.spec.ts -g "应该能够输入"
+```
+
+预期: PASS
+
+**Step 5: 提交修改**
+
+```bash
+git add src/app/\(marketing\)/contact/page.tsx e2e/src/pages/ContactPage.ts
+git commit -m "fix: add name and data-testid attributes for form inputs"
+```
+
+---
+
+## Task 4: 修复滚动到顶部功能
+
+**问题:** `scrollToTop()` 函数实现有问题,滚动位置未归零
+
+**文件:**
+- 修改: `e2e/src/pages/BasePage.ts:40-50`
+- 测试: `e2e/src/tests/smoke/home-page.smoke.spec.ts:55-59`
+
+**Step 1: 检查 BasePage 滚动实现**
+
+读取 `e2e/src/pages/BasePage.ts`:
+
+```bash
+cat e2e/src/pages/BasePage.ts
+```
+
+**Step 2: 修复 scrollToTop 方法**
+
+在 `e2e/src/pages/BasePage.ts` 中:
+
+```typescript
+// 修改前
+async scrollToTop(): Promise<void> {
+  await this.page.evaluate(() => window.scrollTo(0, 0));
+}
+
+// 修改后
+async scrollToTop(): Promise<void> {
+  await this.page.evaluate(() => {
+    window.scrollTo({ top: 0, behavior: 'instant' });
+  });
+  await this.page.waitForLoadState('domcontentloaded');
+  await this.page.waitForTimeout(500);
+}
+```
+
+**Step 3: 运行滚动测试**
+
+```bash
+cd e2e && npm test -- home-page.smoke.spec.ts -g "应该能够滚动到页面顶部"
+```
+
+预期: PASS
+
+**Step 4: 提交修改**
+
+```bash
+git add e2e/src/pages/BasePage.ts
+git commit -m "fix: improve scrollToTop implementation with instant behavior"
+```
+
+---
+
+## Task 5: 修复区块滚动和可见性问题
+
+**问题:** 区块滚动和可见性检测存在时序问题
+
+**文件:**
+- 修改: `e2e/src/pages/HomePage.ts:73-80`
+- 测试: `e2e/src/tests/smoke/home-page.smoke.spec.ts:31-45`
+
+**Step 1: 优化 scrollToSection 方法**
+
+在 `e2e/src/pages/HomePage.ts` 第 73 行:
+
+```typescript
+// 修改前
+async scrollToSection(sectionId: string): Promise<void> {
+  const section = this.page.locator(`#${sectionId}`);
+  await section.waitFor({ state: 'attached', timeout: 10000 });
+  await section.scrollIntoViewIfNeeded();
+  await this.page.waitForLoadState('networkidle');
+  await this.page.waitForTimeout(1000);
+}
+
+// 修改后
+async scrollToSection(sectionId: string): Promise<void> {
+  const section = this.page.locator(`#${sectionId}`);
+  await section.waitFor({ state: 'attached', timeout: 15000 });
+  await section.scrollIntoViewIfNeeded();
+  await this.page.waitForLoadState('networkidle');
+  await this.page.waitForTimeout(1500);
+  await section.waitFor({ state: 'visible', timeout: 5000 });
+}
+```
+
+**Step 2: 为区块添加 ID 属性**
+
+检查并确保所有区块都有正确的 ID:
+- `src/components/sections/hero-section.tsx` - `id="home"`
+- `src/components/sections/services-section.tsx` - `id="services"`
+- `src/components/sections/products-section.tsx` - `id="products"`
+- `src/components/sections/cases-section.tsx` - `id="cases"`
+- `src/components/sections/about-section.tsx` - `id="about"`
+- `src/components/sections/news-section.tsx` - `id="news"`
+
+**Step 3: 运行区块可见性测试**
+
+```bash
+cd e2e && npm test -- home-page.smoke.spec.ts -g "应该显示.*区块标题"
+```
+
+预期: PASS
+
+**Step 4: 提交修改**
+
+```bash
+git add e2e/src/pages/HomePage.ts
+git commit -m "fix: improve scrollToSection with better wait conditions"
+```
+
+---
+
+## Task 6: 添加页面徽章和描述元素
+
+**问题:** 页面徽章和描述元素缺失或选择器不正确
+
+**文件:**
+- 修改: `src/app/(marketing)/contact/page.tsx:138-145`
+- 修改: `e2e/src/pages/ContactPage.ts:60-70`
+
+**Step 1: 为联系页面添加徽章元素**
+
+在 `src/app/(marketing)/contact/page.tsx` 第 138 行附近:
+
+```tsx
+// 修改前
+<div className="flex items-center gap-3 mb-4">
+  <div className="w-8 h-px bg-gradient-to-r from-[#1C1C1C] to-[#C41E3A]" />
+  <span className="text-sm text-[#5C5C5C] tracking-wide">联系我们</span>
+</div>
+
+// 修改后
+<div className="flex items-center gap-3 mb-4">
+  <div className="w-8 h-px bg-gradient-to-r from-[#1C1C1C] to-[#C41E3A]" />
+  <span className="text-sm text-[#5C5C5C] tracking-wide" data-testid="page-badge">联系我们</span>
+</div>
+```
+
+**Step 2: 添加页面描述元素**
+
+```tsx
+// 修改前
+<p className="mt-4 text-[#5C5C5C] max-w-2xl">
+  无论您有任何问题或合作意向,我们都很乐意与您交流
+</p>
+
+// 修改后
+<p className="mt-4 text-[#5C5C5C] max-w-2xl" data-testid="page-description">
+  无论您有任何问题或合作意向,我们都很乐意与您交流
+</p>
+```
+
+**Step 3: 更新 ContactPage 选择器**
+
+在 `e2e/src/pages/ContactPage.ts` 第 60 行附近添加:
+
+```typescript
+// 添加新属性
+readonly pageBadge: Locator;
+readonly pageDescription: Locator;
+
+// 在构造函数中初始化
+this.pageBadge = page.locator('[data-testid="page-badge"]');
+this.pageDescription = page.locator('[data-testid="page-description"]');
+```
+
+**Step 4: 添加获取方法**
+
+```typescript
+async getBadgeText(): Promise<string> {
+  return await this.pageBadge.textContent() || '';
+}
+
+async getPageDescription(): Promise<string> {
+  return await this.pageDescription.textContent() || '';
+}
+```
+
+**Step 5: 运行测试**
+
+```bash
+cd e2e && npm test -- contact-page.smoke.spec.ts -g "应该显示页面"
+```
+
+预期: PASS
+
+**Step 6: 提交修改**
+
+```bash
+git add src/app/\(marketing\)/contact/page.tsx e2e/src/pages/ContactPage.ts
+git commit -m "fix: add data-testid for page badge and description"
+```
+
+---
+
+## Task 7: 修复页脚可见性问题
+
+**问题:** 部分移动设备上页脚不可见
+
+**文件:**
+- 修改: `src/components/layout/footer.tsx:1-50`
+- 修改: `e2e/src/pages/HomePage.ts:22`
+- 测试: `e2e/src/tests/smoke/home-page.smoke.spec.ts:47-51`
+
+**Step 1: 检查 Footer 组件**
+
+```bash
+cat src/components/layout/footer.tsx | head -50
+```
+
+**Step 2: 为 Footer 添加测试标识**
+
+在 `src/components/layout/footer.tsx`:
+
+```tsx
+// 修改前
+<footer className="bg-[#1C1C1C] text-white">
+
+// 修改后
+<footer className="bg-[#1C1C1C] text-white" data-testid="footer" role="contentinfo">
+```
+
+**Step 3: 更新 HomePage 选择器**
+
+在 `e2e/src/pages/HomePage.ts` 第 22 行:
+
+```typescript
+// 修改前
+this.footer = page.locator('footer');
+
+// 修改后
+this.footer = page.locator('[data-testid="footer"]');
+```
+
+**Step 4: 改进页脚等待逻辑**
+
+```typescript
+async waitForFooter(): Promise<void> {
+  await this.scrollToBottom();
+  await this.page.waitForLoadState('networkidle');
+  await this.footer.waitFor({ state: 'visible', timeout: 10000 });
+}
+```
+
+**Step 5: 运行页脚测试**
+
+```bash
+cd e2e && npm test -- home-page.smoke.spec.ts -g "应该显示页脚"
+```
+
+预期: PASS
+
+**Step 6: 提交修改**
+
+```bash
+git add src/components/layout/footer.tsx e2e/src/pages/HomePage.ts
+git commit -m "fix: add data-testid and role for footer element"
+```
+
+---
+
+## Task 8: 修复立即咨询按钮可见性
+
+**问题:** 移动端立即咨询按钮不可见
+
+**文件:**
+- 修改: `src/components/layout/header.tsx:200-205`
+- 测试: `e2e/src/tests/smoke/home-page.smoke.spec.ts`
+
+**Step 1: 为咨询按钮添加测试标识**
+
+在 `src/components/layout/header.tsx` 第 200 行:
+
+```tsx
+// 修改前
+<Button 
+  size="sm"
+  asChild
+>
+  <Link href="/contact">立即咨询</Link>
+</Button>
+
+// 修改后
+<Button 
+  size="sm"
+  asChild
+  data-testid="consult-button"
+>
+  <Link href="/contact">立即咨询</Link>
+</Button>
+```
+
+**Step 2: 添加测试用例**
+
+在 `e2e/src/tests/smoke/home-page.smoke.spec.ts`:
+
+```typescript
+test('应该显示立即咨询按钮', async ({ homePage }) => {
+  const consultButton = homePage.page.locator('[data-testid="consult-button"]');
+  await expect(consultButton).toBeVisible();
+});
+```
+
+**Step 3: 运行测试**
+
+```bash
+cd e2e && npm test -- home-page.smoke.spec.ts -g "应该显示立即咨询按钮"
+```
+
+预期: PASS
+
+**Step 4: 提交修改**
+
+```bash
+git add src/components/layout/header.tsx e2e/src/tests/smoke/home-page.smoke.spec.ts
+git commit -m "fix: add data-testid for consult button"
+```
+
+---
+
+## Task 9: 优化测试等待和超时设置
+
+**问题:** 测试因时序问题导致不稳定
+
+**文件:**
+- 修改: `e2e/playwright.config.ts:30-40`
+- 修改: `e2e/src/fixtures/base.fixture.ts`
+
+**Step 1: 增加全局超时时间**
+
+在 `e2e/playwright.config.ts`:
+
+```typescript
+// 修改前
+timeout: 60000,
+expect: {
+  timeout: 30000,
+},
+
+// 修改后
+timeout: 90000,
+expect: {
+  timeout: 45000,
+  toHaveScreenshot: { timeout: 60000 },
+},
+```
+
+**Step 2: 添加测试夹具超时配置**
+
+在 `e2e/src/fixtures/base.fixture.ts`:
+
+```typescript
+import { test as base } from '@playwright/test';
+
+export const test = base.extend({
+  page: async ({ page }, use) => {
+    page.setDefaultTimeout(45000);
+    page.setDefaultNavigationTimeout(90000);
+    await use(page);
+  },
+});
+```
+
+**Step 3: 运行完整测试套件**
+
+```bash
+cd e2e && npm test -- --retries=2
+```
+
+**Step 4: 提交修改**
+
+```bash
+git add e2e/playwright.config.ts e2e/src/fixtures/base.fixture.ts
+git commit -m "perf: increase test timeouts for better stability"
+```
+
+---
+
+## Task 10: 运行完整冒烟测试并验证修复
+
+**目标:** 验证所有修复,确保测试通过率达到 95% 以上
+
+**Step 1: 运行完整冒烟测试套件**
+
+```bash
+cd e2e && npm test -- --grep "@smoke" --reporter=html
+```
+
+**Step 2: 生成测试报告**
+
+```bash
+cd e2e && npm run test:report
+```
+
+**Step 3: 分析剩余失败**
+
+检查 HTML 报告,识别剩余的失败测试:
+
+```bash
+open e2e/playwright-report/index.html
+```
+
+**Step 4: 创建修复总结文档**
+
+创建 `docs/test-fix-summary.md`:
+
+```markdown
+# 冒烟测试修复总结
+
+## 修复前统计
+- 总测试数: 1083
+- 通过: ~850 (78.5%)
+- 失败: ~233 (21.5%)
+
+## 修复后统计
+- 总测试数: 1083
+- 通过: [填写实际数字]
+- 失败: [填写实际数字]
+- 通过率: [填写实际百分比]
+
+## 已修复问题
+1. ✅ 导航菜单选择器
+2. ✅ 联系页面元素选择器
+3. ✅ 表单输入字段选择器
+4. ✅ 滚动到顶部功能
+5. ✅ 区块滚动和可见性
+6. ✅ 页面徽章和描述
+7. ✅ 页脚可见性
+8. ✅ 立即咨询按钮
+9. ✅ 测试超时设置
+
+## 剩余问题
+[列出剩余的失败测试]
+
+## 下一步计划
+[列出后续优化建议]
+```
+
+**Step 5: 提交最终修改**
+
+```bash
+git add docs/test-fix-summary.md
+git commit -m "docs: add smoke test fix summary"
+```
+
+---
+
+## 验收标准
+
+### 功能验收
+- [ ] 所有 P0 关键问题已修复
+- [ ] 所有 P1 高优先级问题已修复
+- [ ] 至少 80% 的 P2 中优先级问题已修复
+- [ ] 测试通过率 ≥ 95%
+
+### 代码质量验收
+- [ ] 所有修改都有对应的测试
+- [ ] 代码符合 ESLint 规则
+- [ ] TypeScript 类型检查通过
+- [ ] 无 console.log 或调试代码
+
+### 文档验收
+- [ ] 修复总结文档完整
+- [ ] 所有修改都有清晰的 commit message
+- [ ] 测试报告已生成
+
+---
+
+## 风险与缓解
+
+### 风险 1: 选择器变更影响生产代码
+**缓解:** 使用 `data-testid` 属性,不影响样式和功能
+
+### 风险 2: 超时时间增加影响 CI 速度
+**缓解:** 仅在必要时增加超时,优先优化等待逻辑
+
+### 风险 3: 移动端测试不稳定
+**缓解:** 增加重试次数,优化移动端特定选择器
+
+---
+
+## 执行建议
+
+### 推荐执行方式
+使用 **Subagent-Driven Development** 模式:
+- 每个任务由独立的 subagent 执行
+- 任务间进行代码审查
+- 快速迭代,及时调整
+
+### 执行顺序
+1. Task 1-3: 关键路径修复 (导航、联系页面、表单)
+2. Task 4-5: 功能修复 (滚动、区块)
+3. Task 6-8: 可见性修复 (徽章、页脚、按钮)
+4. Task 9: 稳定性优化
+5. Task 10: 验证和总结
+
+### 预计时间
+- Task 1-3: 2-3 小时
+- Task 4-8: 2-3 小时
+- Task 9-10: 1-2 小时
+- **总计: 5-8 小时**
+
+---
+
+## 后续优化建议
+
+### 短期 (1-2 周)
+1. 为所有关键元素添加 `data-testid` 属性
+2. 优化移动端测试配置
+3. 增加视觉回归测试
+
+### 中期 (1 个月)
+1. 建立 E2E 测试最佳实践文档
+2. 实施测试覆盖率监控
+3. 集成到 CI/CD 流程
+
+### 长期 (3 个月)
+1. 建立测试性能基准
+2. 实施自动化测试报告
+3. 优化测试执行时间

docs/plans/2026-03-05-test-suite-execution-and-optimization.md

@@ -0,0 +1,789 @@
+# Test Suite Execution and Code Optimization Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Run the complete E2E test suite, identify failures, and fix or optimize code to ensure all tests pass.
+
+**Architecture:** Execute Playwright test suite in phases (smoke → regression → performance → accessibility), analyze failures, implement fixes following TDD principles, and verify with re-runs.
+
+**Tech Stack:** Playwright, TypeScript, Next.js, React, Tailwind CSS
+
+---
+
+### Task 1: Prepare Test Environment and Dependencies
+
+**Files:**
+- Check: `e2e/package.json`
+- Check: `package.json`
+
+**Step 1: Verify Playwright installation**
+
+Run: `cd e2e && npx playwright --version`
+
+Expected: Playwright version displayed (e.g., 1.58.2)
+
+**Step 2: Install Playwright browsers if needed**
+
+Run: `cd e2e && npm run install`
+
+Expected: Browsers installed successfully
+
+**Step 3: Verify development server is not running**
+
+Run: `lsof -ti:3000`
+
+Expected: No output (port 3000 is free)
+
+---
+
+### Task 2: Run Smoke Tests (Critical Path Validation)
+
+**Files:**
+- Test: `e2e/src/tests/smoke/*.spec.ts`
+- Modify: Based on test failures
+
+**Step 1: Run smoke tests**
+
+Run: `cd e2e && npm run test:smoke`
+
+Expected: All smoke tests pass or specific failures identified
+
+**Step 2: Analyze smoke test results**
+
+Run: `cd e2e && npm run test:report`
+
+Expected: HTML report opens showing test results
+
+**Step 3: Document smoke test failures**
+
+Create: `test-results/smoke-failures.md`
+
+```markdown
+# Smoke Test Failures
+
+## Failed Tests
+- [ ] Test Name: Description of failure
+- [ ] Test Name: Description of failure
+
+## Common Issues
+- Issue 1: Description
+- Issue 2: Description
+```
+
+---
+
+### Task 3: Fix Smoke Test Failures
+
+**Files:**
+- Modify: Based on specific failures
+- Test: `e2e/src/tests/smoke/*.spec.ts`
+
+**Step 1: Identify root cause of first failure**
+
+Run: `cd e2e && npx playwright test --grep @smoke --debug`
+
+Expected: Debug mode opens, allows inspection
+
+**Step 2: Implement fix for first failure**
+
+Modify: [Specific file based on failure]
+
+```typescript
+// Fix implementation based on test failure
+```
+
+**Step 3: Verify fix with targeted test**
+
+Run: `cd e2e && npx playwright test --grep "specific-test-name"`
+
+Expected: Test passes
+
+**Step 4: Commit fix**
+
+Run: `git add [modified-files] && git commit -m "fix: resolve smoke test failure - [test-name]"`
+
+Expected: Commit successful
+
+**Step 5: Repeat for all smoke test failures**
+
+Run: `cd e2e && npm run test:smoke`
+
+Expected: All smoke tests pass
+
+---
+
+### Task 4: Run Regression Tests (Feature Validation)
+
+**Files:**
+- Test: `e2e/src/tests/regression/*.spec.ts`
+- Modify: Based on test failures
+
+**Step 1: Run regression tests**
+
+Run: `cd e2e && npm run test:regression`
+
+Expected: All regression tests pass or specific failures identified
+
+**Step 2: Analyze regression test results**
+
+Run: `cd e2e && npm run test:report`
+
+Expected: HTML report opens showing test results
+
+**Step 3: Document regression test failures**
+
+Create: `test-results/regression-failures.md`
+
+```markdown
+# Regression Test Failures
+
+## Failed Tests
+- [ ] Test Name: Description of failure
+- [ ] Test Name: Description of failure
+
+## Common Issues
+- Issue 1: Description
+- Issue 2: Description
+```
+
+---
+
+### Task 5: Fix Regression Test Failures
+
+**Files:**
+- Modify: Based on specific failures
+- Test: `e2e/src/tests/regression/*.spec.ts`
+
+**Step 1: Identify root cause of first failure**
+
+Run: `cd e2e && npx playwright test --grep @regression --debug`
+
+Expected: Debug mode opens, allows inspection
+
+**Step 2: Implement fix for first failure**
+
+Modify: [Specific file based on failure]
+
+```typescript
+// Fix implementation based on test failure
+```
+
+**Step 3: Verify fix with targeted test**
+
+Run: `cd e2e && npx playwright test --grep "specific-test-name"`
+
+Expected: Test passes
+
+**Step 4: Commit fix**
+
+Run: `git add [modified-files] && git commit -m "fix: resolve regression test failure - [test-name]"`
+
+Expected: Commit successful
+
+**Step 5: Repeat for all regression test failures**
+
+Run: `cd e2e && npm run test:regression`
+
+Expected: All regression tests pass
+
+---
+
+### Task 6: Run Performance Tests
+
+**Files:**
+- Test: `e2e/src/tests/performance/*.spec.ts`
+- Modify: Based on test failures
+
+**Step 1: Run performance tests**
+
+Run: `cd e2e && npm run test:performance`
+
+Expected: All performance tests pass or specific failures identified
+
+**Step 2: Analyze performance test results**
+
+Run: `cd e2e && npm run test:report`
+
+Expected: HTML report opens showing test results
+
+**Step 3: Document performance issues**
+
+Create: `test-results/performance-issues.md`
+
+```markdown
+# Performance Test Issues
+
+## Failed Tests
+- [ ] Test Name: Description of failure
+- [ ] Test Name: Description of failure
+
+## Performance Metrics
+- LCP (Largest Contentful Paint): [value]s (target: < 2.5s)
+- FID (First Input Delay): [value]ms (target: < 100ms)
+- CLS (Cumulative Layout Shift): [value] (target: < 0.1)
+
+## Optimization Opportunities
+- Issue 1: Description
+- Issue 2: Description
+```
+
+---
+
+### Task 7: Optimize Performance Issues
+
+**Files:**
+- Modify: Based on performance issues
+- Test: `e2e/src/tests/performance/*.spec.ts`
+
+**Step 1: Optimize first performance issue**
+
+Modify: [Specific file based on issue]
+
+```typescript
+// Performance optimization implementation
+```
+
+**Step 2: Verify optimization with targeted test**
+
+Run: `cd e2e && npx playwright test --grep "specific-performance-test"`
+
+Expected: Test passes with improved metrics
+
+**Step 3: Commit optimization**
+
+Run: `git add [modified-files] && git commit -m "perf: optimize [component/feature] - [improvement]"`
+
+Expected: Commit successful
+
+**Step 4: Repeat for all performance issues**
+
+Run: `cd e2e && npm run test:performance`
+
+Expected: All performance tests pass
+
+---
+
+### Task 8: Run Accessibility Tests
+
+**Files:**
+- Test: `e2e/src/tests/accessibility/*.spec.ts`
+- Modify: Based on test failures
+
+**Step 1: Run accessibility tests**
+
+Run: `cd e2e && npm run test:accessibility`
+
+Expected: All accessibility tests pass or specific failures identified
+
+**Step 2: Analyze accessibility test results**
+
+Run: `cd e2e && npm run test:report`
+
+Expected: HTML report opens showing test results
+
+**Step 3: Document accessibility issues**
+
+Create: `test-results/accessibility-issues.md`
+
+```markdown
+# Accessibility Test Issues
+
+## Failed Tests
+- [ ] Test Name: Description of failure
+- [ ] Test Name: Description of failure
+
+## WCAG Violations
+- Level A: [count] violations
+- Level AA: [count] violations
+- Level AAA: [count] violations
+
+## Common Issues
+- Issue 1: Description
+- Issue 2: Description
+```
+
+---
+
+### Task 9: Fix Accessibility Issues
+
+**Files:**
+- Modify: Based on accessibility issues
+- Test: `e2e/src/tests/accessibility/*.spec.ts`
+
+**Step 1: Fix first accessibility issue**
+
+Modify: [Specific file based on issue]
+
+```typescript
+// Accessibility fix implementation
+```
+
+**Step 2: Verify fix with targeted test**
+
+Run: `cd e2e && npx playwright test --grep "specific-accessibility-test"`
+
+Expected: Test passes
+
+**Step 3: Commit fix**
+
+Run: `git add [modified-files] && git commit -m "a11y: fix [accessibility-issue] - [wcag-guideline]"`
+
+Expected: Commit successful
+
+**Step 4: Repeat for all accessibility issues**
+
+Run: `cd e2e && npm run test:accessibility`
+
+Expected: All accessibility tests pass
+
+---
+
+### Task 10: Run Visual Regression Tests
+
+**Files:**
+- Test: `e2e/src/tests/visual/*.spec.ts`
+- Modify: Based on test failures
+
+**Step 1: Run visual regression tests**
+
+Run: `cd e2e && npm run test:visual`
+
+Expected: All visual tests pass or specific failures identified
+
+**Step 2: Analyze visual test results**
+
+Run: `cd e2e && npm run test:report`
+
+Expected: HTML report opens showing test results
+
+**Step 3: Review visual differences**
+
+Run: `cd e2e && npx playwright show-report`
+
+Expected: Visual comparison shows differences
+
+**Step 4: Document visual issues**
+
+Create: `test-results/visual-issues.md`
+
+```markdown
+# Visual Regression Test Issues
+
+## Failed Tests
+- [ ] Test Name: Description of failure
+- [ ] Test Name: Description of failure
+
+## Visual Differences
+- Component 1: [description of difference]
+- Component 2: [description of difference]
+
+## Action Required
+- [ ] Accept changes (intentional design updates)
+- [ ] Fix issues (unintended visual regressions)
+```
+
+---
+
+### Task 11: Fix Visual Regression Issues
+
+**Files:**
+- Modify: Based on visual issues
+- Test: `e2e/src/tests/visual/*.spec.ts`
+
+**Step 1: Determine if visual difference is intentional**
+
+Run: `cd e2e && npx playwright test --grep "specific-visual-test" --update-snapshots`
+
+Expected: Only run if difference is intentional
+
+**Step 2: Fix unintended visual regression**
+
+Modify: [Specific file based on issue]
+
+```typescript
+// Visual regression fix implementation
+```
+
+**Step 3: Verify fix with targeted test**
+
+Run: `cd e2e && npx playwright test --grep "specific-visual-test"`
+
+Expected: Test passes
+
+**Step 4: Commit fix**
+
+Run: `git add [modified-files] && git commit -m "fix: resolve visual regression - [component]"`
+
+Expected: Commit successful
+
+**Step 5: Repeat for all visual issues**
+
+Run: `cd e2e && npm run test:visual`
+
+Expected: All visual tests pass
+
+---
+
+### Task 12: Run Responsive Tests
+
+**Files:**
+- Test: `e2e/src/tests/responsive/*.spec.ts`
+- Modify: Based on test failures
+
+**Step 1: Run responsive tests**
+
+Run: `cd e2e && npm run test:responsive`
+
+Expected: All responsive tests pass or specific failures identified
+
+**Step 2: Analyze responsive test results**
+
+Run: `cd e2e && npm run test:report`
+
+Expected: HTML report opens showing test results
+
+**Step 3: Document responsive issues**
+
+Create: `test-results/responsive-issues.md`
+
+```markdown
+# Responsive Test Issues
+
+## Failed Tests
+- [ ] Test Name: Description of failure
+- [ ] Test Name: Description of failure
+
+## Breakpoint Issues
+- Mobile (< 768px): [count] issues
+- Tablet (768px - 1024px): [count] issues
+- Desktop (> 1024px): [count] issues
+
+## Common Issues
+- Issue 1: Description
+- Issue 2: Description
+```
+
+---
+
+### Task 13: Fix Responsive Issues
+
+**Files:**
+- Modify: Based on responsive issues
+- Test: `e2e/src/tests/responsive/*.spec.ts`
+
+**Step 1: Fix first responsive issue**
+
+Modify: [Specific file based on issue]
+
+```typescript
+// Responsive fix implementation
+```
+
+**Step 2: Verify fix with targeted test**
+
+Run: `cd e2e && npx playwright test --grep "specific-responsive-test"`
+
+Expected: Test passes
+
+**Step 3: Commit fix**
+
+Run: `git add [modified-files] && git commit -m "fix: resolve responsive issue - [breakpoint/component]"`
+
+Expected: Commit successful
+
+**Step 4: Repeat for all responsive issues**
+
+Run: `cd e2e && npm run test:responsive`
+
+Expected: All responsive tests pass
+
+---
+
+### Task 14: Run Security Tests
+
+**Files:**
+- Test: `e2e/src/tests/security/*.spec.ts`
+- Modify: Based on test failures
+
+**Step 1: Run security tests**
+
+Run: `cd e2e && npm run test:security`
+
+Expected: All security tests pass or specific failures identified
+
+**Step 2: Analyze security test results**
+
+Run: `cd e2e && npm run test:report`
+
+Expected: HTML report opens showing test results
+
+**Step 3: Document security issues**
+
+Create: `test-results/security-issues.md`
+
+```markdown
+# Security Test Issues
+
+## Failed Tests
+- [ ] Test Name: Description of failure
+- [ ] Test Name: Description of failure
+
+## Security Vulnerabilities
+- XSS: [count] issues
+- CSRF: [count] issues
+- Content Security Policy: [count] issues
+
+## Common Issues
+- Issue 1: Description
+- Issue 2: Description
+```
+
+---
+
+### Task 15: Fix Security Issues
+
+**Files:**
+- Modify: Based on security issues
+- Test: `e2e/src/tests/security/*.spec.ts`
+
+**Step 1: Fix first security issue**
+
+Modify: [Specific file based on issue]
+
+```typescript
+// Security fix implementation
+```
+
+**Step 2: Verify fix with targeted test**
+
+Run: `cd e2e && npx playwright test --grep "specific-security-test"`
+
+Expected: Test passes
+
+**Step 3: Commit fix**
+
+Run: `git add [modified-files] && git commit -m "security: fix [security-issue] - [cwe/owasp]"`
+
+Expected: Commit successful
+
+**Step 4: Repeat for all security issues**
+
+Run: `cd e2e && npm run test:security`
+
+Expected: All security tests pass
+
+---
+
+### Task 16: Run Complete Test Suite
+
+**Files:**
+- Test: `e2e/src/tests/**/*.spec.ts`
+
+**Step 1: Run all tests**
+
+Run: `cd e2e && npm run test`
+
+Expected: All tests pass or specific failures identified
+
+**Step 2: Generate comprehensive test report**
+
+Run: `cd e2e && npm run test:report`
+
+Expected: HTML report opens showing all test results
+
+**Step 3: Generate Allure report**
+
+Run: `cd e2e && npm run test:allure && npm run test:allure:open`
+
+Expected: Allure report opens with detailed metrics
+
+---
+
+### Task 17: Final Code Quality Check
+
+**Files:**
+- Check: All modified files
+
+**Step 1: Run ESLint**
+
+Run: `npm run lint`
+
+Expected: No linting errors
+
+**Step 2: Fix any linting issues**
+
+Modify: Files with linting errors
+
+```typescript
+// Linting fix implementation
+```
+
+**Step 3: Verify linting passes**
+
+Run: `npm run lint`
+
+Expected: No linting errors
+
+**Step 4: Commit linting fixes**
+
+Run: `git add [modified-files] && git commit -m "style: fix linting issues"`
+
+Expected: Commit successful
+
+---
+
+### Task 18: Generate Final Test Report
+
+**Files:**
+- Create: `test-results/final-test-report.md`
+
+**Step 1: Create comprehensive test report**
+
+Create: `test-results/final-test-report.md`
+
+```markdown
+# Final Test Report
+
+## Test Execution Summary
+- Total Tests: [count]
+- Passed: [count]
+- Failed: [count]
+- Skipped: [count]
+- Flaky: [count]
+
+## Test Categories
+- Smoke: [passed]/[total]
+- Regression: [passed]/[total]
+- Performance: [passed]/[total]
+- Accessibility: [passed]/[total]
+- Visual: [passed]/[total]
+- Responsive: [passed]/[total]
+- Security: [passed]/[total]
+
+## Fixes Applied
+- Smoke Test Fixes: [count]
+- Regression Fixes: [count]
+- Performance Optimizations: [count]
+- Accessibility Fixes: [count]
+- Visual Fixes: [count]
+- Responsive Fixes: [count]
+- Security Fixes: [count]
+
+## Remaining Issues
+- [ ] Issue 1: Description
+- [ ] Issue 2: Description
+
+## Recommendations
+- Recommendation 1: Description
+- Recommendation 2: Description
+```
+
+**Step 2: Commit final report**
+
+Run: `git add test-results/final-test-report.md && git commit -m "docs: add final test report"`
+
+Expected: Commit successful
+
+---
+
+### Task 19: Verify Production Build
+
+**Files:**
+- Check: `package.json`
+
+**Step 1: Run production build**
+
+Run: `npm run build`
+
+Expected: Build completes successfully
+
+**Step 2: Fix any build errors**
+
+Modify: Files with build errors
+
+```typescript
+// Build error fix implementation
+```
+
+**Step 3: Verify build passes**
+
+Run: `npm run build`
+
+Expected: Build completes successfully
+
+**Step 4: Commit build fixes**
+
+Run: `git add [modified-files] && git commit -m "fix: resolve build errors"`
+
+Expected: Commit successful
+
+---
+
+### Task 20: Final Verification and Documentation
+
+**Files:**
+- Create: `test-results/optimization-summary.md`
+
+**Step 1: Create optimization summary**
+
+Create: `test-results/optimization-summary.md`
+
+```markdown
+# Test Suite Execution and Code Optimization Summary
+
+## Overview
+Executed complete E2E test suite and fixed all identified issues.
+
+## Test Results
+- Smoke Tests: ✅ All passed
+- Regression Tests: ✅ All passed
+- Performance Tests: ✅ All passed
+- Accessibility Tests: ✅ All passed
+- Visual Tests: ✅ All passed
+- Responsive Tests: ✅ All passed
+- Security Tests: ✅ All passed
+
+## Code Improvements
+- Performance Optimizations: [count]
+- Accessibility Improvements: [count]
+- Bug Fixes: [count]
+- Security Enhancements: [count]
+
+## Metrics
+- Test Coverage: [percentage]%
+- Performance Improvement: [percentage]%
+- Accessibility Score: [score]/100
+
+## Next Steps
+- [ ] Monitor test results in CI/CD
+- [ ] Schedule regular test runs
+- [ ] Update test cases as needed
+```
+
+**Step 2: Commit optimization summary**
+
+Run: `git add test-results/optimization-summary.md && git commit -m "docs: add optimization summary"`
+
+Expected: Commit successful
+
+---
+
+## Success Criteria
+
+- ✅ All E2E tests pass (100% pass rate)
+- ✅ No linting errors
+- ✅ Production build succeeds
+- ✅ Performance metrics meet targets
+- ✅ Accessibility compliance achieved
+- ✅ Security vulnerabilities resolved
+- ✅ Visual regressions fixed
+- ✅ Responsive design verified
+
+## Notes
+
+- Each test category should be run sequentially
+- Fix issues immediately after identification
+- Commit frequently with descriptive messages
+- Use debug mode for complex failures
+- Update test cases if requirements change
+- Monitor flaky tests and stabilize them