Files

你的用户名 237c7802e5

Deploy / deploy (push) Has been cancelled

Details

Initial commit: Telegram Management System

Full-stack web application for Telegram management
- Frontend: Vue 3 + Vben Admin
- Backend: NestJS
- Features: User management, group broadcast, statistics

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-11-04 15:37:50 +08:00

9.2 KiB

Raw Permalink Blame History

端到端测试指南

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

🚀 快速开始

安装依赖

# 安装 Playwright 浏览器
pnpm test:install

# 或手动安装
npx playwright install

运行测试

# 运行所有测试
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过期处理
✅ 退出登录
✅ 页面刷新状态保持
✅ 多标签页同步
✅ 权限角色测试
✅ 国际化功能

测试账号：

// 管理员账号
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`)

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,
  },
});

测试环境变量

# .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/           # 测试截图和视频

查看测试报告

# 查看HTML报告
pnpm test:report

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

🐛 调试测试

调试模式

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

# 使用调试器
pnpm test --debug

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

生成测试代码

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

查看测试追踪

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

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

📝 编写测试

基本测试结构

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();
  });
});

最佳实践

使用 data-testid 属性

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

等待异步操作完成

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

使用页面对象模式

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 示例

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/

📞 支持

如有问题，请：

查看 Playwright 官方文档
检查测试日志和错误信息
联系开发团队

📄 更新日志

v1.0.0

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

9.2 KiB Raw Permalink Blame History Unescape Escape

端到端测试指南

🚀 快速开始

安装依赖

运行测试

📁 测试文件结构

🧪 测试覆盖范围

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

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

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

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

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

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

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

🔧 测试配置

Playwright 配置 (playwright.config.ts)

测试环境变量

📊 测试报告

查看测试报告

🐛 调试测试

调试模式

生成测试代码

查看测试追踪

📝 编写测试

基本测试结构

最佳实践

🔍 CI/CD 集成

GitHub Actions 示例

📞 支持

📄 更新日志

v1.0.0

9.2 KiB

Raw Permalink Blame History

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

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

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

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

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

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

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

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