285 lines
9.4 KiB
TypeScript
285 lines
9.4 KiB
TypeScript
|
import { test, expect } from '../fixtures/test-data';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 🦟 蚊子项目 - 用户端到端旅程测试
|
|||
|
|
*
|
|||
|
|
* 测试场景（真实API交互）：
|
|||
|
|
* 1. 活动查看流程
|
|||
|
|
* 2. 排行榜查看流程
|
|||
|
|
* 3. 短链生成和跳转流程
|
|||
|
|
* 4. 分享统计查看流程
|
|||
|
|
* 5. 邀请信息查看流程
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
test.describe('🎯 用户核心旅程测试', () => {
|
|||
|
|
|
|||
|
|
test.beforeEach(async ({ page, testData }) => {
|
|||
|
|
// 设置测试环境
|
|||
|
|
console.log(`\n 测试活动ID: ${testData.activityId}`);
|
|||
|
|
console.log(` API Key: ${testData.apiKey.substring(0, 20)}...`);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
test('🏠 首页加载和活动列表展示', async ({ page, testData, apiClient }) => {
|
|||
|
|
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 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}`);
|
|||
|
|
}
|
|||
|
|
} 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}`);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
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('🏆 排行榜查看流程', 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)}...`);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
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('🔗 短链生成和访问流程', async ({ page, testData, apiClient }) => {
|
|||
|
|
let shortCode: string;
|
|||
|
|
|
|||
|
|
await test.step('生成短链API', async () => {
|
|||
|
|
const originalUrl = `https://example.com/test?activityId=${testData.activityId}×tamp=${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 }) => {
|
|||
|
|
// 设置移动端视口
|
|||
|
|
await page.setViewportSize({ width: 375, height: 667 });
|
|||
|
|
|
|||
|
|
await page.goto(`/?activityId=${testData.activityId}`);
|
|||
|
|
await page.waitForLoadState('networkidle');
|
|||
|
|
|
|||
|
|
// 截图记录移动端效果
|
|||
|
|
await page.screenshot({
|
|||
|
|
path: `e2e-results/mobile-layout-${Date.now()}.png`
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log(' ✅ 移动端布局检查完成');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
test('平板端布局检查', async ({ page, testData }) => {
|
|||
|
|
await page.setViewportSize({ width: 768, height: 1024 });
|
|||
|
|
|
|||
|
|
await page.goto(`/?activityId=${testData.activityId}`);
|
|||
|
|
await page.waitForLoadState('networkidle');
|
|||
|
|
|
|||
|
|
await page.screenshot({
|
|||
|
|
path: `e2e-results/tablet-layout-${Date.now()}.png`
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log(' ✅ 平板端布局检查完成');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
test('桌面端布局检查', async ({ page, testData }) => {
|
|||
|
|
await page.setViewportSize({ width: 1920, height: 1080 });
|
|||
|
|
|
|||
|
|
await page.goto(`/?activityId=${testData.activityId}`);
|
|||
|
|
await page.waitForLoadState('networkidle');
|
|||
|
|
|
|||
|
|
await page.screenshot({
|
|||
|
|
path: `e2e-results/desktop-layout-${Date.now()}.png`
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log(' ✅ 桌面端布局检查完成');
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
test.describe('⚡ 性能测试', () => {
|
|||
|
|
test('API响应时间测试', async ({ apiClient, testData }) => {
|
|||
|
|
const startTime = Date.now();
|
|||
|
|
|
|||
|
|
await apiClient.getActivity(testData.activityId);
|
|||
|
|
|
|||
|
|
const responseTime = Date.now() - startTime;
|
|||
|
|
|
|||
|
|
expect(responseTime).toBeLessThan(2000); // API响应应在2秒内
|
|||
|
|
console.log(` API响应时间: ${responseTime}ms`);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
test('页面加载时间测试', async ({ page, testData }) => {
|
|||
|
|
const startTime = Date.now();
|
|||
|
|
|
|||
|
|
await page.goto(`/?activityId=${testData.activityId}`);
|
|||
|
|
await page.waitForLoadState('networkidle');
|
|||
|
|
|
|||
|
|
const loadTime = Date.now() - startTime;
|
|||
|
|
|
|||
|
|
expect(loadTime).toBeLessThan(5000); // 页面应在5秒内加载
|
|||
|
|
console.log(` 页面加载时间: ${loadTime}ms`);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
test.describe('🔒 错误处理测试', () => {
|
|||
|
|
test('处理无效的活动ID', async ({ page }) => {
|
|||
|
|
await page.goto('/?activityId=999999999');
|
|||
|
|
await page.waitForLoadState('networkidle');
|
|||
|
|
|
|||
|
|
// 验证页面优雅处理错误
|
|||
|
|
await page.screenshot({
|
|||
|
|
path: `e2e-results/error-handling-${Date.now()}.png`
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log(' ✅ 错误处理测试完成');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
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(' ✅ 网络错误被正确处理');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|