niuniu/wenzi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: sync local latest state and repository cleanup

Browse Source
This commit is contained in:
Your Name
2026-03-23 13:02:36 +08:00
parent f1ff3d629f
commit 2ef0f17961
493 changed files with 46912 additions and 7977 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
frontend/e2e/tests/api-smoke.spec.ts
View File

@@ -1,59 +1,79 @@
import { test, expect } from '@playwright/test';
/**
* 简化版E2E测试 - API可用性验证
* 验证后端服务是否正常运行
* E2E测试 - API可用性验证
* 支持两种模式：
* - E2E_STRICT=false (默认): 连通性模式，401/403视为可达
* - E2E_STRICT=true: 严格业务模式，需要真实凭证
*/
test.describe('🦟 蚊子项目 E2E测试 - API可用性验证', () => {
const API_BASE_URL = process.env.API_BASE_URL || 'http://localhost:8080';
const E2E_STRICT = process.env.E2E_STRICT === 'true';
const E2E_USER_TOKEN = process.env.E2E_USER_TOKEN;
test('后端健康检查', async ({ request }) => {
const response = await request.get(`${API_BASE_URL}/actuator/health`);
expect(response.ok()).toBeTruthy();
const body = await response.json();
expect(body.status).toBe('UP');
console.log('✅ 后端服务健康检查通过');
});
test('活动列表API可用性', async ({ request }) => {
const response = await request.get(`${API_BASE_URL}/api/v1/activities`, {
headers: {
'X-API-Key': 'test',
'Authorization': 'Bearer test',
},
});
// API需要认证，401是预期的安全行为
// 我们验证API端点存在且响应格式正确即可
expect([200, 401]).toContain(response.status());
console.log(`✅ 活动列表API端点可访问，状态码: ${response.status()}`);
if (response.status() === 200) {
const body = await response.json();
expect(body.code).toBe(200);
console.log(` 返回 ${body.data?.length || 0} 个活动`);
test('活动列表API可达性验证', async ({ request }) => {
// 活动列表API需要认证
const response = await request.get(`${API_BASE_URL}/api/v1/activities`);
const status = response.status();
// 严格模式下必须有真实凭证，无凭证则失败
if (E2E_STRICT) {
if (!E2E_USER_TOKEN) {
throw new Error('严格模式需要E2E_USER_TOKEN环境变量，但未提供，测试失败');
}
// 严格模式：必须返回200
if (status === 401 || status === 403) {
throw new Error(`严格模式下活动列表API需要认证但未提供有效凭证（HTTP ${status}）`);
}
if (status >= 400 && status < 500) {
throw new Error(`活动列表API客户端错误（HTTP ${status}）`);
}
if (status >= 500) {
throw new Error(`活动列表API服务器错误（HTTP ${status}），服务异常`);
}
expect(status).toBe(200);
console.log(`✅ 严格模式：活动列表API业务成功，HTTP状态码: ${status}`);
} else {
console.log(' API需要有效认证（这是预期的安全行为）');
// 连通性模式：401/403表示API可达但需要认证
if (status === 404) {
throw new Error(`活动列表API不存在（HTTP 404），端点路径可能错误`);
}
if (status >= 500) {
throw new Error(`活动列表API服务器错误（HTTP ${status}），服务异常`);
}
// 连通性模式允许401/403代表API可达
expect([401, 403, 200]).toContain(status);
console.log(`✅ 连通性模式：活动列表API可达，HTTP状态码: ${status}`);
}
});
test('前端服务可访问', async ({ page }) => {
const FRONTEND_URL = process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:5175';
test('前端服务可访问', async ({ page }, testInfo) => {
const FRONTEND_URL = process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:5173';
await page.goto(FRONTEND_URL);
// 验证页面加载
await expect(page).toHaveTitle(/./);
// 截图记录
await page.screenshot({ path: 'e2e-report/frontend-check.png' });
// 截图记录到 Playwright 输出目录，避免污染仓库根目录
await page.screenshot({ path: testInfo.outputPath('frontend-check.png') });
console.log('✅ 前端服务可访问');
});
});

75
frontend/e2e/tests/h5-user-operations.spec.ts
View File

@@ -3,29 +3,64 @@ import { test, expect } from '@playwright/test';
/**
* 🖱️ 蚊子项目H5前端 - 用户操作测试
* 模拟真实用户在H5界面的查看和操作
*
* 注意：H5_BASE_URL必须通过环境变量配置，默认值仅供参考
* 使用方式: H5_BASE_URL=http://localhost:5173 npx playwright test
*
* 注意：H5与Admin共享同一前端服务(5173)，H5路由(/share等)由Admin前端提供
*/
test.describe('👤 用户H5前端操作测试', () => {
const FRONTEND_URL = 'http://localhost:5175';
const API_BASE_URL = 'http://localhost:8080';
const FRONTEND_URL = process.env.H5_BASE_URL || 'http://localhost:5173';
const API_BASE_URL = process.env.API_BASE_URL || 'http://localhost:8080';
/**
* 验证当前页面是否为H5应用（而非管理后台）
* 通过检查页面特征来识别
*/
const verifyH5Page = async (page: any, expectedPath?: string) => {
const currentUrl = page.url();
// 如果指定了期望路径，验证路径
if (expectedPath && !currentUrl.includes(expectedPath)) {
throw new Error(`页面路径不正确: ${currentUrl}，期望包含: ${expectedPath}`);
}
// H5页面特征：路径是 / 或 /share 或 /rank 或 /profile
const isH5Path = currentUrl === '/' ||
currentUrl.includes('/share') ||
currentUrl.includes('/rank') ||
currentUrl.includes('/profile');
// 如果不是H5路径，抛出错误
if (!isH5Path && !currentUrl.includes('localhost')) {
throw new Error(`E2E目标偏离：当前页面 ${currentUrl} 不是H5应用，可能跑到了管理前端或其他应用`);
}
console.log(` ✅ H5页面验证通过: ${currentUrl}`);
return true;
};
test('📱 查看首页和底部导航', async ({ page }) => {
await test.step('访问H5首页', async () => {
// 访问首页
const response = await page.goto(FRONTEND_URL);
// 验证页面可访问
expect(response).not.toBeNull();
console.log(' ✅ 首页响应状态:', response?.status());
// 等待页面加载完成
await page.waitForLoadState('networkidle');
// 验证是H5页面而非管理后台
await verifyH5Page(page, '/');
// 截图记录首页
await page.screenshot({
await page.screenshot({
path: 'test-results/h5-user-homepage.png',
fullPage: true
fullPage: true
});
console.log(' 📸 首页截图已保存');
});
@@ -59,7 +94,10 @@ test.describe('👤 用户H5前端操作测试', () => {
await test.step('点击推广页面', async () => {
await page.goto(FRONTEND_URL);
await page.waitForLoadState('networkidle');
// 验证是H5页面
await verifyH5Page(page);
// 查找并点击推广链接
const shareLink = page.locator('text=推广').first();
@@ -146,7 +184,10 @@ test.describe('👤 用户H5前端操作测试', () => {
await page.goto(FRONTEND_URL);
await page.waitForLoadState('networkidle');
// 验证是H5页面
await verifyH5Page(page);
// 截图记录不同设备效果
await page.screenshot({
path: `test-results/h5-responsive-${viewport.name}.png`,
@@ -167,7 +208,10 @@ test.describe('👤 用户H5前端操作测试', () => {
await test.step('检查页面元素', async () => {
await page.goto(FRONTEND_URL);
await page.waitForLoadState('networkidle');
// 验证是H5页面
await verifyH5Page(page);
// 统计页面元素
const buttons = page.locator('button');
const links = page.locator('a');
@@ -204,10 +248,13 @@ test.describe('👤 用户H5前端操作测试', () => {
test('⏱️ 页面性能测试', async ({ page }) => {
await test.step('测量页面加载性能', async () => {
const startTime = Date.now();
await page.goto(FRONTEND_URL);
await page.waitForLoadState('networkidle');
// 验证是H5页面
await verifyH5Page(page);
const loadTime = Date.now() - startTime;
console.log(` ⏱️ 页面加载时间: ${loadTime}ms`);

2
frontend/e2e/tests/simple-health.spec.ts
View File

@@ -9,7 +9,7 @@ test('简单健康检查 - 后端API', async ({ request }) => {
test('简单健康检查 - 前端服务', async ({ page }) => {
// 简单检查前端服务是否可访问
const response = await page.goto('http://localhost:5175');
const response = await page.goto('http://localhost:5173');
expect(response).not.toBeNull();
expect(response?.status()).toBeLessThan(400);
});

22
frontend/e2e/tests/user-frontend-operation.spec.ts
View File

@@ -6,14 +6,13 @@ import { test, expect } from '@playwright/test';
*/
test.describe('👤 用户前端操作测试', () => {
const FRONTEND_URL = 'http://localhost:5174';
const FRONTEND_URL = 'http://localhost:5173';
const API_BASE_URL = 'http://localhost:8080';
test.beforeEach(async ({ page }) => {
// 每个测试前设置localStorage模拟用户登录
await page.goto(FRONTEND_URL);
await page.evaluate(() => {
// 先设置localStorage，然后访问页面
await page.addInitScript(() => {
localStorage.setItem('test-mode', 'true');
localStorage.setItem('user-token', 'test-token-' + Date.now());
});
@@ -38,9 +37,10 @@ test.describe('👤 用户前端操作测试', () => {
});
await test.step('检查页面基本元素', async () => {
// 检查body元素存在
const body = page.locator('body');
await expect(body).toBeVisible();
// 等待Vue应用渲染
await page.waitForTimeout(2000);
// 检查页面是否有Vue应用挂载
await expect(page.locator('#app')).toBeAttached();
// 获取页面文本内容
const pageText = await page.textContent('body');
@@ -133,8 +133,8 @@ test.describe('👤 用户前端操作测试', () => {
console.log(` 页面加载时间: ${loadTime}ms`);
// 验证加载时间在合理范围内（小于5秒）
expect(loadTime).toBeLessThan(5000);
// 验证加载时间在合理范围内（小于8秒，放宽限制以适应CI环境波动）
expect(loadTime).toBeLessThan(8000);
});
});
});

376
frontend/e2e/tests/user-journey-fixed.spec.ts
View File

@@ -1,275 +1,141 @@
import { test, expect } from '../fixtures/test-data';
import { test, expect } from '@playwright/test';
import * as fs from 'fs';
import * as path from 'path';
import { fileURLToPath } from 'url';
/**
* 🦟 蚊子项目 - 用户端到端旅程测试（修复版）
*
* 测试场景（真实API交互）：
* 1. 页面访问和加载流程
* 2. 响应式布局测试
* 3. 错误处理测试
* 用户核心旅程测试（严格模式 - 固定版本）
*
* 双模式执行：
* - 无真实凭证：显式跳过（test.skip）
* - 有真实凭证：严格断言 2xx/3xx
*/
test.describe('🎯 用户核心旅程测试', () => {
test.beforeEach(async ({ page, testData }) => {
// 设置测试环境
console.log(`\n 测试活动ID: ${testData.activityId}`);
console.log(` API Key: ${testData.apiKey.substring(0, 20)}...`);
});
const API_BASE_URL = process.env.API_BASE_URL || 'http://localhost:8080';
const FRONTEND_URL = process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:5173';
test('🏠 首页加载和活动列表展示', async ({ page, testData, apiClient }) => {
await test.step('访问首页', async () => {
await page.goto('/');
// 验证页面加载 - 接受"Mosquito"或"蚊子"
await expect(page).toHaveTitle(/Mosquito|蚊子/);
await expect(page.locator('body')).toBeVisible();
// 截图记录
await page.screenshot({ path: `e2e-results/home-page-${Date.now()}.png` });
console.log(' ✅ 首页加载成功');
});
const DEFAULT_TEST_API_KEY = 'test-api-key-000000000000';
const DEFAULT_TEST_USER_TOKEN = 'test-e2e-token';
await test.step('验证活动列表API端点可访问', async () => {
try {
const response = await apiClient.getActivities();
if (response.code === 200) {
console.log(` ✅ 活动列表API返回 ${response.data?.length || 0} 个活动`);
} else {
console.log(` ⚠️ 活动列表API返回: ${response.code}（需要认证）`);
}
} catch (error) {
console.log(' ⚠️ API调用失败（可能需要有效认证）');
}
});
});
interface TestData {
activityId: number;
apiKey: string;
userToken: string;
userId: number;
shortCode: string;
baseUrl: string;
apiBaseUrl: string;
}
test('📊 活动详情和统计数据展示', async ({ page, testData, apiClient }) => {
await test.step('尝试获取活动详情API', async () => {
try {
const response = await apiClient.getActivity(testData.activityId);
if (response.code === 200) {
console.log(` ✅ 活动详情: ${response.data.name}`);
} else {
console.log(` ⚠️ 活动详情API返回: ${response.code}`);
}
} catch (error) {
console.log(' ⚠️ 活动详情API调用失败');
}
});
function loadTestData(): TestData {
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const testDataPath = path.join(__dirname, '..', '.e2e-test-data.json');
await test.step('前端页面展示活动信息', async () => {
// 访问活动页面
await page.goto(`/?activityId=${testData.activityId}`);
// 等待页面加载
await page.waitForLoadState('networkidle');
// 截图记录
await page.screenshot({
path: `e2e-results/activity-detail-${Date.now()}.png`
});
console.log(' ✅ 活动详情页面截图完成');
});
});
const defaultData: TestData = {
activityId: 1,
apiKey: DEFAULT_TEST_API_KEY,
userToken: process.env.E2E_USER_TOKEN || DEFAULT_TEST_USER_TOKEN,
userId: 10001,
shortCode: 'test123',
baseUrl: process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:5173',
apiBaseUrl: process.env.API_BASE_URL || 'http://localhost:8080',
};
test('🏆 排行榜查看流程', async ({ page, testData, apiClient }) => {
await test.step('尝试获取排行榜数据API', async () => {
try {
const response = await apiClient.getLeaderboard(testData.activityId, 0, 10);
if (response.code === 200) {
console.log(' ✅ 排行榜数据获取成功');
} else {
console.log(` ⚠️ 排行榜API返回: ${response.code}`);
}
} catch (error) {
console.log(' ⚠️ 排行榜API调用失败');
}
});
try {
if (fs.existsSync(testDataPath)) {
const data = JSON.parse(fs.readFileSync(testDataPath, 'utf-8'));
return { ...defaultData, ...data };
}
} catch (error) {
console.warn('无法加载测试数据，使用默认值');
}
await test.step('前端展示排行榜页面', async () => {
// 访问排行榜页面
await page.goto(`/rank`);
await page.waitForLoadState('networkidle');
// 截图记录
await page.screenshot({
path: `e2e-results/leaderboard-${Date.now()}.png`
});
console.log(' ✅ 排行榜页面截图完成');
});
});
return defaultData;
}
test('🔗 短链生成和访问流程', async ({ page, testData, apiClient }) => {
await test.step('尝试生成短链API', async () => {
try {
const originalUrl = `https://example.com/test?activityId=${testData.activityId}&timestamp=${Date.now()}`;
const response = await apiClient.createShortLink(originalUrl, testData.activityId);
if (response.code === 201) {
const shortCode = response.data.code || response.data.shortUrl?.split('/').pop();
console.log(` ✅ 生成短链: ${shortCode}`);
} else {
console.log(` ⚠️ 短链API返回: ${response.code}`);
}
} catch (error) {
console.log(' ⚠️ 短链API调用失败');
}
});
function hasRealApiCredentials(data: TestData): boolean {
return Boolean(
data.apiKey &&
data.userToken &&
data.apiKey !== DEFAULT_TEST_API_KEY &&
data.userToken !== DEFAULT_TEST_USER_TOKEN
);
}
await test.step('访问分享页面', async () => {
// 访问分享页面
await page.goto(`/share`);
await page.waitForLoadState('networkidle');
// 截图记录
await page.screenshot({
path: `e2e-results/share-page-${Date.now()}.png`
});
console.log(' ✅ 分享页面截图完成');
});
});
// 加载测试数据
const testData = loadTestData();
const useRealCredentials = hasRealApiCredentials(testData);
const E2E_STRICT = process.env.E2E_STRICT === 'true';
test('📈 分享统计数据查看', async ({ page, testData, apiClient }) => {
await test.step('尝试获取分享统计API', async () => {
try {
const response = await apiClient.getShareMetrics(testData.activityId);
if (response.code === 200) {
console.log(` ✅ 分享统计: ${response.data?.totalClicks || 0} 次点击`);
} else {
console.log(` ⚠️ 分享统计API返回: ${response.code}`);
}
} catch (error) {
console.log(' ⚠️ 分享统计API调用失败');
}
});
await test.step('前端查看分享统计', async () => {
// 访问分享页面查看统计
await page.goto('/share');
await page.waitForLoadState('networkidle');
// 截图记录
await page.screenshot({
path: `e2e-results/share-metrics-${Date.now()}.png`
});
console.log(' ✅ 分享统计页面截图完成');
});
});
test('🎫 API Key验证流程', async ({ page, testData, apiClient }) => {
await test.step('验证API Key格式', async () => {
expect(testData.apiKey).toBeDefined();
expect(testData.apiKey.length).toBeGreaterThan(0);
console.log(` ✅ API Key格式有效`);
});
await test.step('尝试验证API Key', async () => {
try {
const isValid = await apiClient.validateApiKey(testData.apiKey);
console.log(` API Key验证结果: ${isValid ? '有效' : '无效'}`);
} catch (error) {
console.log(' ⚠️ API Key验证失败（需要后端认证）');
}
});
});
});
test.describe('📱 响应式布局测试', () => {
test('移动端布局检查', async ({ page }) => {
await page.setViewportSize({ width: 375, height: 667 });
test.describe('🎯 用户核心旅程测试（严格模式）', () => {
// 首页不需要凭证，始终执行
test('🏠 首页应可访问（无需凭证）', async ({ page }) => {
await page.goto('/');
await page.waitForLoadState('networkidle');
await page.screenshot({
path: `e2e-results/mobile-layout-${Date.now()}.png`,
fullPage: true
await expect(page.locator('#app')).toBeAttached();
});
if (!useRealCredentials) {
// 严格模式下无真实凭证时必须失败，非严格模式才跳过
if (E2E_STRICT) {
test('📊 活动列表API（需要真实凭证）', async () => {
throw new Error('严格模式需要真实凭证（E2E_USER_TOKEN），但未提供有效凭证，测试失败');
});
} else {
test.skip('📊 活动列表API（需要真实凭证）', async ({ request }) => {
// 此测试需要真实凭证，无凭证时跳过
});
}
} else {
// 有真实凭证时严格断言
test('📊 活动列表API - 严格断言', async ({ request }) => {
const response = await request.get(`${API_BASE_URL}/api/v1/activities`, {
headers: {
'X-API-Key': testData.apiKey,
'Authorization': `Bearer ${testData.userToken}`,
},
});
const status = response.status();
// 严格断言：只接受 2xx/3xx
expect(
status,
`活动列表API应返回2xx/3xx，实际${status}`
).toBeGreaterThanOrEqual(200);
expect(
status,
`活动列表API应返回2xx/3xx，实际${status}`
).toBeLessThan(400);
});
console.log(' ✅ 移动端布局检查完成');
});
test('平板端布局检查', async ({ page }) => {
await page.setViewportSize({ width: 768, height: 1024 });
await page.goto('/');
await page.waitForLoadState('networkidle');
await page.screenshot({
path: `e2e-results/tablet-layout-${Date.now()}.png`,
fullPage: true
test('后端健康检查应正常 - 严格断言', async ({ request }) => {
const response = await request.get(`${API_BASE_URL}/actuator/health`);
expect(
response.status(),
`健康检查应返回200，实际${response.status()}`
).toBe(200);
const body = await response.json();
expect(
body.status,
`健康检查状态应为UP，实际${body.status}`
).toBe('UP');
});
console.log(' ✅ 平板端布局检查完成');
});
test('桌面端布局检查', async ({ page }) => {
await page.setViewportSize({ width: 1280, height: 720 });
await page.goto('/');
await page.waitForLoadState('networkidle');
await page.screenshot({
path: `e2e-results/desktop-layout-${Date.now()}.png`,
fullPage: true
test('前端服务应可访问 - 严格断言', async ({ page }) => {
const response = await page.goto(FRONTEND_URL);
expect(
response,
'页面响应不应为null'
).not.toBeNull();
expect(
response?.status(),
`前端应返回2xx/3xx，实际${response?.status()}`
).toBeGreaterThanOrEqual(200);
expect(
response?.status(),
`前端应返回2xx/3xx，实际${response?.status()}`
).toBeLessThan(400);
});
console.log(' ✅ 桌面端布局检查完成');
});
});
test.describe('⚡ 性能测试', () => {
test('API响应时间测试', async ({ request }) => {
const startTime = Date.now();
await request.get('http://localhost:8080/actuator/health');
const responseTime = Date.now() - startTime;
console.log(` API响应时间: ${responseTime}ms`);
expect(responseTime).toBeLessThan(5000); // 5秒内响应
});
test('页面加载时间测试', async ({ page }) => {
const startTime = Date.now();
await page.goto('/');
await page.waitForLoadState('networkidle');
const loadTime = Date.now() - startTime;
console.log(` 页面加载时间: ${loadTime}ms`);
expect(loadTime).toBeLessThan(10000); // 10秒内加载
});
});
test.describe('🔒 错误处理测试', () => {
test('处理无效的活动ID', async ({ page }) => {
await page.goto('/?activityId=999999');
await page.waitForLoadState('networkidle');
// 验证页面仍然可以加载（显示错误信息）
await expect(page.locator('body')).toBeVisible();
console.log(' ✅ 无效活动ID处理测试完成');
});
test('处理网络错误', async ({ request }) => {
// 测试一个不存在的端点
const response = await request.get('http://localhost:8080/api/v1/nonexistent');
// 应该返回404
expect([401, 404]).toContain(response.status());
console.log(' ✅ 网络错误处理测试完成');
});
});
}
});

476
frontend/e2e/tests/user-journey.spec.ts
View File

@@ -1,284 +1,290 @@
import { test, expect } from '../fixtures/test-data';
import { test, expect } from '@playwright/test';
import * as fs from 'fs';
import * as path from 'path';
import { fileURLToPath } from 'url';
/**
* 🦟 蚊子项目 - 用户端到端旅程测试
*
* 测试场景（真实API交互）：
* 1. 活动查看流程
* 2. 排行榜查看流程
* 3. 短链生成和跳转流程
* 4. 分享统计查看流程
* 5. 邀请信息查看流程
* 用户核心旅程测试（严格模式）
*
* 双模式执行：
* - 无真实凭证：显式跳过（test.skip）
* - 有真实凭证：严格断言 2xx/3xx
*/
test.describe('🎯 用户核心旅程测试', () => {
test.beforeEach(async ({ page, testData }) => {
// 设置测试环境
console.log(`\n 测试活动ID: ${testData.activityId}`);
console.log(` API Key: ${testData.apiKey.substring(0, 20)}...`);
});
const API_BASE_URL = process.env.API_BASE_URL || 'http://localhost:8080';
const FRONTEND_URL = process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:5173';
test('🏠 首页加载和活动列表展示', async ({ page, testData, apiClient }) => {
const DEFAULT_TEST_API_KEY = 'test-api-key-000000000000';
const DEFAULT_TEST_USER_TOKEN = 'test-e2e-token';
interface TestData {
activityId: number;
apiKey: string;
userToken: string;
userId: number;
shortCode: string;
baseUrl: string;
apiBaseUrl: string;
}
function loadTestData(): TestData {
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const testDataPath = path.join(__dirname, '..', '.e2e-test-data.json');
const defaultData: TestData = {
activityId: 1,
apiKey: DEFAULT_TEST_API_KEY,
userToken: process.env.E2E_USER_TOKEN || DEFAULT_TEST_USER_TOKEN,
userId: 10001,
shortCode: 'test123',
baseUrl: process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:5173',
apiBaseUrl: process.env.API_BASE_URL || 'http://localhost:8080',
};
try {
if (fs.existsSync(testDataPath)) {
const data = JSON.parse(fs.readFileSync(testDataPath, 'utf-8'));
return { ...defaultData, ...data };
}
} catch (error) {
console.warn('无法加载测试数据，使用默认值');
}
return defaultData;
}
function hasRealApiCredentials(data: TestData): boolean {
return Boolean(
data.apiKey &&
data.userToken &&
data.apiKey !== DEFAULT_TEST_API_KEY &&
data.userToken !== DEFAULT_TEST_USER_TOKEN
);
}
// 加载测试数据
const testData = loadTestData();
const useRealCredentials = hasRealApiCredentials(testData);
const E2E_STRICT = process.env.E2E_STRICT === 'true';
test.describe('🎯 用户核心旅程测试', () => {
// 首页不需要凭证，始终执行
test('🏠 首页加载（无需凭证）', async ({ page }) => {
await test.step('访问首页', async () => {
await page.goto('/');
// 验证页面加载
await expect(page).toHaveTitle(/Mosquito|蚊子/);
await expect(page.locator('body')).toBeVisible();
// 截图记录
await page.screenshot({ path: `e2e-results/home-page-${Date.now()}.png` });
await page.waitForLoadState('networkidle');
await expect(page.locator('#app')).toBeAttached();
});
});
if (!useRealCredentials) {
// 严格模式下无真实凭证时必须失败，非严格模式才跳过
if (E2E_STRICT) {
test('📊 活动列表API（需要真实凭证）', async () => {
throw new Error('严格模式需要真实凭证（E2E_USER_TOKEN），但未提供有效凭证，测试失败');
});
} else {
test.skip('📊 活动列表API（需要真实凭证）', async ({ request }) => {
// 此测试需要真实凭证，无凭证时跳过
});
}
} else {
// 有真实凭证时严格断言
test('🏠 首页加载', async ({ page }) => {
await test.step('访问首页', async () => {
await page.goto('/');
await page.waitForLoadState('networkidle');
await expect(page.locator('#app')).toBeAttached();
});
});
await test.step('验证活动列表API返回数据', async () => {
try {
const response = await apiClient.getActivities();
if (response.code === 200) {
expect(response.data).toBeDefined();
expect(Array.isArray(response.data)).toBeTruthy();
// 验证测试活动在列表中
const testActivity = response.data.find(
(a: any) => a.id === testData.activityId
);
if (testActivity) {
console.log(` ✅ 找到测试活动: ${testActivity.name}`);
}
} else {
console.log(` ⚠️ API返回非200状态: ${response.code}`);
test('📊 活动列表API - 严格断言', async ({ request }) => {
const response = await request.get(`${API_BASE_URL}/api/v1/activities`, {
headers: {
'X-API-Key': testData.apiKey,
'Authorization': `Bearer ${testData.userToken}`,
},
});
const status = response.status();
// 严格断言：只接受 2xx/3xx
expect(
status,
`活动列表API应返回2xx/3xx，实际${status}`
).toBeGreaterThanOrEqual(200);
expect(
status,
`活动列表API应返回2xx/3xx，实际${status}`
).toBeLessThan(400);
});
test('📊 活动详情API - 严格断言', async ({ request }) => {
const response = await request.get(`${API_BASE_URL}/api/v1/activities/${testData.activityId}`, {
headers: {
'X-API-Key': testData.apiKey,
'Authorization': `Bearer ${testData.userToken}`,
},
});
const status = response.status();
// 严格断言：2xx/3xx
expect(
status,
`活动详情API应返回2xx/3xx，实际${status}`
).toBeGreaterThanOrEqual(200);
expect(
status,
`活动详情API应返回2xx/3xx，实际${status}`
).toBeLessThan(400);
});
test('🏆 排行榜API - 严格断言', async ({ request }) => {
const response = await request.get(`${API_BASE_URL}/api/v1/activities/${testData.activityId}/leaderboard`, {
headers: {
'X-API-Key': testData.apiKey,
'Authorization': `Bearer ${testData.userToken}`,
},
});
const status = response.status();
// 严格断言：2xx/3xx
expect(
status,
`排行榜API应返回2xx/3xx，实际${status}`
).toBeGreaterThanOrEqual(200);
expect(
status,
`排行榜API应返回2xx/3xx，实际${status}`
).toBeLessThan(400);
});
test('🔗 短链API - 严格断言', async ({ request }) => {
const response = await request.post(
`${API_BASE_URL}/api/v1/internal/shorten`,
{
data: {
originalUrl: 'https://example.com/test',
activityId: testData.activityId,
},
headers: {
'Content-Type': 'application/json',
'X-API-Key': testData.apiKey,
'Authorization': `Bearer ${testData.userToken}`,
},
}
} catch (error) {
console.log(' ⚠️ API调用失败（可能需要有效认证）');
}
});
});
test('📊 活动详情和统计数据展示', async ({ page, testData, apiClient }) => {
await test.step('获取活动详情API', async () => {
const response = await apiClient.getActivity(testData.activityId);
expect(response.code).toBe(200);
expect(response.data.id).toBe(testData.activityId);
console.log(` 活动名称: ${response.data.name}`);
);
const status = response.status();
// 严格断言：201创建成功或2xx
expect(
[200, 201],
`短链API应返回200/201，实际${status}`
).toContain(status);
});
await test.step('获取活动统计数据API', async () => {
const response = await apiClient.getActivityStats(testData.activityId);
expect(response.code).toBe(200);
expect(response.data).toBeDefined();
// 验证统计字段存在
const stats = response.data;
console.log(` 总参与人数: ${stats.totalParticipants || 0}`);
console.log(` 总分享次数: ${stats.totalShares || 0}`);
});
await test.step('前端页面展示活动信息', async ({ authenticatedPage }) => {
// 如果前端有活动详情页面
await authenticatedPage.goto(`/?activityId=${testData.activityId}`);
// 等待页面加载
await authenticatedPage.waitForLoadState('networkidle');
// 截图记录
await authenticatedPage.screenshot({
path: `e2e-results/activity-detail-${Date.now()}.png`
test('📈 分享统计API - 严格断言', async ({ request }) => {
const response = await request.get(`${API_BASE_URL}/api/v1/share/metrics?activityId=${testData.activityId}`, {
headers: {
'X-API-Key': testData.apiKey,
'Authorization': `Bearer ${testData.userToken}`,
},
});
});
});
test('🏆 排行榜查看流程', async ({ page, testData, apiClient }) => {
await test.step('获取排行榜数据API', async () => {
const response = await apiClient.getLeaderboard(testData.activityId, 0, 10);
expect(response.code).toBe(200);
expect(response.data).toBeDefined();
console.log(` 排行榜数据: ${JSON.stringify(response.data).substring(0, 100)}...`);
const status = response.status();
// 严格断言：2xx/3xx
expect(
status,
`分享统计API应返回2xx/3xx，实际${status}`
).toBeGreaterThanOrEqual(200);
expect(
status,
`分享统计API应返回2xx/3xx，实际${status}`
).toBeLessThan(400);
});
await test.step('前端展示排行榜', async ({ authenticatedPage }) => {
// 访问排行榜页面
await authenticatedPage.goto(`/leaderboard?activityId=${testData.activityId}`);
await authenticatedPage.waitForLoadState('networkidle');
// 截图记录
await authenticatedPage.screenshot({
path: `e2e-results/leaderboard-${Date.now()}.png`
});
test('🎫 API Key验证端点 - 严格断言', async ({ request }) => {
const response = await request.post(
`${API_BASE_URL}/api/v1/keys/validate`,
{
data: { apiKey: testData.apiKey },
headers: {
'Content-Type': 'application/json',
},
}
);
const status = response.status();
// 严格断言：200成功
expect(
status,
`API Key验证应返回200，实际${status}`
).toBe(200);
});
});
test('🔗 短链生成和访问流程', async ({ page, testData, apiClient }) => {
let shortCode: string;
await test.step('生成短链API', async () => {
const originalUrl = `https://example.com/test?activityId=${testData.activityId}&timestamp=${Date.now()}`;
const response = await apiClient.createShortLink(originalUrl, testData.activityId);
expect(response.code).toBe(201);
expect(response.data).toBeDefined();
shortCode = response.data.code || response.data.shortUrl?.split('/').pop();
console.log(` 生成短链: ${shortCode}`);
});
await test.step('访问短链跳转', async () => {
// 访问短链
const response = await page.goto(`/r/${shortCode}`);
// 验证重定向
expect(response?.status()).toBe(302);
console.log(' ✅ 短链跳转成功');
});
await test.step('验证点击记录', async () => {
// 等待统计更新
await page.waitForTimeout(1000);
const metrics = await apiClient.getShareMetrics(testData.activityId);
expect(metrics.code).toBe(200);
console.log(` 总点击数: ${metrics.data?.totalClicks || 0}`);
});
});
test('📈 分享统计数据查看', async ({ page, testData, apiClient }) => {
await test.step('获取分享统计API', async () => {
const response = await apiClient.getShareMetrics(testData.activityId);
expect(response.code).toBe(200);
expect(response.data).toBeDefined();
const metrics = response.data;
console.log(` 总点击数: ${metrics.totalClicks || 0}`);
console.log(` 总分享数: ${metrics.totalShares || 0}`);
console.log(` 总邀请数: ${metrics.totalInvites || 0}`);
});
await test.step('前端展示分享统计', async ({ authenticatedPage }) => {
await authenticatedPage.goto(`/share-metrics?activityId=${testData.activityId}`);
await authenticatedPage.waitForLoadState('networkidle');
await authenticatedPage.screenshot({
path: `e2e-results/share-metrics-${Date.now()}.png`
});
});
});
test('🎫 API Key验证流程', async ({ apiClient }) => {
await test.step('验证有效的API Key', async () => {
// 这个测试需要使用global-setup创建的API Key
const globalData = (globalThis as any).__TEST_DATA__;
if (globalData?.apiKey) {
const isValid = await apiClient.validateApiKey(globalData.apiKey);
expect(isValid).toBe(true);
console.log(' ✅ API Key验证通过');
}
});
});
}
});
test.describe('📱 响应式布局测试', () => {
test('移动端布局检查', async ({ page, testData }) => {
// 设置移动端视口
test('移动端布局检查', async ({ page }) => {
await page.setViewportSize({ width: 375, height: 667 });
await page.goto(`/?activityId=${testData.activityId}`);
await page.goto(FRONTEND_URL);
await page.waitForLoadState('networkidle');
// 截图记录移动端效果
await page.screenshot({
path: `e2e-results/mobile-layout-${Date.now()}.png`
});
console.log(' ✅ 移动端布局检查完成');
await expect(page.locator('#app')).toBeAttached();
});
test('平板端布局检查', async ({ page, testData }) => {
test('平板端布局检查', async ({ page }) => {
await page.setViewportSize({ width: 768, height: 1024 });
await page.goto(`/?activityId=${testData.activityId}`);
await page.goto(FRONTEND_URL);
await page.waitForLoadState('networkidle');
await page.screenshot({
path: `e2e-results/tablet-layout-${Date.now()}.png`
});
console.log(' ✅ 平板端布局检查完成');
await expect(page.locator('#app')).toBeAttached();
});
test('桌面端布局检查', async ({ page, testData }) => {
test('桌面端布局检查', async ({ page }) => {
await page.setViewportSize({ width: 1920, height: 1080 });
await page.goto(`/?activityId=${testData.activityId}`);
await page.goto(FRONTEND_URL);
await page.waitForLoadState('networkidle');
await page.screenshot({
path: `e2e-results/desktop-layout-${Date.now()}.png`
});
console.log(' ✅ 桌面端布局检查完成');
await expect(page.locator('#app')).toBeAttached();
});
});
test.describe('⚡ 性能测试', () => {
test('API响应时间测试', async ({ apiClient, testData }) => {
test('后端健康检查响应时间', async ({ request }) => {
const startTime = Date.now();
await apiClient.getActivity(testData.activityId);
const response = await request.get(`${API_BASE_URL}/actuator/health`);
const responseTime = Date.now() - startTime;
expect(responseTime).toBeLessThan(2000); // API响应应在2秒内
console.log(` API响应时间: ${responseTime}ms`);
expect(response.status()).toBe(200);
expect(responseTime, '健康检查响应时间应小于 2000ms').toBeLessThan(2000);
});
test('页面加载时间测试', async ({ page, testData }) => {
test('前端页面加载时间', async ({ page }) => {
const startTime = Date.now();
await page.goto(`/?activityId=${testData.activityId}`);
await page.goto(FRONTEND_URL);
await page.waitForLoadState('networkidle');
const loadTime = Date.now() - startTime;
expect(loadTime).toBeLessThan(5000); // 页面应在5秒内加载
console.log(` 页面加载时间: ${loadTime}ms`);
await expect(page.locator('#app')).toBeAttached();
expect(loadTime, '页面加载时间应小于 6000ms').toBeLessThan(6000);
});
});
test.describe('🔒 错误处理测试', () => {
test('处理无效的活动ID', async ({ page }) => {
await page.goto('/?activityId=999999999');
await page.goto(`${FRONTEND_URL}/?activityId=999999999`);
await page.waitForLoadState('networkidle');
// 验证页面优雅处理错误
await page.screenshot({
path: `e2e-results/error-handling-${Date.now()}.png`
});
console.log(' ✅ 错误处理测试完成');
await expect(page.locator('#app')).toBeAttached();
});
test('处理网络错误', async ({ apiClient }) => {
// 测试API客户端的错误处理
try {
// 尝试访问不存在的端点
const response = await apiClient.get('/api/v1/non-existent-endpoint');
// 应该返回错误，而不是抛出异常
expect(response.code).not.toBe(200);
} catch (error) {
// 错误被正确处理
console.log(' ✅ 网络错误被正确处理');
}
test('处理无效 API 端点 - 严格断言', async ({ request }) => {
const response = await request.get(`${API_BASE_URL}/api/v1/non-existent-endpoint`, {
headers: {
'X-API-Key': testData.apiKey,
'Authorization': `Bearer ${testData.userToken}`,
},
});
const status = response.status();
// 无效端点应返回404（而不是500或2xx）
// 但如果用了真实凭证且有权限，可能返回403（禁止访问不存在的资源）
// 所以这里只排除服务器错误和成功响应
// 4xx 客户端错误是预期行为
expect(
[400, 401, 403, 404, 499],
`无效API端点应返回4xx客户端错误，实际${status}`
).toContain(status);
});
});
});