lanyuanxiaoyao/nex
1
0
Fork 0
Code Activity

feat: E2E 测试集成真实后端

Browse Source 
- Playwright 双 webServer 模式自动启动 Go 后端 + Vite 前端
- 后端使用临时 SQLite 数据库隔离，固定端口 19026
- vite.config.ts proxy target 动态读取环境变量
- 新增 sql.js 依赖用于 SQLite 统计数据 seed
- 新增 e2e/fixtures.ts 共享工具模块（API seed + SQLite seed）
- 拆分测试文件 5→7（providers/models/stats/navigation/validation）
- 删除旧文件 crud.spec.ts/sidebar.spec.ts/stats-cards.spec.ts
- E2E 测试尚有部分用例需调试修复
This commit is contained in:
兰缘小妖
2026-04-22 00:31:35 +08:00
parent 4fc5fb4764
commit 59179094ed
20 changed files with 973 additions and 540 deletions
Download Patch File Download Diff File Expand all files Collapse all files

264
frontend/e2e/crud.spec.ts
View File

@@ -1,264 +0,0 @@
import { test, expect } from '@playwright/test';
// 辅助：在对话框内定位输入框
function formInputs(page: import('@playwright/test').Page) {
const dialog = page.locator('.t-dialog:visible');
return {
id: dialog.locator('input[placeholder="例如: openai"]'),
name: dialog.locator('input[placeholder="例如: OpenAI"]'),
apiKey: dialog.locator('input[type="password"]'),
baseUrl: dialog.locator('input[placeholder="例如: https://api.openai.com/v1"]'),
saveBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '保存' }),
cancelBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '取消' }),
};
}
// 辅助：在模型对话框内定位输入框
function modelFormInputs(page: import('@playwright/test').Page) {
const dialog = page.locator('.t-dialog:visible');
return {
id: dialog.locator('input[placeholder="例如: gpt-4o"]').first(),
modelName: dialog.locator('input[placeholder="例如: gpt-4o"]').nth(1),
saveBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '保存' }),
cancelBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '取消' }),
};
}
test.describe('供应商和模型完整CRUD流程', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/providers');
await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible();
});
test('完整的供应商创建流程', async ({ page }) => {
await page.getByRole('button', { name: '添加供应商' }).click();
await expect(page.locator('.t-dialog')).toBeVisible();
const inputs = formInputs(page);
const testId = `e2e-${Date.now()}`;
await inputs.id.fill(testId);
await inputs.name.fill('E2E Test Provider');
await inputs.apiKey.fill('sk-e2e-test-key');
await inputs.baseUrl.fill('https://api.e2e-test.com/v1');
// 验证所有字段填写正确
await expect(inputs.id).toHaveValue(testId);
await expect(inputs.name).toHaveValue('E2E Test Provider');
await expect(inputs.baseUrl).toHaveValue('https://api.e2e-test.com/v1');
await inputs.saveBtn.click();
// 注意：对话框关闭依赖后端 API 响应成功，此处仅验证提交按钮可点击
});
test('供应商创建后编辑流程', async ({ page }) => {
const editBtns = page.locator('.t-table__body button:has-text("编辑")');
const count = await editBtns.count();
if (count > 0) {
await editBtns.first().click();
await expect(page.locator('.t-dialog:visible')).toBeVisible();
const inputs = formInputs(page);
await inputs.name.clear();
await inputs.name.fill('Updated Provider Name');
// 验证名称字段已更新
await expect(inputs.name).toHaveValue('Updated Provider Name');
await inputs.saveBtn.click();
// 注意：对话框关闭依赖后端 API 响应成功，此处仅验证提交按钮可点击
} else {
test.skip();
}
});
test('供应商删除流程', async ({ page }) => {
const deleteBtns = page.locator('.t-table__body button:has-text("删除")');
const count = await deleteBtns.count();
if (count > 0) {
await deleteBtns.first().click();
await expect(page.getByText('确定要删除这个供应商吗？')).toBeVisible();
// 点击确认（TDesign Popconfirm 确定按钮）
await page.locator('.t-popconfirm').getByRole('button', { name: '确定' }).click();
await expect(page.getByText('确定要删除这个供应商吗？')).not.toBeVisible({ timeout: 3000 });
} else {
test.skip();
}
});
test('展开供应商并添加模型', async ({ page }) => {
const expandBtns = page.locator('.t-table__expandable-icon');
const expandCount = await expandBtns.count();
if (expandCount > 0) {
await expandBtns.first().click();
await expect(page.locator('.t-table__expanded-row').first()).toBeVisible();
const addModelBtn = page.locator('.t-table__expanded-row button:has-text("添加模型")');
const addCount = await addModelBtn.count();
if (addCount > 0) {
await addModelBtn.first().click();
const dialog = page.locator('.t-dialog');
await expect(dialog).toBeVisible();
await expect(dialog.getByText('添加模型')).toBeVisible();
const modelInputs = modelFormInputs(page);
await modelInputs.id.fill(`model-${Date.now()}`);
await modelInputs.modelName.fill('gpt-4-turbo');
await modelInputs.saveBtn.click();
await expect(page.locator('.t-dialog')).not.toBeVisible({ timeout: 5000 });
} else {
test.skip();
}
} else {
test.skip();
}
});
test('编辑已有模型', async ({ page }) => {
const expandBtns = page.locator('.t-table__expandable-icon');
const expandCount = await expandBtns.count();
if (expandCount > 0) {
await expandBtns.first().click();
await expect(page.locator('.t-table__expanded-row').first()).toBeVisible();
const modelEditBtns = page.locator('.t-table__expanded-row button:has-text("编辑")');
const editCount = await modelEditBtns.count();
if (editCount > 0) {
await modelEditBtns.first().click();
const dialog = page.locator('.t-dialog');
await expect(dialog).toBeVisible();
await expect(dialog.getByText('编辑模型')).toBeVisible();
// ID 字段应被禁用
await expect(modelFormInputs(page).id).toBeDisabled();
await modelFormInputs(page).cancelBtn.click();
} else {
test.skip();
}
} else {
test.skip();
}
});
});
test.describe('错误处理和边界情况', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/providers');
await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible();
});
test('应显示必填字段验证', async ({ page }) => {
await page.getByRole('button', { name: '添加供应商' }).click();
await expect(page.locator('.t-dialog')).toBeVisible();
await formInputs(page).saveBtn.click();
await expect(page.getByText('请输入供应商 ID')).toBeVisible();
await expect(page.getByText('请输入名称')).toBeVisible();
await expect(page.getByText('请输入 API Key')).toBeVisible();
await expect(page.getByText('请输入 Base URL')).toBeVisible();
});
test('应验证URL格式', async ({ page }) => {
await page.getByRole('button', { name: '添加供应商' }).click();
await expect(page.locator('.t-dialog')).toBeVisible();
const inputs = formInputs(page);
await inputs.id.fill('test-url');
await inputs.name.fill('Test');
await inputs.apiKey.fill('sk-test');
await inputs.baseUrl.fill('not-a-url');
await inputs.saveBtn.click();
await expect(page.getByText('请输入有效的 URL')).toBeVisible();
});
test('超长输入处理', async ({ page }) => {
await page.getByRole('button', { name: '添加供应商' }).click();
await expect(page.locator('.t-dialog')).toBeVisible();
const inputs = formInputs(page);
await inputs.id.fill('test-long');
await inputs.name.fill('a'.repeat(500));
await inputs.apiKey.fill('sk-test');
await inputs.baseUrl.fill('https://api.test.com/v1');
await inputs.saveBtn.click();
// 等待 API 响应或验证错误
await page.waitForTimeout(2000);
});
test('快速连续点击只打开一个对话框', async ({ page }) => {
await page.getByRole('button', { name: '添加供应商' }).click();
await expect(page.locator('.t-dialog')).toBeVisible();
expect(await page.locator('.t-dialog').count()).toBe(1);
await formInputs(page).cancelBtn.click();
await expect(page.locator('.t-dialog')).not.toBeVisible();
});
test('取消后表单应重置', async ({ page }) => {
// 打开并填写表单
await page.getByRole('button', { name: '添加供应商' }).click();
await expect(page.locator('.t-dialog')).toBeVisible();
let inputs = formInputs(page);
await inputs.id.fill('should-be-reset');
await inputs.name.fill('Should Be Reset');
await inputs.cancelBtn.click();
await expect(page.locator('.t-dialog')).not.toBeVisible();
// 重新打开
await page.getByRole('button', { name: '添加供应商' }).click();
await expect(page.locator('.t-dialog')).toBeVisible();
// 验证表单已重置
inputs = formInputs(page);
await expect(inputs.id).toHaveValue('');
await expect(inputs.name).toHaveValue('');
});
});
test.describe('用量统计筛选功能', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/stats');
await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible();
});
test('组合筛选条件', async ({ page }) => {
await page.locator('.t-select').first().click();
await page.waitForSelector('.t-select__dropdown', { timeout: 3000 });
await page.keyboard.press('Escape');
await page.getByPlaceholder('模型名称').fill('gpt-4');
await expect(page.getByPlaceholder('模型名称')).toHaveValue('gpt-4');
});
test('清空筛选条件', async ({ page }) => {
const modelInput = page.getByPlaceholder('模型名称');
await modelInput.fill('gpt-4');
await expect(modelInput).toHaveValue('gpt-4');
await modelInput.clear();
await expect(modelInput).toHaveValue('');
});
test('刷新页面后筛选状态丢失', async ({ page }) => {
await page.getByPlaceholder('模型名称').fill('gpt-4');
await page.reload();
await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible();
await expect(page.getByPlaceholder('模型名称')).toHaveValue('');
});
});

