novalon-website/docs/plans/2026-03-07-critical-issues-fix.md

# Critical Issues Fix Implementation Plan

> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

**Goal:** Fix all critical and high-priority issues identified in the deployment readiness assessment to achieve 95%+ test pass rate and enable safe deployment.

**Architecture:** Fix mobile navigation issues, update page selectors, correct page titles, and improve scrolling functionality using Playwright E2E tests with TDD approach.

**Tech Stack:** Playwright, TypeScript, Next.js 16, React 19, Tailwind CSS 4

---

## Task 1: Fix Mobile Navigation Menu Functionality

**Priority:** P0 (Critical)
**Estimated Time:** 2-3 hours
**Files:**
- Modify: `e2e/src/pages/BasePage.ts`
- Modify: `e2e/src/pages/HomePage.ts`
- Modify: `src/components/layout/mobile-menu.tsx`
- Test: `e2e/src/tests/smoke/navigation.smoke.spec.ts`

**Step 1: Analyze the mobile menu component structure**

Run: `cat src/components/layout/mobile-menu.tsx`

Expected: Identify the mobile menu button and menu container structure

**Step 2: Update BasePage mobile menu selectors**

```typescript
// e2e/src/pages/BasePage.ts
export class BasePage {
  readonly page: Page;
  readonly mobileMenuButton: Locator;
  readonly mobileMenu: Locator;
  readonly mobileMenuCloseButton: Locator;

  constructor(page: Page) {
    this.page = page;
    this.mobileMenuButton = page.getByRole('button', { name: /打开菜单|menu/i });
    this.mobileMenu = page.locator('[role="dialog"], [role="navigation"], .mobile-menu');
    this.mobileMenuCloseButton = page.getByRole('button', { name: /关闭|close/i });
  }

  async openMobileMenu() {
    await this.mobileMenuButton.click();
    await this.mobileMenu.waitFor({ state: 'visible', timeout: 5000 });
  }

  async closeMobileMenu() {
    if (await this.mobileMenu.isVisible()) {
      await this.mobileMenuCloseButton.click();
      await this.mobileMenu.waitFor({ state: 'hidden', timeout: 5000 });
    }
  }

  async isMobileMenuOpen() {
    return await this.mobileMenu.isVisible();
  }
}
```

**Step 3: Update HomePage to extend BasePage properly**

```typescript
// e2e/src/pages/HomePage.ts
import { BasePage } from './BasePage';

export class HomePage extends BasePage {
  readonly navigation: Locator;
  readonly logo: Locator;

  constructor(page: Page) {
    super(page);
    this.navigation = page.locator('nav, [role="navigation"]');
    this.logo = page.getByRole('link', { name: /四川睿新致远|novalon/i });
  }
}
```

**Step 4: Run navigation smoke tests to verify fixes**

Run: `cd e2e && npm run test:smoke -- --grep "导航冒烟测试"`

Expected: See current failures for mobile menu tests

**Step 5: Fix mobile menu component if needed**

Check: `src/components/layout/mobile-menu.tsx`

Ensure the mobile menu has proper ARIA attributes:
```tsx
<button
  aria-label="打开菜单"
  aria-expanded={isOpen}
  onClick={toggleMenu}
>
  {/* Menu icon */}
</button>

{isOpen && (
  <nav
    role="navigation"
    aria-label="主导航"
    className="mobile-menu"
  >
    {/* Menu items */}
    <button
      aria-label="关闭菜单"
      onClick={toggleMenu}
    >
      {/* Close icon */}
    </button>
  </nav>
)}
```

**Step 6: Run navigation smoke tests again**

Run: `cd e2e && npm run test:smoke -- --grep "导航冒烟测试"`

Expected: Mobile menu tests should pass

**Step 7: Commit mobile menu fixes**

```bash
git add e2e/src/pages/BasePage.ts e2e/src/pages/HomePage.ts src/components/layout/mobile-menu.tsx
git commit -m "fix: resolve mobile navigation menu selector issues"
```

