novalon-manage-system/docs/superpowers/specs/2026-04-15-user-role-menu-test-fix-design.md

# 用户管理和角色管理测试修复设计文档

**日期**: 2026-04-15  
**作者**: 张翔  
**版本**: 1.0

## 1. 背景与问题

### 1.1 问题背景

在User Journey测试过程中，发现以下两个测试失败：
1. **导航到用户管理页面**: 测试超时失败
2. **导航到角色管理页面**: 测试超时失败

### 1.2 问题根因分析

**根本原因**: 用户管理和角色管理是"系统管理"菜单下的二级菜单项。在Element Plus的菜单组件中，当父菜单处于折叠状态时，子菜单项是不可见的。测试脚本直接尝试点击这些不可见的菜单项，导致超时失败。

**错误信息**:
```
locator.click: Timeout 30000ms exceeded.
Call log:
  - waiting for locator('text=用户管理').first()
    - locator resolved to <span>用户管理</span>
  - attempting click action
    - waiting for element to be visible, enabled and stable
      - element is not visible
```

**对比分析**:
- ✅ 系统配置测试：正确地先展开了系统管理菜单，测试通过
- ❌ 用户管理测试：直接尝试点击菜单项，测试失败
- ❌ 角色管理测试：直接尝试点击菜单项，测试失败

## 2. 解决方案设计

### 2.1 设计目标

修复用户管理和角色管理测试，使其能够正确展开系统管理菜单后再点击子菜单项，提高测试通过率。

### 2.2 技术方案

采用与系统配置测试相同的策略：先展开父菜单，再点击子菜单项。

### 2.3 实现细节

#### 2.3.1 修改用户管理测试

**文件**: `novalon-manage-web/user-journey-test.js`

**修改位置**: 第140-180行

**修改内容**:
```javascript
// 阶段2: 用户管理测试
console.log('\n📋 阶段2: 用户管理测试');
console.log('=====================================');

try {
  // 首先展开系统管理菜单（如果是折叠状态）
  const systemMenuSelector = '.el-sub-menu:has-text("系统管理")';
  const systemMenuElement = page.locator(systemMenuSelector).first();
  
  if (await systemMenuElement.count() > 0) {
    // 点击展开系统管理菜单
    await systemMenuElement.click();
    await page.waitForTimeout(500);
    
    // 然后点击用户管理菜单项
    const userMenuSelectors = [
      '.el-menu-item:has-text("用户管理")',
      'text=用户管理',
      'text=用户',
      '[data-menu="user"]',
      'a[href*="user"]'
    ];
    
    let navigated = false;
    for (const selector of userMenuSelectors) {
      const element = page.locator(selector).first();
      if (await element.count() > 0) {
        await element.click();
        navigated = true;
        break;
      }
    }
    
    if (navigated) {
      await page.waitForTimeout(1000);
      await captureStep(page, '04-user-management');
      logTest('导航到用户管理页面', true);
    } else {
      throw new Error('未找到用户管理菜单');
    }
  } else {
    throw new Error('未找到系统管理菜单');
  }
} catch (error) {
  logTest('导航到用户管理页面', false, error.message);
}
```

#### 2.3.2 修改角色管理测试

**文件**: `novalon-manage-web/user-journey-test.js`

**修改位置**: 第210-240行

**修改内容**:
```javascript
// ==================== 阶段3: 角色管理 ====================
console.log('\n📋 阶段3: 角色管理测试');
console.log('=====================================');

try {
  // 首先展开系统管理菜单（如果是折叠状态）
  const systemMenuSelector = '.el-sub-menu:has-text("系统管理")';
  const systemMenuElement = page.locator(systemMenuSelector).first();
  
  if (await systemMenuElement.count() > 0) {
    // 点击展开系统管理菜单
    await systemMenuElement.click();
    await page.waitForTimeout(500);
    
    // 然后点击角色管理菜单项
    const roleMenuSelectors = [
      '.el-menu-item:has-text("角色管理")',
      'text=角色管理',
      'text=角色',
      '[data-menu="role"]',
      'a[href*="role"]'
    ];
    
    let navigated = false;
    for (const selector of roleMenuSelectors) {
      const element = page.locator(selector).first();
      if (await element.count() > 0) {
        await element.click();
        navigated = true;
        break;
      }
    }
    
    if (navigated) {
      await page.waitForTimeout(1000);
      await captureStep(page, '05-role-management');
      logTest('导航到角色管理页面', true);
    } else {
      throw new Error('未找到角色管理菜单');
    }
  } else {
    throw new Error('未找到系统管理菜单');
  }
} catch (error) {
  logTest('导航到角色管理页面', false, error.message);
}
```

## 3. 验收标准

### 3.1 功能验收

- ✅ 用户管理测试能够成功导航到用户管理页面
- ✅ 角色管理测试能够成功导航到角色管理页面
- ✅ 测试通过率从80%提升到100%

### 3.2 质量验收

- ✅ 测试代码与系统配置测试保持一致的风格
- ✅ 测试代码包含清晰的注释
- ✅ 测试代码包含错误处理

### 3.3 测试验收

- ✅ User Journey测试全部通过（10/10）
- ✅ 新增Playwright测试全部通过（3/3）
- ✅ 测试报告生成成功

## 4. 影响范围

### 4.1 受影响的文件

- `novalon-manage-web/user-journey-test.js`: 修改用户管理和角色管理测试代码

### 4.2 不受影响的部分

- 前端代码：不修改
- 后端代码：不修改
- 数据库：不修改
- 其他测试：不修改

## 5. 风险评估

### 5.1 技术风险

- **风险等级**: 低
- **风险描述**: 修改仅涉及测试代码，不影响生产代码
- **缓解措施**: 修改后立即运行测试验证

### 5.2 业务风险

- **风险等级**: 无
- **风险描述**: 不涉及业务逻辑修改

## 6. 后续优化建议

1. **统一测试策略**: 将"先展开父菜单，再点击子菜单项"的策略应用到所有二级菜单测试中
2. **封装公共方法**: 将展开菜单的逻辑封装为公共方法，减少代码重复
3. **增加等待策略**: 使用更智能的等待策略（如等待元素可见）替代固定的timeout

## 7. 实施计划

1. 修改用户管理测试代码
2. 修改角色管理测试代码
3. 运行User Journey测试验证
4. 提交代码

**预计工作量**: 30分钟