87
frontend/e2e/fixtures.ts Normal file
View File

@@ -0,0 +1,87 @@
import fs from 'node:fs'
import path from 'node:path'
import initSqlite from 'sql.js'
export const API_BASE = `http://localhost:${process.env.NEX_BACKEND_PORT || '19026'}`
export interface SeedProviderInput {
id: string
name: string
apiKey: string
baseUrl: string
protocol: 'openai' | 'anthropic'
enabled: boolean
}
export interface SeedModelInput {
providerId: string
modelName: string
enabled: boolean
}
export interface SeedStatsInput {
providerId: string
modelName: string
requestCount: number
date: string
}
export async function seedProvider(
request: import('@playwright/test').APIRequestContext,
data: SeedProviderInput,
) {
const resp = await request.post(`${API_BASE}/api/providers`, {
data: {
id: data.id,
name: data.name,
api_key: data.apiKey,
base_url: data.baseUrl,
protocol: data.protocol,
enabled: data.enabled,
},
})
if (!resp.ok()) {
throw new Error(`seedProvider failed: ${resp.status()} ${await resp.text()}`)
}
return resp.json()
}
export async function seedModel(
request: import('@playwright/test').APIRequestContext,
data: SeedModelInput,
) {
const resp = await request.post(`${API_BASE}/api/models`, {
data: {
provider_id: data.providerId,
model_name: data.modelName,
enabled: data.enabled,
},
})
if (!resp.ok()) {
throw new Error(`seedModel failed: ${resp.status()} ${await resp.text()}`)
}
return resp.json()
}
export async function seedUsageStats(statsData: SeedStatsInput[]) {
const tempDir = process.env.NEX_E2E_TEMP_DIR
if (!tempDir) {
throw new Error('NEX_E2E_TEMP_DIR not set')
}
const dbPath = path.join(tempDir, 'test.db')
const SQL = await initSqlite()
const buf = fs.readFileSync(dbPath)
const db = new SQL.Database(buf)
for (const row of statsData) {
db.run(
'INSERT OR REPLACE INTO usage_stats (provider_id, model_name, request_count, date) VALUES (?, ?, ?, ?)',
[row.providerId, row.modelName, row.requestCount, row.date],
)
}
const data = db.export()
fs.writeFileSync(dbPath, Buffer.from(data))
db.close()
}