---

## Task 2: Fix Main Navigation Menu Display

**Priority:** P0 (Critical)
**Estimated Time:** 1-2 hours
**Files:**
- Modify: `e2e/src/pages/HomePage.ts`
- Modify: `e2e/src/tests/smoke/navigation.smoke.spec.ts`
- Modify: `src/components/layout/header.tsx`

**Step 1: Update HomePage navigation selector to use Locator**

```typescript
// e2e/src/pages/HomePage.ts
export class HomePage extends BasePage {
  readonly navigation: Locator;

  constructor(page: Page) {
    super(page);
    this.navigation = page.locator('nav, [role="navigation"], .main-nav');
  }
}
```

**Step 2: Update navigation smoke test to use proper Locator**

```typescript
// e2e/src/tests/smoke/navigation.smoke.spec.ts
test('应该显示主导航菜单', async ({ homePage }) => {
  const nav = homePage.page.locator('nav, [role="navigation"]');
  await expect(nav.first()).toBeVisible();
});
```

**Step 3: Ensure header component has proper semantic HTML**

Check: `src/components/layout/header.tsx`

```tsx
<nav role="navigation" aria-label="主导航" className="main-nav">
  <ul>
    <li><a href="/services">服务</a></li>
    <li><a href="/products">产品</a></li>
    <li><a href="/cases">案例</a></li>
    <li><a href="/news">新闻</a></li>
    <li><a href="/about">关于我们</a></li>
  </ul>
</nav>
```

**Step 4: Run navigation tests**

Run: `cd e2e && npm run test:smoke -- --grep "应该显示主导航菜单"`

Expected: Test should pass

**Step 5: Commit navigation display fixes**

```bash
git add e2e/src/pages/HomePage.ts e2e/src/tests/smoke/navigation.smoke.spec.ts src/components/layout/header.tsx
git commit -m "fix: resolve main navigation menu display issues"
```

---

## Task 3: Fix Page Section Display Issues

**Priority:** P0 (Critical)
**Estimated Time:** 2-3 hours
**Files:**
- Modify: `e2e/src/pages/HomePage.ts`
- Modify: `e2e/src/tests/smoke/home-page.smoke.spec.ts`
- Modify: `src/components/sections/*.tsx`

**Step 1: Add section locators to HomePage**

```typescript
// e2e/src/pages/HomePage.ts
export class HomePage extends BasePage {
  readonly heroSection: Locator;
  readonly servicesSection: Locator;
  readonly productsSection: Locator;
  readonly casesSection: Locator;
  readonly footer: Locator;

  constructor(page: Page) {
    super(page);
    this.heroSection = page.locator('section:has(h1), [role="region"]:has(h1)');
    this.servicesSection = page.getByRole('region', { name: /核心业务|服务/i });
    this.productsSection = page.getByRole('region', { name: /产品/i });
    this.casesSection = page.getByRole('region', { name: /案例/i });
    this.footer = page.locator('footer');
  }

  async scrollToSection(section: Locator) {
    await section.scrollIntoViewIfNeeded();
    await this.page.waitForTimeout(500);
  }
}
```

**Step 2: Update home page smoke tests to use section locators**

```typescript
// e2e/src/tests/smoke/home-page.smoke.spec.ts
test('应该显示所有主要区块', async ({ homePage }) => {
  await expect(homePage.heroSection).toBeVisible();
  await expect(homePage.servicesSection).toBeVisible();
  await expect(homePage.productsSection).toBeVisible();
  await expect(homePage.casesSection).toBeVisible();
});

test('应该显示页脚', async ({ homePage }) => {
  await expect(homePage.footer).toBeVisible();
});
```

**Step 3: Ensure sections have proper ARIA roles**

Check each section component and add role if missing:
```tsx
<section role="region" aria-labelledby="services-heading">
  <h2 id="services-heading">我们的 核心业务</h2>
  {/* Section content */}
</section>
```

**Step 4: Run home page smoke tests**

