# 端到端测试指南

这是 Telegram 管理系统的完整端到端测试套件，使用 Playwright 进行自动化测试。

## 🚀 快速开始

### 安装依赖

```bash
# 安装 Playwright 浏览器
pnpm test:install

# 或手动安装
npx playwright install
```

### 运行测试

```bash
# 运行所有测试
pnpm test

# 运行特定测试文件
pnpm test:auth          # 登录认证测试
pnpm test:account       # 账号管理测试
pnpm test:message       # 私信群发测试
pnpm test:marketing     # 营销中心测试
pnpm test:permission    # 权限控制测试
pnpm test:websocket     # WebSocket实时通信测试
pnpm test:responsive    # 响应式布局测试

# 运行特定浏览器测试
pnpm test:chrome        # Chrome浏览器
pnpm test:firefox       # Firefox浏览器
pnpm test:safari        # Safari浏览器
pnpm test:mobile        # 移动端测试

# 有头模式运行（显示浏览器界面）
pnpm test:headed

# 使用测试UI界面
pnpm test:ui

# 查看测试报告
pnpm test:report
```

## 📁 测试文件结构

```
tests/
├── e2e/                          # 端到端测试
│   ├── auth.test.ts             # 登录认证流程测试
│   ├── account-management.test.ts # 账号管理功能测试
│   ├── private-message.test.ts   # 私信群发功能测试
│   ├── marketing-center.test.ts  # 营销中心功能测试
│   ├── permission-control.test.ts # 权限控制功能测试
│   ├── websocket-realtime.test.ts # WebSocket实时通信测试
│   └── responsive-layout.test.ts  # 响应式布局测试
├── global-setup.ts              # 全局测试设置
├── global-teardown.ts           # 全局测试清理
└── README.md                    # 测试指南
```

## 🧪 测试覆盖范围

### 1. 登录认证测试 (`auth.test.ts`)

**测试功能**：

- ✅ 登录页面显示
- ✅ 表单验证
- ✅ 登录流程
- ✅ 记住密码功能
- ✅ 语言切换
- ✅ Token过期处理
- ✅ 退出登录
- ✅ 页面刷新状态保持
- ✅ 多标签页同步
- ✅ 权限角色测试
- ✅ 国际化功能

**测试账号**：

```javascript
// 管理员账号
admin / 111111;

// 超级管理员
super_admin / super123456;

// 普通用户
test_user / test123456;
```

### 2. 账号管理测试 (`account-management.test.ts`)

**测试功能**：

- ✅ 账号列表显示
- ✅ 搜索筛选功能
- ✅ 创建新账号
- ✅ 表单验证
- ✅ 编辑账号信息
- ✅ 查看账号详情
- ✅ 账号状态切换
- ✅ 批量操作
- ✅ 导出功能
- ✅ 分页功能
- ✅ 表格排序
- ✅ 删除账号
- ✅ 账号导入功能

### 3. 私信群发测试 (`private-message.test.ts`)

**测试功能**：

- ✅ 消息模板管理
- ✅ 创建消息模板
- ✅ 模板预览功能
- ✅ 编辑模板
- ✅ 变量替换功能
- ✅ 群发任务管理
- ✅ 创建群发任务
- ✅ 任务状态管理
- ✅ 任务详情页面
- ✅ 任务暂停恢复
- ✅ 发送记录查看
- ✅ 记录搜索筛选
- ✅ 记录详情查看
- ✅ 记录导出
- ✅ 统计图表
- ✅ 实时监控

### 4. 营销中心测试 (`marketing-center.test.ts`)

**测试功能**：

- ✅ 智能活动管理
- ✅ 创建营销活动
- ✅ 活动状态管理
- ✅ 活动详情页面
- ✅ 智能推荐功能
- ✅ 活动复制功能
- ✅ 客户分析
- ✅ 客户分群功能
- ✅ 客户行为分析
- ✅ 客户价值分析
- ✅ 客户流失分析
- ✅ 效果统计
- ✅ 时间范围筛选
- ✅ 渠道对比分析
- ✅ 活动效果对比
- ✅ 转化漏斗分析
- ✅ ROI分析
- ✅ 报告导出

### 5. 权限控制测试 (`permission-control.test.ts`)

**测试功能**：

- ✅ 权限管理页面
- ✅ 创建新权限
- ✅ 权限树展开折叠
- ✅ 权限详情查看
- ✅ 编辑权限信息
- ✅ 权限搜索功能
- ✅ 删除权限
- ✅ 角色管理页面
- ✅ 创建新角色
- ✅ 角色权限分配
- ✅ 角色状态切换
- ✅ 角色复制功能
- ✅ 删除角色
- ✅ 路由权限验证
- ✅ 菜单权限过滤
- ✅ 按钮权限控制
- ✅ API权限验证
- ✅ 权限缓存更新
- ✅ v-permission指令

### 6. WebSocket实时通信测试 (`websocket-realtime.test.ts`)

**测试功能**：