10
frontend/e2e/global-setup.ts Normal file
View File

@@ -0,0 +1,10 @@
import fs from 'node:fs'
async function globalSetup() {
const tempDir = process.env.NEX_E2E_TEMP_DIR
if (tempDir && fs.existsSync(tempDir)) {
console.log(`E2E temp dir: ${tempDir}`)
}
}
export default globalSetup

16
frontend/e2e/global-teardown.ts Normal file
View File

@@ -0,0 +1,16 @@
import fs from 'node:fs'
async function globalTeardown() {
const tempDir = process.env.NEX_E2E_TEMP_DIR
if (tempDir && fs.existsSync(tempDir)) {
await new Promise((resolve) => setTimeout(resolve, 500))
try {
fs.rmSync(tempDir, { recursive: true, force: true })
console.log(`Cleaned up E2E temp dir: ${tempDir}`)
} catch (e) {
console.error(`Failed to clean up temp dir ${tempDir}:`, e)
}
}
}
export default globalTeardown

125
frontend/e2e/models.spec.ts Normal file
View File

@@ -0,0 +1,125 @@
import { test, expect } from '@playwright/test'
import { API_BASE } from './fixtures'
let uid = Date.now()
function nextId() {
return `mpw_${++uid}`
}
function modelFormInputs(page: import('@playwright/test').Page) {
const dialog = page.locator('.t-dialog:visible')
return {
modelName: dialog.locator('input[placeholder="例如: gpt-4o"]'),
saveBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '保存' }),
cancelBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '取消' }),
}
}
test.describe('模型管理', () => {
let providerId: string
test.beforeEach(async ({ page, request }) => {
providerId = nextId()
await request.post(`${API_BASE}/api/providers`, {
data: {
id: providerId,
name: 'Model Test Provider',
api_key: 'sk_test_key',
base_url: 'https://api.example.com/v1',
protocol: 'openai',
enabled: true,
},
})
await page.goto('/providers')
await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible()
})
test('应能展开供应商查看模型空状态', async ({ page }) => {
await page.locator('.t-table__expandable-icon').first().click()
await expect(page.locator('.t-table__expanded-row').first()).toBeVisible()
await expect(page.getByText('暂无模型，点击上方按钮添加')).toBeVisible()
})
test('应能为供应商添加模型', async ({ page }) => {
await page.locator('.t-table__expandable-icon').first().click()
await expect(page.locator('.t-table__expanded-row').first()).toBeVisible()
await page.locator('.t-table__expanded-row button:has-text("添加模型")').first().click()
await expect(page.locator('.t-dialog:visible')).toBeVisible()
const inputs = modelFormInputs(page)
await inputs.modelName.fill('gpt_4_turbo')
await inputs.saveBtn.click()
await expect(page.locator('.t-dialog:visible')).not.toBeVisible({ timeout: 5000 })
await expect(page.locator('.t-table__expanded-row').getByText('gpt_4_turbo')).toBeVisible()
})
test('应显示统一模型 ID', async ({ page, request }) => {
await request.post(`${API_BASE}/api/models`, {
data: {
provider_id: providerId,
model_name: 'claude_3',
enabled: true,
},
})
await page.reload()
await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible()
await page.locator('.t-table__expandable-icon').first().click()
await expect(page.locator('.t-table__expanded-row').first()).toBeVisible()
await expect(page.locator('.t-table__expanded-row').getByText(`${providerId}/claude_3`)).toBeVisible()
})
test('应能编辑模型', async ({ page, request }) => {
await request.post(`${API_BASE}/api/models`, {
data: {
provider_id: providerId,
model_name: 'gpt_3_5',
enabled: true,
},
})
await page.reload()
await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible()
await page.locator('.t-table__expandable-icon').first().click()
await expect(page.locator('.t-table__expanded-row').first()).toBeVisible()
await page.locator('.t-table__expanded-row button:has-text("编辑")').first().click()
await expect(page.locator('.t-dialog:visible')).toBeVisible()
const inputs = modelFormInputs(page)
await inputs.modelName.clear()
await inputs.modelName.fill('gpt_4o')
await inputs.saveBtn.click()
await expect(page.locator('.t-dialog:visible')).not.toBeVisible({ timeout: 5000 })
await expect(page.locator('.t-table__expanded-row').getByText('gpt_4o')).toBeVisible()
})
test('应能删除模型', async ({ page, request }) => {
await request.post(`${API_BASE}/api/models`, {
data: {
provider_id: providerId,
model_name: 'to_delete_model',
enabled: true,
},
})
await page.reload()
await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible()
await page.locator('.t-table__expandable-icon').first().click()
await expect(page.locator('.t-table__expanded-row').first()).toBeVisible()
await expect(page.locator('.t-table__expanded-row').getByText('to_delete_model')).toBeVisible()
await page.locator('.t-table__expanded-row button:has-text("删除")').first().click()
await expect(page.getByText(/确定要删除/)).toBeVisible()
await page.locator('.t-popconfirm').getByRole('button', { name: '确定' }).click()
await expect(page.locator('.t-table__expanded-row').getByText('to_delete_model')).not.toBeVisible({ timeout: 5000 })
})
})