Run: `cd e2e && npm run test:smoke -- --grep "首页冒烟测试"`

Expected: Section display tests should pass

**Step 5: Commit section display fixes**

```bash
git add e2e/src/pages/HomePage.ts e2e/src/tests/smoke/home-page.smoke.spec.ts src/components/sections/
git commit -m "fix: resolve page section display issues"
```

---

## Task 4: Fix Work Hours Information Retrieval

**Priority:** P1 (High)
**Estimated Time:** 30 minutes
**Files:**
- Modify: `e2e/src/pages/ContactPage.ts`
- Modify: `src/app/(marketing)/contact/page.tsx`

**Step 1: Update ContactPage work hours selector**

```typescript
// e2e/src/pages/ContactPage.ts
export class ContactPage extends BasePage {
  async getWorkHours() {
    const workHoursItems = this.page.locator('[aria-label="工作时间"] + div, .work-hours > div');
    const count = await workHoursItems.count();
    const items = [];

    for (let i = 0; i < count; i++) {
      const item = workHoursItems.nth(i);
      const day = await item.locator('div').first().textContent();
      const hours = await item.locator('div').nth(1).textContent();
      if (day && hours) {
        items.push({ day: day.trim(), hours: hours.trim() });
      }
    }

    return items;
  }
}
```

**Step 2: Ensure contact page has proper work hours structure**

Check: `src/app/(marketing)/contact/page.tsx`

```tsx
<div aria-label="工作时间" className="work-hours">
  <div>
    <div>周一至周五</div>
    <div>9:00 - 18:00</div>
  </div>
</div>
```

**Step 3: Run contact page smoke tests**

Run: `cd e2e && npm run test:smoke -- --grep "联系页面冒烟测试.*工作时间"`

Expected: Work hours tests should pass

**Step 4: Commit work hours fixes**

```bash
git add e2e/src/pages/ContactPage.ts src/app/(marketing)/contact/page.tsx
git commit -m "fix: resolve work hours information retrieval"
```

---

## Task 5: Fix Page Scrolling Functionality

**Priority:** P1 (High)
**Estimated Time:** 1-2 hours
**Files:**
- Modify: `e2e/src/pages/BasePage.ts`
- Modify: `e2e/src/tests/smoke/navigation.smoke.spec.ts`
- Modify: `e2e/src/tests/smoke/home-page.smoke.spec.ts`

**Step 1: Add robust scrolling methods to BasePage**

```typescript
// e2e/src/pages/BasePage.ts
async scrollToTop() {
  await this.page.evaluate(() => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });
  await this.page.waitForTimeout(1000);
}

async scrollToBottom() {
  await this.page.evaluate(() => {
    window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
  });
  await this.page.waitForTimeout(1000);
}

async scrollToElement(selector: string) {
  const element = this.page.locator(selector);
  await element.scrollIntoViewIfNeeded({ timeout: 5000 });
  await this.page.waitForTimeout(500);
}
```

**Step 2: Update scrolling tests with better error handling**

```typescript
// e2e/src/tests/smoke/navigation.smoke.spec.ts
test('应该能够滚动到页面顶部', async ({ homePage }) => {
  await homePage.scrollToBottom();
  await homePage.scrollToTop();
  const scrollPosition = await homePage.page.evaluate(() => window.scrollY);
  expect(scrollPosition).toBeLessThan(100);
});

test('应该能够滚动到页面底部', async ({ homePage }) => {
  await homePage.scrollToBottom();
  const scrollPosition = await homePage.page.evaluate(() => {
    return window.scrollY + window.innerHeight;
  });
  const pageHeight = await homePage.page.evaluate(() => document.body.scrollHeight);
  expect(scrollPosition).toBeGreaterThanOrEqual(pageHeight - 100);
});
```

**Step 3: Run scrolling tests**

Run: `cd e2e && npm run test:smoke -- --grep "滚动"`

Expected: Scrolling tests should pass

**Step 4: Commit scrolling fixes**