- ✅ WebSocket连接建立
- ✅ 断线重连机制
- ✅ 手动重连功能
- ✅ 连接心跳机制
- ✅ 系统通知接收
- ✅ 消息状态更新
- ✅ 用户在线状态
- ✅ 任务进度更新
- ✅ 实时性能指标
- ✅ 实时日志显示
- ✅ 告警信息推送
- ✅ 实时图表更新
- ✅ 多标签页同步

### 7. 响应式布局测试 (`responsive-layout.test.ts`)

**测试功能**：

- ✅ 桌面端布局
- ✅ 侧边栏折叠展开
- ✅ 桌面端表格显示
- ✅ 平板端布局适配
- ✅ 平板端表格优化
- ✅ 平板端搜索表单
- ✅ 手机端移动导航
- ✅ 手机端侧边栏抽屉
- ✅ 手机端卡片布局
- ✅ 手机端搜索折叠
- ✅ 手机端表单适配
- ✅ 大屏幕内容显示
- ✅ 大屏幕表格列数
- ✅ 大屏幕仪表盘
- ✅ 响应式断点测试
- ✅ 触摸设备交互
- ✅ 触摸滑动功能
- ✅ 触摸点击区域
- ✅ 长按菜单功能

## 🔧 测试配置

### Playwright 配置 (`playwright.config.ts`)

```typescript
export default defineConfig({
  testDir: './tests/e2e',
  fullyParallel: true,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,

  // 测试报告
  reporter: [
    ['html', { outputFolder: 'test-results/html-report' }],
    ['json', { outputFile: 'test-results/results.json' }],
    ['junit', { outputFile: 'test-results/results.xml' }],
    ['line'],
  ],

  // 支持的浏览器
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
    { name: 'Mobile Chrome', use: { ...devices['Pixel 5'] } },
    { name: 'Mobile Safari', use: { ...devices['iPhone 12'] } },
    { name: 'Microsoft Edge', use: { ...devices['Desktop Edge'] } },
  ],

  // 本地开发服务器
  webServer: {
    command: 'pnpm dev',
    port: 5173,
    reuseExistingServer: !process.env.CI,
  },
});
```

### 测试环境变量

```bash
# .env.test
NODE_ENV=test
VITE_API_URL=http://localhost:3001/api
VITE_WS_URL=ws://localhost:3001/ws
```

## 📊 测试报告

测试完成后，报告文件位于：

```
test-results/
├── html-report/          # HTML格式测试报告
├── results.json         # JSON格式测试结果
├── results.xml          # JUnit格式测试结果
├── test-summary.json    # 测试摘要
└── artifacts/           # 测试截图和视频
```

### 查看测试报告

```bash
# 查看HTML报告
pnpm test:report

# 或直接打开
open test-results/html-report/index.html
```

## 🐛 调试测试

### 调试模式

```bash
# 有头模式运行（显示浏览器）
pnpm test:headed

# 使用调试器
pnpm test --debug

# 运行特定测试并暂停
npx playwright test --headed --debug tests/e2e/auth.test.ts
```

### 生成测试代码

```bash
# 使用录制器生成测试代码
npx playwright codegen http://localhost:5173
```

### 查看测试追踪

```bash
# 生成追踪文件
pnpm test --trace on

# 查看追踪
npx playwright show-trace test-results/trace.zip
```

## 📝 编写测试

### 基本测试结构

```typescript
import { test, expect, Page } from '@playwright/test';

test.describe('功能模块测试', () => {
  test.beforeEach(async ({ page }) => {
    // 测试前置条件
    await page.goto('http://localhost:5173');
    await login(page);
  });

  test('应该正确显示页面', async ({ page }) => {
    // 测试步骤
    await page.click('[data-testid="button"]');

    // 断言
    await expect(page.locator('.result')).toBeVisible();
  });
});
```

### 最佳实践

1. **使用 data-testid 属性**

   ```html
   <button data-testid="submit-button">提交</button>
   ```

2. **等待异步操作完成**

   ```typescript
   await page.waitForLoadState('networkidle');
   await page.waitForSelector('[data-testid="content"]');
   ```

3. **使用页面对象模式**
   ```typescript
   class LoginPage {
     constructor(private page: Page) {}

     async login(username: string, password: string) {
       await this.page.fill('[data-testid="username"]', username);
       await this.page.fill('[data-testid="password"]', password);
       await this.page.click('[data-testid="login-button"]');
     }
   }
   ```

## 🔍 CI/CD 集成

### GitHub Actions 示例

```yaml
name: E2E Tests

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install dependencies
        run: pnpm install

      - name: Install Playwright
        run: pnpm test:install

      - name: Run tests
        run: pnpm test

      - name: Upload test results
        uses: actions/upload-artifact@v3
        if: always()
        with:
          name: test-results
          path: test-results/
```

## 📞 支持

如有问题，请：

1. 查看 [Playwright 官方文档](https://playwright.dev/)
2. 检查测试日志和错误信息
3. 联系开发团队

## 📄 更新日志

### v1.0.0

- 初始版本发布
- 支持所有主要功能模块测试
- 多浏览器和移动端支持
- 完整的CI/CD集成