51
frontend/e2e/navigation.spec.ts Normal file
View File

@@ -0,0 +1,51 @@
import { test, expect } from '@playwright/test'
test.describe('侧边栏', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/providers')
await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible()
})
test('应显示侧边栏', async ({ page }) => {
const aside = page.locator('aside')
await expect(aside).toBeVisible()
})
test('应显示应用名称', async ({ page }) => {
await expect(page.locator('aside').getByText('AI Gateway')).toBeVisible()
})
test('应显示导航菜单项', async ({ page }) => {
const aside = page.locator('aside')
await expect(aside.getByText('供应商管理')).toBeVisible()
await expect(aside.getByText('用量统计')).toBeVisible()
})
})
test.describe('页面导航', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/providers')
await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible()
})
test('应能切换到用量统计', async ({ page }) => {
await page.locator('aside').getByText('用量统计').click()
await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible()
})
test('应能切换回供应商管理', async ({ page }) => {
await page.locator('aside').getByText('用量统计').click()
await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible()
await page.locator('aside').getByText('供应商管理').click()
await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible()
})
test('应在刷新后保持当前页面', async ({ page }) => {
await page.locator('aside').getByText('用量统计').click()
await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible()
await page.reload()
await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible()
})
})

186
frontend/e2e/providers.spec.ts
View File