```bash
git add e2e/src/pages/BasePage.ts e2e/src/tests/smoke/navigation.smoke.spec.ts e2e/src/tests/smoke/home-page.smoke.spec.ts
git commit -m "fix: resolve page scrolling functionality issues"
```

---

## Task 6: Fix Contact Page Title

**Priority:** P2 (Medium)
**Estimated Time:** 10 minutes
**Files:**
- Modify: `src/app/(marketing)/contact/page.tsx`
- Modify: `e2e/src/tests/smoke/contact-page.smoke.spec.ts`

**Step 1: Update contact page title**

```typescript
// src/app/(marketing)/contact/page.tsx
export const metadata = {
  title: '联系我们 - 四川睿新致远科技有限公司',
  description: '无论您有任何问题或合作意向，我们都很乐意与您交流',
};
```

**Step 2: Update page heading to match title**

```tsx
// src/app/(marketing)/contact/page.tsx
<h1>联系我们</h1>
```

**Step 3: Update test to match actual title**

```typescript
// e2e/src/tests/smoke/contact-page.smoke.spec.ts
test('应该显示正确的页面标题', async ({ contactPage }) => {
  const title = await contactPage.page.title();
  expect(title).toBeTruthy();
  expect(title.length).toBeGreaterThan(0);
  expect(title).toContain('联系');
});
```

**Step 4: Run contact page title test**

Run: `cd e2e && npm run test:smoke -- --grep "应该显示正确的页面标题"`

Expected: Title test should pass

**Step 5: Commit title fixes**

```bash
git add src/app/(marketing)/contact/page.tsx e2e/src/tests/smoke/contact-page.smoke.spec.ts
git commit -m "fix: correct contact page title"
```

---

## Task 7: Run Full Test Suite and Verify

**Priority:** P0 (Critical)
**Estimated Time:** 45 minutes
**Files:**
- Test: All smoke tests

**Step 1: Run all smoke tests**

Run: `cd e2e && npm run test:smoke`

Expected: All smoke tests should pass with >95% pass rate

**Step 2: Generate test report**

Run: `cd e2e && npm run test:report`

Expected: HTML report generated

**Step 3: Check test results**

Run: `cd e2e && node analyze-results.js`

Expected: Pass rate should be >95%

**Step 4: If any tests fail, analyze and fix**

Run: `cd e2e && npx playwright show-report`

Expected: Identify any remaining failures and create additional fix tasks

**Step 5: Commit test results**

```bash
git add e2e/test-results/ e2e/analyze-results.js
git commit -m "test: verify all critical fixes with full test suite"
```

---

## Task 8: Create Deployment Readiness Report

**Priority:** P0 (Critical)
**Estimated Time:** 30 minutes
**Files:**
- Create: `docs/reports/2026-03-07-fixes-completion-report.md`

**Step 1: Generate completion report**

Create report with:
- Summary of all fixes implemented
- Before and after test results
- Remaining issues (if any)
- Deployment readiness status
- Recommendations

**Step 2: Commit report**

```bash
git add docs/reports/2026-03-07-fixes-completion-report.md
git commit -m "docs: add fixes completion report"
```

---

## Verification Checklist

After completing all tasks, verify:

- [ ] All P0 issues fixed (mobile navigation, main navigation, page sections)
- [ ] All P1 issues fixed (work hours, scrolling)
- [ ] All P2 issues fixed (page title)
- [ ] Smoke test pass rate >95%
- [ ] No critical failures remaining
- [ ] All changes committed with clear messages
- [ ] Completion report generated

---

## Rollback Plan

If any fix introduces new issues:

1. Identify the problematic commit
2. Revert the specific commit: `git revert <commit-hash>`
3. Re-run tests to verify stability
4. Document the issue for future investigation

---

## Success Criteria

- Smoke test pass rate: >95%
- Navigation tests: 100% pass
- Home page tests: 100% pass
- Contact page tests: 100% pass
- Zero P0 or P1 issues remaining
- Ready for deployment with confidence