test: 修复单元测试并补充完善 E2E 测试用例
- 修复 5 个单元测试失败：ProviderForm 表单提交超时、ModelForm 初始值检查、 StatsTable Select 交互、ProviderTable 删除确认超时 - 适配 Ant Design 6 的 DOM 结构变化和异步行为 - 补充 E2E 测试从 6 个扩展到 32 个，覆盖供应商 CRUD、模型管理、 表单验证、错误处理、边界情况、用量统计筛选等完整用户流程 - 发现并处理 Ant Design 6 按钮文本渲染带空格的兼容性问题
This commit is contained in:
256
frontend/e2e/crud.spec.ts
Normal file
256
frontend/e2e/crud.spec.ts
Normal file
@@ -0,0 +1,256 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
// 辅助：在对话框内定位输入框
|
||||
function formInputs(page: import('@playwright/test').Page) {
|
||||
const dialog = page.getByRole('dialog');
|
||||
return {
|
||||
id: dialog.getByRole('textbox', { name: /ID/ }),
|
||||
name: dialog.getByRole('textbox', { name: /名称/ }),
|
||||
apiKey: dialog.locator('input[type="password"]'),
|
||||
baseUrl: dialog.getByRole('textbox', { name: /Base URL/ }),
|
||||
saveBtn: dialog.locator('.ant-modal-footer').getByRole('button').last(),
|
||||
cancelBtn: dialog.locator('.ant-modal-footer').getByRole('button').first(),
|
||||
};
|
||||
}
|
||||
|
||||
// 辅助：在模型对话框内定位输入框
|
||||
function modelFormInputs(page: import('@playwright/test').Page) {
|
||||
const dialog = page.getByRole('dialog');
|
||||
return {
|
||||
id: dialog.locator('input[placeholder="例如: gpt-4o"]').first(),
|
||||
modelName: dialog.locator('input[placeholder="例如: gpt-4o"]').nth(1),
|
||||
saveBtn: dialog.locator('.ant-modal-footer').getByRole('button').last(),
|
||||
cancelBtn: dialog.locator('.ant-modal-footer').getByRole('button').first(),
|
||||
};
|
||||
}
|
||||
|
||||
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.getByRole('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 inputs.saveBtn.click();
|
||||
await expect(page.getByRole('dialog')).not.toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
|
||||
test('供应商创建后编辑流程', async ({ page }) => {
|
||||
const editBtns = page.locator('.ant-table-tbody button:has-text("编辑")');
|
||||
const count = await editBtns.count();
|
||||
|
||||
if (count > 0) {
|
||||
await editBtns.first().click();
|
||||
await expect(page.getByRole('dialog')).toBeVisible();
|
||||
|
||||
const inputs = formInputs(page);
|
||||
await inputs.name.clear();
|
||||
await inputs.name.fill('Updated Provider Name');
|
||||
|
||||
await inputs.saveBtn.click();
|
||||
await expect(page.getByRole('dialog')).not.toBeVisible({ timeout: 5000 });
|
||||
} else {
|
||||
test.skip();
|
||||
}
|
||||
});
|
||||
|
||||
test('供应商删除流程', async ({ page }) => {
|
||||
const deleteBtns = page.locator('.ant-table-tbody button:has-text("删除")');
|
||||
const count = await deleteBtns.count();
|
||||
|
||||
if (count > 0) {
|
||||
await deleteBtns.first().click();
|
||||
await expect(page.getByText('确定要删除这个供应商吗？')).toBeVisible();
|
||||
|
||||
// 点击确认（Popconfirm 按钮最后一个 = "确 定"）
|
||||
await page.locator('.ant-popconfirm-buttons').getByRole('button').last().click();
|
||||
await expect(page.getByText('确定要删除这个供应商吗？')).not.toBeVisible({ timeout: 3000 });
|
||||
} else {
|
||||
test.skip();
|
||||
}
|
||||
});
|
||||
|
||||
test('展开供应商并添加模型', async ({ page }) => {
|
||||
const expandBtns = page.locator('.ant-table-row-expand-icon');
|
||||
const expandCount = await expandBtns.count();
|
||||
|
||||
if (expandCount > 0) {
|
||||
await expandBtns.first().click();
|
||||
await expect(page.locator('.ant-table-expanded-row').first()).toBeVisible();
|
||||
|
||||
const addModelBtn = page.locator('.ant-table-expanded-row button:has-text("添加模型")');
|
||||
const addCount = await addModelBtn.count();
|
||||
|
||||
if (addCount > 0) {
|
||||
await addModelBtn.first().click();
|
||||
const dialog = page.getByRole('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.getByRole('dialog')).not.toBeVisible({ timeout: 5000 });
|
||||
} else {
|
||||
test.skip();
|
||||
}
|
||||
} else {
|
||||
test.skip();
|
||||
}
|
||||
});
|
||||
|
||||
test('编辑已有模型', async ({ page }) => {
|
||||
const expandBtns = page.locator('.ant-table-row-expand-icon');
|
||||
const expandCount = await expandBtns.count();
|
||||
|
||||
if (expandCount > 0) {
|
||||
await expandBtns.first().click();
|
||||
await expect(page.locator('.ant-table-expanded-row').first()).toBeVisible();
|
||||
|
||||
const modelEditBtns = page.locator('.ant-table-expanded-row button:has-text("编辑")');
|
||||
const editCount = await modelEditBtns.count();
|
||||
|
||||
if (editCount > 0) {
|
||||
await modelEditBtns.first().click();
|
||||
const dialog = page.getByRole('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.getByRole('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.getByRole('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.getByRole('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.getByRole('dialog')).toBeVisible();
|
||||
|
||||
expect(await page.locator('[role="dialog"]').count()).toBe(1);
|
||||
|
||||
await formInputs(page).cancelBtn.click();
|
||||
await expect(page.getByRole('dialog')).not.toBeVisible();
|
||||
});
|
||||
|
||||
test('取消后表单应重置', async ({ page }) => {
|
||||
// 打开并填写表单
|
||||
await page.getByRole('button', { name: '添加供应商' }).click();
|
||||
await expect(page.getByRole('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.getByRole('dialog')).not.toBeVisible();
|
||||
|
||||
// 重新打开
|
||||
await page.getByRole('button', { name: '添加供应商' }).click();
|
||||
await expect(page.getByRole('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('.ant-select').first().click();
|
||||
await page.waitForSelector('.ant-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('');
|
||||
});
|
||||
});
|
||||
@@ -1,12 +1,26 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
// 辅助：在对话框内定位输入框（Ant Design 6 的 Modal + Form）
|
||||
function formInputs(page: import('@playwright/test').Page) {
|
||||
const dialog = page.getByRole('dialog');
|
||||
return {
|
||||
id: dialog.getByRole('textbox', { name: /ID/ }),
|
||||
name: dialog.getByRole('textbox', { name: /名称/ }),
|
||||
apiKey: dialog.locator('input[type="password"]'),
|
||||
baseUrl: dialog.getByRole('textbox', { name: /Base URL/ }),
|
||||
// Ant Design 6 按钮文字带空格："保 存"、"取 消"
|
||||
saveBtn: dialog.locator('.ant-modal-footer').getByRole('button').last(),
|
||||
cancelBtn: dialog.locator('.ant-modal-footer').getByRole('button').first(),
|
||||
};
|
||||
}
|
||||
|
||||
test.describe('供应商管理', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/providers');
|
||||
await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible();
|
||||
});
|
||||
|
||||
test('应显示供应商管理页面', async ({ page }) => {
|
||||
await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible();
|
||||
await expect(page.getByText('供应商列表')).toBeVisible();
|
||||
});
|
||||
|
||||
@@ -21,4 +35,102 @@ test.describe('供应商管理', () => {
|
||||
await page.getByText('供应商管理').click();
|
||||
await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible();
|
||||
});
|
||||
|
||||
test('应能打开添加供应商对话框', async ({ page }) => {
|
||||
await page.getByRole('button', { name: '添加供应商' }).click();
|
||||
|
||||
const dialog = page.getByRole('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();
|
||||
});
|
||||
|
||||
test('应验证供应商表单必填字段', async ({ page }) => {
|
||||
await page.getByRole('button', { name: '添加供应商' }).click();
|
||||
await expect(page.getByRole('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.getByRole('dialog')).toBeVisible();
|
||||
|
||||
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 inputs.saveBtn.click();
|
||||
|
||||
await expect(page.getByText('请输入有效的 URL')).toBeVisible();
|
||||
});
|
||||
|
||||
test('应能取消添加供应商', async ({ page }) => {
|
||||
await page.getByRole('button', { name: '添加供应商' }).click();
|
||||
await expect(page.getByRole('dialog')).toBeVisible();
|
||||
|
||||
await formInputs(page).id.fill('test-provider');
|
||||
await formInputs(page).cancelBtn.click();
|
||||
|
||||
await expect(page.getByRole('dialog')).not.toBeVisible();
|
||||
});
|
||||
|
||||
test('应显示供应商列表中的信息', async ({ page }) => {
|
||||
await expect(page.locator('.ant-table')).toBeVisible();
|
||||
const tableHeaders = page.locator('.ant-table-thead th');
|
||||
const count = await tableHeaders.count();
|
||||
expect(count).toBeGreaterThanOrEqual(3);
|
||||
});
|
||||
|
||||
test('应能展开供应商查看模型列表', async ({ page }) => {
|
||||
const expandBtns = page.locator('.ant-table-row-expand-icon');
|
||||
const count = await expandBtns.count();
|
||||
|
||||
if (count > 0) {
|
||||
await expandBtns.first().click();
|
||||
await expect(page.locator('.ant-table-expanded-row').first()).toBeVisible();
|
||||
} else {
|
||||
test.skip();
|
||||
}
|
||||
});
|
||||
|
||||
test('应能打开编辑供应商对话框', async ({ page }) => {
|
||||
const editBtns = page.locator('.ant-table-tbody button:has-text("编辑")');
|
||||
const count = await editBtns.count();
|
||||
|
||||
if (count > 0) {
|
||||
await editBtns.first().click();
|
||||
const dialog = page.getByRole('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('.ant-table-tbody button:has-text("删除")');
|
||||
const count = await deleteBtns.count();
|
||||
|
||||
if (count > 0) {
|
||||
await deleteBtns.first().click();
|
||||
await expect(page.getByText('确定要删除这个供应商吗？')).toBeVisible();
|
||||
|
||||
// Popconfirm 按钮也带空格："确 定"、"取 消"
|
||||
await page.locator('.ant-popconfirm-buttons').getByRole('button').first().click();
|
||||
} else {
|
||||
test.skip();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -3,6 +3,8 @@ 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 }) => {
|
||||
@@ -10,11 +12,81 @@ test.describe('用量统计', () => {
|
||||
});
|
||||
|
||||
test('应显示筛选控件', async ({ page }) => {
|
||||
// 验证供应商筛选下拉框
|
||||
await expect(page.getByText('所有供应商')).toBeVisible();
|
||||
|
||||
// 验证模型名称输入框
|
||||
await expect(page.getByPlaceholder('模型名称')).toBeVisible();
|
||||
|
||||
// 验证日期范围选择器
|
||||
await expect(page.locator('.ant-picker-range')).toBeVisible();
|
||||
});
|
||||
|
||||
test('应通过导航返回供应商页面', async ({ page }) => {
|
||||
await page.getByText('供应商管理').click();
|
||||
await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible();
|
||||
});
|
||||
|
||||
test('应显示统计表格列标题', async ({ page }) => {
|
||||
// 验证表格存在
|
||||
await expect(page.locator('.ant-table')).toBeVisible();
|
||||
|
||||
// 通过 thead th 验证列标题存在
|
||||
const headers = page.locator('.ant-table-thead 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('.ant-select').click();
|
||||
|
||||
// 验证下拉选项出现
|
||||
await page.waitForSelector('.ant-select-dropdown', { timeout: 3000 });
|
||||
|
||||
// 点击外部关闭下拉框
|
||||
await page.keyboard.press('Escape');
|
||||
});
|
||||
|
||||
test('应能打开日期范围选择器', async ({ page }) => {
|
||||
// 点击日期选择器
|
||||
await page.locator('.ant-picker-range').click();
|
||||
|
||||
// 验证日期面板出现
|
||||
await page.waitForSelector('.ant-picker-dropdown', { timeout: 3000 });
|
||||
|
||||
// 点击外部关闭
|
||||
await page.keyboard.press('Escape');
|
||||
});
|
||||
|
||||
test('应显示空数据提示', async ({ page }) => {
|
||||
// 等待表格加载
|
||||
await page.waitForSelector('.ant-table', { timeout: 5000 });
|
||||
|
||||
// 检查是否有数据
|
||||
const emptyText = page.locator('.ant-table-tbody .ant-empty-description');
|
||||
|
||||
if (await emptyText.count() > 0) {
|
||||
await expect(emptyText).toBeVisible();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user