@@ -1,8 +1,13 @@
import { test, expect } from '@playwright/test';
import { test, expect } from '@playwright/test'
let uid = Date.now()
function nextId() {
return `pw_${++uid}`
}
// 辅助：在对话框内定位输入框（TDesign Dialog + Form）
function formInputs(page: import('@playwright/test').Page) {
const dialog = page.locator('.t-dialog:visible');
const dialog = page.locator('.t-dialog:visible')
return {
id: dialog.locator('input[placeholder="例如: openai"]'),
name: dialog.locator('input[placeholder="例如: OpenAI"]'),
@@ -10,126 +15,89 @@ function formInputs(page: import('@playwright/test').Page) {
baseUrl: dialog.locator('input[placeholder="例如: https://api.openai.com/v1"]'),
saveBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '保存' }),
cancelBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '取消' }),
};
}
}
test.describe('供应商管理', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/providers');
await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible();
});
await page.goto('/providers')
await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible()
})
test('应显示供应商管理页面', async ({ page }) => {
await expect(page.getByText('供应商列表')).toBeVisible();
});
test('应能创建供应商并验证出现在表格中', async ({ page }) => {
const testId = nextId()
await page.getByRole('button', { name: '添加供应商' }).click()
await expect(page.locator('.t-dialog:visible')).toBeVisible()
test('应显示添加供应商按钮', async ({ page }) => {
await expect(page.getByRole('button', { name: '添加供应商' })).toBeVisible();
});
const inputs = formInputs(page)
await inputs.id.fill(testId)
await inputs.name.fill('Test Provider')
await inputs.apiKey.fill('sk_test_key_12345')
await inputs.baseUrl.fill('https://api.openai.com/v1')
test('应通过侧边栏导航切换页面', async ({ page }) => {
await page.locator('aside').getByText('用量统计').click();
await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible();
await inputs.saveBtn.click()
await expect(page.locator('.t-dialog:visible')).not.toBeVisible({ timeout: 5000 })
await page.locator('aside').getByText('供应商管理').click();
await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible();
});
await expect(page.locator('.t-table__body td').getByText(testId)).toBeVisible()
await expect(page.locator('.t-table__body td').getByText('Test Provider')).toBeVisible()
})
test('应能打开添加供应商对话框', async ({ page }) => {
await page.getByRole('button', { name: '添加供应商' }).click();
test('应能编辑供应商并验证更新生效', async ({ page }) => {
const testId = nextId()
await page.getByRole('button', { name: '添加供应商' }).click()
await expect(page.locator('.t-dialog:visible')).toBeVisible()
const inputs = formInputs(page)
await inputs.id.fill(testId)
await inputs.name.fill('Before Edit')
await inputs.apiKey.fill('sk_key')
await inputs.baseUrl.fill('https://api.example.com/v1')
await inputs.saveBtn.click()
await expect(page.locator('.t-dialog:visible')).not.toBeVisible({ timeout: 5000 })
const dialog = page.locator('.t-dialog');
await expect(dialog).toBeVisible();
await expect(dialog.getByText('添加供应商')).toBeVisible();
await expect(formInputs(page).id).toBeVisible();
await expect(formInputs(page).name).toBeVisible();
await expect(formInputs(page).apiKey).toBeVisible();
await expect(formInputs(page).baseUrl).toBeVisible();
});
await page.locator('.t-table__body button:has-text("编辑")').first().click()
await expect(page.locator('.t-dialog:visible')).toBeVisible()
test('应验证供应商表单必填字段', async ({ page }) => {
await page.getByRole('button', { name: '添加供应商' }).click();
await expect(page.locator('.t-dialog')).toBeVisible();
const editInputs = formInputs(page)
await editInputs.name.clear()
await editInputs.name.fill('After Edit')
await editInputs.saveBtn.click()
await expect(page.locator('.t-dialog:visible')).not.toBeVisible({ timeout: 5000 })
await formInputs(page).saveBtn.click();
await expect(page.locator('.t-table__body td').getByText('After Edit')).toBeVisible()
})
await expect(page.getByText('请输入供应商 ID')).toBeVisible();
await expect(page.getByText('请输入名称')).toBeVisible();
await expect(page.getByText('请输入 API Key')).toBeVisible();
await expect(page.getByText('请输入 Base URL')).toBeVisible();
});
test('应能删除供应商并验证消失', async ({ page }) => {
const testId = nextId()
await page.getByRole('button', { name: '添加供应商' }).click()
await expect(page.locator('.t-dialog:visible')).toBeVisible()
const inputs = formInputs(page)
await inputs.id.fill(testId)
await inputs.name.fill('To Delete')
await inputs.apiKey.fill('sk_key')
await inputs.baseUrl.fill('https://api.example.com/v1')
await inputs.saveBtn.click()
await expect(page.locator('.t-dialog:visible')).not.toBeVisible({ timeout: 5000 })
test('应验证URL格式', async ({ page }) => {
await page.getByRole('button', { name: '添加供应商' }).click();
await expect(page.locator('.t-dialog')).toBeVisible();
await page.locator('.t-table__body button:has-text("删除")').first().click()
await expect(page.getByText('确定要删除这个供应商吗？')).toBeVisible()
await page.locator('.t-popconfirm').getByRole('button', { name: '确定' }).click()
await expect(page.getByText('确定要删除这个供应商吗？')).not.toBeVisible({ timeout: 3000 })
const inputs = formInputs(page);
await inputs.id.fill('test-provider');
await inputs.name.fill('Test Provider');
await inputs.apiKey.fill('sk-test-key');
await inputs.baseUrl.fill('invalid-url');
await expect(page.locator('.t-table__body td').getByText(testId)).not.toBeVisible({ timeout: 5000 })
})
await inputs.saveBtn.click();
test('应正确脱敏显示 API Key', async ({ page }) => {
const testId = nextId()
await page.getByRole('button', { name: '添加供应商' }).click()
await expect(page.locator('.t-dialog:visible')).toBeVisible()
const inputs = formInputs(page)
await inputs.id.fill(testId)
await inputs.name.fill('Mask Test')
await inputs.apiKey.fill('sk_abcdefghijklmnopqrstuvwxyz')
await inputs.baseUrl.fill('https://api.example.com/v1')
await inputs.saveBtn.click()
await expect(page.locator('.t-dialog:visible')).not.toBeVisible({ timeout: 5000 })
await expect(page.getByText('请输入有效的 URL')).toBeVisible();
});
test('应能取消添加供应商', async ({ page }) => {
await page.getByRole('button', { name: '添加供应商' }).click();
await expect(page.locator('.t-dialog')).toBeVisible();
await formInputs(page).id.fill('test-provider');
await formInputs(page).cancelBtn.click();
await expect(page.locator('.t-dialog')).not.toBeVisible();
});
test('应显示供应商列表中的信息', async ({ page }) => {
await expect(page.locator('.t-table')).toBeVisible();
const tableHeaders = page.locator('.t-table__header th');
const count = await tableHeaders.count();
expect(count).toBeGreaterThanOrEqual(3);
});
test('应能展开供应商查看模型列表', async ({ page }) => {
const expandBtns = page.locator('.t-table__expandable-icon');
const count = await expandBtns.count();
if (count > 0) {
await expandBtns.first().click();
await expect(page.locator('.t-table__expanded-row').first()).toBeVisible();
} else {
test.skip();
}
});
test('应能打开编辑供应商对话框', async ({ page }) => {
const editBtns = page.locator('.t-table__body button:has-text("编辑")');
const count = await editBtns.count();
if (count > 0) {
await editBtns.first().click();
const dialog = page.locator('.t-dialog');
await expect(dialog).toBeVisible();
await expect(dialog.getByText('编辑供应商')).toBeVisible();
await expect(formInputs(page).id).toBeDisabled();
} else {
test.skip();
}
});
test('应显示删除确认对话框', async ({ page }) => {
const deleteBtns = page.locator('.t-table__body button:has-text("删除")');
const count = await deleteBtns.count();
if (count > 0) {
await deleteBtns.first().click();
await expect(page.getByText('确定要删除这个供应商吗？')).toBeVisible();
// TDesign Popconfirm 取消按钮
await page.locator('.t-popconfirm').getByRole('button', { name: '取消' }).click();
} else {
test.skip();
}
});
});
await expect(page.locator('.t-table__body')).toContainText('***stuv')
})
})

31
frontend/e2e/sidebar.spec.ts
View File

@@ -1,31 +0,0 @@
import { test, expect } from '@playwright/test';
test.describe('侧边栏导航', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/providers');
});
test('应显示侧边栏', async ({ page }) => {
// TDesign Layout.Aside 渲染为 aside 标签
const aside = page.locator('aside');
await expect(aside).toBeVisible();
});
test('应显示应用名称', async ({ page }) => {
await expect(page.locator('aside').getByText('AI Gateway')).toBeVisible();
});
test('应显示导航菜单项', async ({ page }) => {
const aside = page.locator('aside');
await expect(aside.getByText('供应商管理')).toBeVisible();
await expect(aside.getByText('用量统计')).toBeVisible();
});
test('默认应显示亮色侧边栏', async ({ page }) => {
const aside = page.locator('aside');
await expect(aside).toBeVisible();
const menu = page.locator('.t-menu');
await expect(menu).toBeVisible();
});
});

36
frontend/e2e/stats-cards.spec.ts
View File

@@ -1,36 +0,0 @@
import { test, expect } from '@playwright/test';
test.describe('统计摘要卡片', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/stats');
await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible();
});
test('应显示统计摘要卡片', async ({ page }) => {
await expect(page.getByText('总请求量')).toBeVisible();
await expect(page.getByText('活跃模型数')).toBeVisible();
await expect(page.getByText('活跃供应商数')).toBeVisible();
await expect(page.getByText('今日请求量')).toBeVisible();
});
test('应显示请求趋势图表', async ({ page }) => {
await expect(page.getByText('请求趋势')).toBeVisible();
});
test('应显示统计数据表格', async ({ page }) => {
await expect(page.getByText('统计数据')).toBeVisible();
});
test('统计卡片应显示数值', async ({ page }) => {
await page.waitForTimeout(1000);
const cards = page.locator('.t-card');
const count = await cards.count();
expect(count).toBeGreaterThan(0);
});
test('应显示筛选栏', async ({ page }) => {
await expect(page.locator('.t-select').first()).toBeVisible();
await expect(page.getByPlaceholder('模型名称')).toBeVisible();
});
});

217
frontend/e2e/stats.spec.ts
View File

@@ -1,96 +1,127 @@
import { test, expect } from '@playwright/test';
import { test, expect } from '@playwright/test'
import { API_BASE, seedUsageStats } from './fixtures'
test.describe('用量统计', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/stats');
// 等待页面加载完成
await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible();
});
test.describe('统计概览', () => {
test.beforeAll(async ({ request }) => {
const p1 = `sp1_${Date.now()}`
const p2 = `sp2_${Date.now()}`
process.env._STATS_P1 = p1
process.env._STATS_P2 = p2
test('应显示用量统计页面', async ({ page }) => {
await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible();
});
test('应显示筛选控件', async ({ page }) => {
// 验证供应商筛选下拉框
await expect(page.locator('.t-select').first()).toBeVisible();
// 验证模型名称输入框
await expect(page.getByPlaceholder('模型名称')).toBeVisible();
// 验证日期范围选择器 - TDesign DateRangePicker 使用 t-range-input 类
await expect(page.locator('.t-range-input')).toBeVisible();
});
test('应通过导航返回供应商页面', async ({ page }) => {
await page.getByText('供应商管理').click();
await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible();
});
test('应显示统计表格列标题', async ({ page }) => {
// 验证表格存在
await expect(page.locator('.t-table')).toBeVisible();
// 通过 thead th 验证列标题存在
const headers = page.locator('.t-table__header th');
await expect(headers).toHaveCount(4);
// 逐个验证列标题文本
await expect(headers.nth(0)).toContainText('供应商');
await expect(headers.nth(1)).toContainText('模型');
await expect(headers.nth(2)).toContainText('日期');
await expect(headers.nth(3)).toContainText('请求数');
});
test('应能输入模型名称筛选', async ({ page }) => {
const modelInput = page.getByPlaceholder('模型名称');
// 输入模型名称
await modelInput.fill('gpt-4');
// 验证输入值
await expect(modelInput).toHaveValue('gpt-4');
// 清空输入
await modelInput.clear();
await expect(modelInput).toHaveValue('');
});
test('应能打开供应商筛选下拉框', async ({ page }) => {
// 点击供应商下拉框
await page.locator('.t-select').first().click();
// 验证下拉选项出现
await page.waitForSelector('.t-select__dropdown', { timeout: 3000 });
// 点击外部关闭下拉框
await page.keyboard.press('Escape');
});
test('应能打开日期范围选择器', async ({ page }) => {
// 点击日期选择器 - TDesign DateRangePicker
const dateRangePicker = page.locator('.t-range-input');
await expect(dateRangePicker).toBeVisible();
// 点击日期选择器
await dateRangePicker.click();
// 等待一下让面板打开
await page.waitForTimeout(500);
// 点击外部关闭
await page.keyboard.press('Escape');
});
test('应显示空数据提示', async ({ page }) => {
// 等待表格加载
await page.waitForSelector('.t-table', { timeout: 5000 });
// 检查是否有数据
const emptyText = page.locator('.t-table__empty');
if (await emptyText.count() > 0) {
await expect(emptyText).toBeVisible();
for (const id of [p1, p2]) {
await request.post(`${API_BASE}/api/providers`, {
data: {
id,
name: `Stats Provider ${id}`,
api_key: 'sk_test',
base_url: 'https://api.example.com/v1',
protocol: 'openai',
enabled: true,
},
})
}
});
});
const today = new Date()
const statsData = []
for (let i = 0; i < 7; i++) {
const d = new Date(today)
d.setDate(d.getDate() - i)
const dateStr = d.toISOString().slice(0, 10)
statsData.push({ providerId: p1, modelName: 'gpt_4', requestCount: 10 + i, date: dateStr })
if (i < 3) {
statsData.push({ providerId: p1, modelName: 'claude_3', requestCount: 5 + i, date: dateStr })
}
if (i < 5) {
statsData.push({ providerId: p2, modelName: 'gpt_4', requestCount: 8 + i, date: dateStr })
}
}
await seedUsageStats(statsData)
})
test.beforeEach(async ({ page }) => {
await page.goto('/stats')
await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible()
})
test('应显示正确的总请求量', async ({ page }) => {
await page.waitForTimeout(1000)
await expect(page.getByText('总请求量')).toBeVisible()
})
test('应显示正确的活跃模型数和活跃供应商数', async ({ page }) => {
await page.waitForTimeout(1000)
await expect(page.getByText('活跃模型数')).toBeVisible()
await expect(page.getByText('活跃供应商数')).toBeVisible()
})
test('应显示统计数据行', async ({ page }) => {
await expect(page.locator('.t-table__body tr').first()).toBeVisible({ timeout: 5000 })
})
test('应渲染趋势图表区域', async ({ page }) => {
await expect(page.getByText('请求趋势')).toBeVisible()
})
})
test.describe('统计筛选', () => {
test.beforeAll(async ({ request }) => {
const p1 = `fp1_${Date.now()}`
const p2 = `fp2_${Date.now()}`
process.env._FILTER_P1 = p1
process.env._FILTER_P2 = p2
for (const id of [p1, p2]) {
await request.post(`${API_BASE}/api/providers`, {
data: {
id,
name: `Filter Provider ${id}`,
api_key: 'sk_test',
base_url: 'https://api.example.com/v1',
protocol: 'openai',
enabled: true,
},
})
}
const today = new Date()
const statsData = []
for (let i = 0; i < 3; i++) {
const d = new Date(today)
d.setDate(d.getDate() - i)
const dateStr = d.toISOString().slice(0, 10)
statsData.push({ providerId: p1, modelName: 'gpt_4', requestCount: 10 + i, date: dateStr })
statsData.push({ providerId: p2, modelName: 'claude_3', requestCount: 5 + i, date: dateStr })
}
await seedUsageStats(statsData)
})
test.beforeEach(async ({ page }) => {
await page.goto('/stats')
await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible()
})
test('按供应商筛选', async ({ page }) => {
await expect(page.locator('.t-table__body tr').first()).toBeVisible({ timeout: 5000 })
const rowCountBefore = await page.locator('.t-table__body tr:not(.t-table__empty-row)').count()
await page.locator('.t-select').first().click()
await page.waitForSelector('.t-select__dropdown', { timeout: 3000 })
await page.locator('.t-select__dropdown .t-select-option').first().click()
await page.waitForTimeout(1000)
const rowCountAfter = await page.locator('.t-table__body tr:not(.t-table__empty-row)').count()
expect(rowCountAfter).toBeLessThanOrEqual(rowCountBefore)
})
test('按模型名称筛选', async ({ page }) => {
await expect(page.locator('.t-table__body tr').first()).toBeVisible({ timeout: 5000 })
await page.getByPlaceholder('模型名称').fill('gpt_4')
await page.waitForTimeout(1000)
await expect(page.locator('.t-table__body')).toBeVisible()
})
test('应显示筛选栏', async ({ page }) => {
await expect(page.locator('.t-select').first()).toBeVisible()
await expect(page.getByPlaceholder('模型名称')).toBeVisible()
})
})

75
frontend/e2e/validation.spec.ts Normal file
View File

@@ -0,0 +1,75 @@
import { test, expect } from '@playwright/test'
function formInputs(page: import('@playwright/test').Page) {
const dialog = page.locator('.t-dialog:visible')
return {
id: dialog.locator('input[placeholder="例如: openai"]'),
name: dialog.locator('input[placeholder="例如: OpenAI"]'),
apiKey: dialog.locator('input[type="password"]'),
baseUrl: dialog.locator('input[placeholder="例如: https://api.openai.com/v1"]'),
saveBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '保存' }),
cancelBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '取消' }),
}
}
test.describe('供应商表单验证', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/providers')
await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible()
})
test('应显示必填字段验证', async ({ page }) => {
await page.getByRole('button', { name: '添加供应商' }).click()
await expect(page.locator('.t-dialog')).toBeVisible()
await formInputs(page).saveBtn.click()
await expect(page.getByText('请输入供应商 ID')).toBeVisible()
await expect(page.getByText('请输入名称')).toBeVisible()
await expect(page.getByText('请输入 API Key')).toBeVisible()
await expect(page.getByText('请输入 Base URL')).toBeVisible()
})
test('应验证URL格式', async ({ page }) => {
await page.getByRole('button', { name: '添加供应商' }).click()
await expect(page.locator('.t-dialog')).toBeVisible()
const inputs = formInputs(page)
await inputs.id.fill('test_url')
await inputs.name.fill('Test')
await inputs.apiKey.fill('sk_test')
await inputs.baseUrl.fill('not-a-url')
await inputs.saveBtn.click()
await expect(page.getByText('请输入有效的 URL')).toBeVisible()
})
test('取消后表单应重置', async ({ page }) => {
await page.getByRole('button', { name: '添加供应商' }).click()
await expect(page.locator('.t-dialog')).toBeVisible()
let inputs = formInputs(page)
await inputs.id.fill('should_be_reset')
await inputs.name.fill('Should Be Reset')
await inputs.cancelBtn.click()
await expect(page.locator('.t-dialog')).not.toBeVisible()
await page.getByRole('button', { name: '添加供应商' }).click()
await expect(page.locator('.t-dialog')).toBeVisible()
inputs = formInputs(page)
await expect(inputs.id).toHaveValue('')
await expect(inputs.name).toHaveValue('')
})
test('快速连续点击只打开一个对话框', async ({ page }) => {
await page.getByRole('button', { name: '添加供应商' }).click()
await expect(page.locator('.t-dialog')).toBeVisible()
expect(await page.locator('.t-dialog').count()).toBe(1)
await formInputs(page).cancelBtn.click()
await expect(page.locator('.t-dialog')).not.toBeVisible()
})
})