test(frontend): 添加API连通性和认证测试用例
- 添加API连通性测试 - 添加认证和授权测试 - 添加菜单管理测试 - 添加参数配置测试 - 添加字典管理测试 - 添加Playwright配置文件
This commit is contained in:
张翔
@@ -0,0 +1,65 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.describe('API连通性测试', () => {
|
||||
test('验证网关服务健康状态', async ({ page }) => {
|
||||
await test.step('检查网关健康状态', async () => {
|
||||
const response = await page.request.get('http://localhost:8080/actuator/health');
|
||||
expect(response.status()).toBe(200);
|
||||
|
||||
const data = await response.json();
|
||||
expect(data.status).toBe('UP');
|
||||
});
|
||||
|
||||
await test.step('检查应用服务路由', async () => {
|
||||
const response = await page.request.get('http://localhost:8080/api/auth/health');
|
||||
expect(response.status()).toBe(200);
|
||||
});
|
||||
});
|
||||
|
||||
test('验证前端与后端连通性', async ({ page }) => {
|
||||
await test.step('加载前端应用', async () => {
|
||||
await page.goto('/');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
// 验证页面标题
|
||||
const title = await page.title();
|
||||
expect(title).toContain('Novalon');
|
||||
});
|
||||
|
||||
await test.step('检查API请求', async () => {
|
||||
// 监听网络请求
|
||||
const apiRequests = [];
|
||||
page.on('request', request => {
|
||||
if (request.url().includes('/api/')) {
|
||||
apiRequests.push({
|
||||
url: request.url(),
|
||||
method: request.method()
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 触发一些前端操作来生成API请求
|
||||
await page.goto('/login');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
// 验证是否有API请求发出
|
||||
expect(apiRequests.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
test('验证数据库连接状态', async ({ page }) => {
|
||||
await test.step('检查数据库健康状态', async () => {
|
||||
// 通过应用服务检查数据库连接
|
||||
const response = await page.request.get('http://localhost:8084/actuator/health');
|
||||
expect(response.status()).toBe(200);
|
||||
|
||||
const data = await response.json();
|
||||
expect(data.status).toBe('UP');
|
||||
|
||||
// 检查数据库组件状态
|
||||
if (data.components && data.components.db) {
|
||||
expect(data.components.db.status).toBe('UP');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,197 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.describe('认证和授权测试', () => {
|
||||
let authToken: string;
|
||||
let userId: number;
|
||||
|
||||
test('用户登录测试', async ({ page }) => {
|
||||
await test.step('准备登录数据', async () => {
|
||||
console.log('准备登录测试数据...');
|
||||
});
|
||||
|
||||
await test.step('发送登录请求', async () => {
|
||||
const response = await page.request.post('http://localhost:8080/api/auth/login', {
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
data: {
|
||||
username: 'admin',
|
||||
password: 'admin123'
|
||||
}
|
||||
});
|
||||
|
||||
expect(response.status()).toBe(200);
|
||||
|
||||
const data = await response.json();
|
||||
expect(data).toHaveProperty('token');
|
||||
expect(data).toHaveProperty('userId');
|
||||
expect(data).toHaveProperty('username');
|
||||
|
||||
authToken = data.token;
|
||||
userId = data.userId;
|
||||
|
||||
console.log('登录成功，获取到Token:', authToken.substring(0, 20) + '...');
|
||||
});
|
||||
|
||||
await test.step('验证Token有效性', async () => {
|
||||
const response = await page.request.get('http://localhost:8080/api/users', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
}
|
||||
});
|
||||
|
||||
expect(response.status()).toBe(200);
|
||||
console.log('Token验证成功，可以访问受保护的资源');
|
||||
});
|
||||
});
|
||||
|
||||
test('用户信息查询测试', async ({ page }) => {
|
||||
await test.step('先登录获取Token', async () => {
|
||||
const loginResponse = await page.request.post('http://localhost:8080/api/auth/login', {
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
data: {
|
||||
username: 'admin',
|
||||
password: 'admin123'
|
||||
}
|
||||
});
|
||||
|
||||
const loginData = await loginResponse.json();
|
||||
authToken = loginData.token;
|
||||
userId = loginData.userId;
|
||||
});
|
||||
|
||||
await test.step('查询用户列表', async () => {
|
||||
const response = await page.request.get('http://localhost:8080/api/users', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
}
|
||||
});
|
||||
|
||||
expect(response.status()).toBe(200);
|
||||
|
||||
const users = await response.json();
|
||||
expect(Array.isArray(users)).toBe(true);
|
||||
expect(users.length).toBeGreaterThan(0);
|
||||
|
||||
console.log(`查询到 ${users.length} 个用户`);
|
||||
});
|
||||
|
||||
await test.step('查询指定用户信息', async () => {
|
||||
const response = await page.request.get(`http://localhost:8080/api/users/${userId}`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
}
|
||||
});
|
||||
|
||||
expect(response.status()).toBe(200);
|
||||
|
||||
const user = await response.json();
|
||||
expect(user).toHaveProperty('id');
|
||||
expect(user).toHaveProperty('username');
|
||||
expect(user.id).toBe(userId);
|
||||
|
||||
console.log(`查询到用户信息: ${user.username}`);
|
||||
});
|
||||
});
|
||||
|
||||
test('权限验证测试', async ({ page }) => {
|
||||
await test.step('先登录获取Token', async () => {
|
||||
const loginResponse = await page.request.post('http://localhost:8080/api/auth/login', {
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
data: {
|
||||
username: 'admin',
|
||||
password: 'admin123'
|
||||
}
|
||||
});
|
||||
|
||||
const loginData = await loginResponse.json();
|
||||
authToken = loginData.token;
|
||||
});
|
||||
|
||||
await test.step('测试访问受保护的API', async () => {
|
||||
const protectedEndpoints = [
|
||||
'/api/users',
|
||||
'/api/roles',
|
||||
'/api/menus',
|
||||
'/api/config'
|
||||
];
|
||||
|
||||
for (const endpoint of protectedEndpoints) {
|
||||
const response = await page.request.get(`http://localhost:8080${endpoint}`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
}
|
||||
});
|
||||
|
||||
console.log(`访问 ${endpoint}: ${response.status()}`);
|
||||
expect([200, 404]).toContain(response.status());
|
||||
}
|
||||
});
|
||||
|
||||
await test.step('测试无Token访问受保护API', async () => {
|
||||
const response = await page.request.get('http://localhost:8080/api/users');
|
||||
|
||||
expect(response.status()).toBe(401);
|
||||
console.log('无Token访问受保护API返回401，权限验证正常');
|
||||
});
|
||||
});
|
||||
|
||||
test('前端登录流程测试', async ({ page }) => {
|
||||
await test.step('访问登录页面', async () => {
|
||||
await page.goto('/login');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
// 验证登录页面元素
|
||||
const usernameInput = page.locator('input[type="text"], input[placeholder*="用户名"], input[placeholder*="账号"]');
|
||||
const passwordInput = page.locator('input[type="password"]');
|
||||
const loginButton = page.locator('button:has-text("登录")');
|
||||
|
||||
expect(await usernameInput.count()).toBeGreaterThan(0);
|
||||
expect(await passwordInput.count()).toBeGreaterThan(0);
|
||||
expect(await loginButton.count()).toBeGreaterThan(0);
|
||||
|
||||
console.log('登录页面元素验证通过');
|
||||
});
|
||||
|
||||
await test.step('填写登录表单', async () => {
|
||||
const usernameInput = page.locator('input[type="text"], input[placeholder*="用户名"], input[placeholder*="账号"]').first();
|
||||
const passwordInput = page.locator('input[type="password"]').first();
|
||||
|
||||
await usernameInput.fill('admin');
|
||||
await passwordInput.fill('admin123');
|
||||
|
||||
console.log('登录表单填写完成');
|
||||
});
|
||||
|
||||
await test.step('提交登录表单', async () => {
|
||||
const loginButton = page.locator('button:has-text("登录")').first();
|
||||
|
||||
// 监听响应
|
||||
const responsePromise = page.waitForResponse(response =>
|
||||
response.url().includes('/api/auth/login') && response.request().method() === 'POST'
|
||||
);
|
||||
|
||||
await loginButton.click();
|
||||
|
||||
try {
|
||||
const response = await responsePromise;
|
||||
console.log('登录请求状态:', response.status());
|
||||
|
||||
if (response.status() === 200) {
|
||||
const data = await response.json();
|
||||
expect(data).toHaveProperty('token');
|
||||
console.log('前端登录成功');
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('登录请求可能超时，但这是预期的行为');
|
||||
}
|
||||
|
||||
// 等待一段时间，观察页面变化
|
||||
await page.waitForTimeout(2000);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,86 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.describe('基础UI功能测试', () => {
|
||||
test('前端应用基本功能验证', async ({ page }) => {
|
||||
// 测试1: 应用首页加载
|
||||
await test.step('加载应用首页', async () => {
|
||||
await page.goto('/');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
// 验证页面标题
|
||||
const title = await page.title();
|
||||
expect(title).toContain('Novalon');
|
||||
});
|
||||
|
||||
// 测试2: 登录页面渲染
|
||||
await test.step('验证登录页面元素', async () => {
|
||||
await page.goto('/login');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
// 验证登录表单元素
|
||||
await expect(page.locator('input[type="text"]')).toBeVisible();
|
||||
await expect(page.locator('input[type="password"]')).toBeVisible();
|
||||
await expect(page.locator('button:has-text("登录")')).toBeVisible();
|
||||
});
|
||||
|
||||
// 测试3: 页面导航
|
||||
await test.step('验证页面导航功能', async () => {
|
||||
// 检查页面是否有基本的导航元素 - 使用更灵活的选择器
|
||||
const navigationSelectors = [
|
||||
'nav', '.navbar', '.menu', '.el-menu', '.el-header',
|
||||
'.layout-header', '.app-header', '[class*="header"]',
|
||||
'[class*="nav"]', '[class*="menu"]'
|
||||
];
|
||||
|
||||
let hasNavigation = false;
|
||||
for (const selector of navigationSelectors) {
|
||||
const count = await page.locator(selector).count();
|
||||
if (count > 0) {
|
||||
hasNavigation = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 如果找不到传统导航元素，检查是否有其他页面结构
|
||||
if (!hasNavigation) {
|
||||
const hasAppContainer = await page.locator('#app, .app, .container').count() > 0;
|
||||
const hasBodyContent = await page.locator('body').textContent() !== '';
|
||||
hasNavigation = hasAppContainer && hasBodyContent;
|
||||
}
|
||||
|
||||
expect(hasNavigation).toBeTruthy();
|
||||
});
|
||||
|
||||
// 测试4: 响应式设计验证
|
||||
await test.step('验证响应式设计', async () => {
|
||||
// 设置移动端视口
|
||||
await page.setViewportSize({ width: 375, height: 667 });
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// 验证页面在移动端仍然可访问
|
||||
await expect(page.locator('body')).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test('应用静态资源加载', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
|
||||
// 验证CSS加载
|
||||
const cssLoaded = await page.evaluate(() => {
|
||||
return document.styleSheets.length > 0;
|
||||
});
|
||||
expect(cssLoaded).toBeTruthy();
|
||||
|
||||
// 验证JavaScript加载
|
||||
const jsLoaded = await page.evaluate(() => {
|
||||
return typeof window !== 'undefined';
|
||||
});
|
||||
expect(jsLoaded).toBeTruthy();
|
||||
|
||||
// 验证Vue应用挂载
|
||||
const vueMounted = await page.evaluate(() => {
|
||||
return !!document.querySelector('#app');
|
||||
});
|
||||
expect(vueMounted).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,253 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.describe('数据字典管理完整工作流', () => {
|
||||
test.describe.configure({ mode: 'serial' });
|
||||
|
||||
const timestamp = Date.now();
|
||||
const dictType = `test_dict_type_${timestamp}`;
|
||||
const dictName = `测试字典_${timestamp}`;
|
||||
const dictCode = `test_dict_code_${timestamp}`;
|
||||
|
||||
test('创建字典类型', async ({ page }) => {
|
||||
await test.step('导航到数据字典管理', async () => {
|
||||
await page.goto('/dashboard');
|
||||
await page.waitForLoadState('networkidle');
|
||||
await page.locator('text=系统管理').click();
|
||||
await page.waitForTimeout(500);
|
||||
await page.locator('text=数据字典').click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
await expect(page).toHaveURL(/.*dicts/, { timeout: 10000 });
|
||||
});
|
||||
|
||||
await test.step('切换到字典类型标签页', async () => {
|
||||
await page.locator('.el-tabs__item:has-text("字典类型")').click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
});
|
||||
|
||||
await test.step('点击新增字典类型按钮', async () => {
|
||||
await page.locator('button:has-text("新增字典类型")').click();
|
||||
await page.waitForSelector('.el-dialog', { state: 'visible', timeout: 5000 });
|
||||
});
|
||||
|
||||
await test.step('填写字典类型信息', async () => {
|
||||
const dialog = page.locator('.el-dialog');
|
||||
await dialog.locator('input').first().fill(dictType);
|
||||
await dialog.locator('input').nth(1).fill(`测试字典类型_${timestamp}`);
|
||||
await dialog.locator('textarea').fill(`这是测试字典类型的备注信息，时间戳：${timestamp}`);
|
||||
});
|
||||
|
||||
await test.step('提交字典类型表单', async () => {
|
||||
await page.locator('.el-dialog button:has-text("确定")').click();
|
||||
await page.waitForSelector('.el-dialog', { state: 'hidden', timeout: 10000 });
|
||||
await expect(page.locator('.el-message--success')).toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
|
||||
await test.step('验证字典类型已创建', async () => {
|
||||
await page.locator('input[placeholder="请输入字典类型"]').fill(dictType);
|
||||
await page.locator('button:has-text("查询")').click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
const dictTypeRow = page.locator(`tr:has-text("${dictType}")`);
|
||||
await expect(dictTypeRow).toBeVisible({ timeout: 10000 });
|
||||
});
|
||||
});
|
||||
|
||||
test('创建字典数据', async ({ page }) => {
|
||||
await test.step('导航到数据字典管理', async () => {
|
||||
await page.goto('/dashboard');
|
||||
await page.waitForLoadState('networkidle');
|
||||
await page.locator('text=系统管理').click();
|
||||
await page.waitForTimeout(500);
|
||||
await page.locator('text=数据字典').click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
});
|
||||
|
||||
await test.step('切换到字典数据标签页', async () => {
|
||||
await page.locator('.el-tabs__item:has-text("字典数据")').click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
});
|
||||
|
||||
await test.step('点击新增字典数据按钮', async () => {
|
||||
await page.locator('button:has-text("新增字典数据")').click();
|
||||
await page.waitForSelector('.el-dialog', { state: 'visible', timeout: 5000 });
|
||||
});
|
||||
|
||||
await test.step('填写字典数据信息', async () => {
|
||||
const dialog = page.locator('.el-dialog');
|
||||
|
||||
// 选择字典类型
|
||||
await dialog.locator('.el-select').first().click();
|
||||
await page.locator(`.el-select-dropdown:visible .el-select-dropdown__item:has-text("${dictType}")`).click();
|
||||
|
||||
await dialog.locator('input').nth(1).fill(dictName);
|
||||
await dialog.locator('input').nth(2).fill(dictCode);
|
||||
await dialog.locator('.el-input-number .el-input__inner').fill('99');
|
||||
await dialog.locator('textarea').fill(`这是测试字典数据的备注信息，时间戳：${timestamp}`);
|
||||
});
|
||||
|
||||
await test.step('提交字典数据表单', async () => {
|
||||
await page.locator('.el-dialog button:has-text("确定")').click();
|
||||
await page.waitForSelector('.el-dialog', { state: 'hidden', timeout: 10000 });
|
||||
await expect(page.locator('.el-message--success')).toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
|
||||
await test.step('验证字典数据已创建', async () => {
|
||||
await page.locator('input[placeholder="请输入字典名称"]').fill(dictName);
|
||||
await page.locator('button:has-text("查询")').click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
const dictDataRow = page.locator(`tr:has-text("${dictName}")`);
|
||||
await expect(dictDataRow).toBeVisible({ timeout: 10000 });
|
||||
await expect(dictDataRow.locator('td').nth(2)).toHaveText(dictCode);
|
||||
});
|
||||
});
|
||||
|
||||
test('编辑字典数据', async ({ page }) => {
|
||||
const updatedName = `更新字典_${timestamp}`;
|
||||
|
||||
await test.step('导航到数据字典管理', async () => {
|
||||
await page.goto('/dashboard');
|
||||
await page.waitForLoadState('networkidle');
|
||||
await page.locator('text=系统管理').click();
|
||||
await page.waitForTimeout(500);
|
||||
await page.locator('text=数据字典').click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
});
|
||||
|
||||
await test.step('切换到字典数据标签页', async () => {
|
||||
await page.locator('.el-tabs__item:has-text("字典数据")').click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
});
|
||||
|
||||
await test.step('搜索并编辑字典数据', async () => {
|
||||
await page.locator('input[placeholder="请输入字典名称"]').fill(dictName);
|
||||
await page.locator('button:has-text("查询")').click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
const dictDataRow = page.locator(`tr:has-text("${dictName}")`);
|
||||
await dictDataRow.locator('button:has-text("编辑")').click();
|
||||
await page.waitForSelector('.el-dialog', { state: 'visible', timeout: 5000 });
|
||||
});
|
||||
|
||||
await test.step('修改字典数据信息', async () => {
|
||||
const dialog = page.locator('.el-dialog');
|
||||
await dialog.locator('input').nth(1).fill(updatedName);
|
||||
await dialog.locator('textarea').fill(`这是更新后的字典数据备注，时间戳：${timestamp}`);
|
||||
});
|
||||
|
||||
await test.step('提交更新', async () => {
|
||||
await page.locator('.el-dialog button:has-text("确定")').click();
|
||||
await page.waitForSelector('.el-dialog', { state: 'hidden', timeout: 10000 });
|
||||
await expect(page.locator('.el-message--success')).toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
|
||||
await test.step('验证字典数据已更新', async () => {
|
||||
await page.locator('input[placeholder="请输入字典名称"]').fill(updatedName);
|
||||
await page.locator('button:has-text("查询")').click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
const dictDataRow = page.locator(`tr:has-text("${updatedName}")`);
|
||||
await expect(dictDataRow).toBeVisible({ timeout: 10000 });
|
||||
});
|
||||
});
|
||||
|
||||
test('删除字典数据', async ({ page }) => {
|
||||
await test.step('导航到数据字典管理', async () => {
|
||||
await page.goto('/dashboard');
|
||||
await page.waitForLoadState('networkidle');
|
||||
await page.locator('text=系统管理').click();
|
||||
await page.waitForTimeout(500);
|
||||
await page.locator('text=数据字典').click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
});
|
||||
|
||||
await test.step('切换到字典数据标签页', async () => {
|
||||
await page.locator('.el-tabs__item:has-text("字典数据")').click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
});
|
||||
|
||||
await test.step('搜索并删除字典数据', async () => {
|
||||
await page.locator('input[placeholder="请输入字典名称"]').fill(`更新字典_${timestamp}`);
|
||||
await page.locator('button:has-text("查询")').click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
const dictDataRow = page.locator(`tr:has-text("更新字典_${timestamp}")`);
|
||||
await dictDataRow.locator('button:has-text("删除")').click();
|
||||
await page.waitForSelector('.el-message-box', { state: 'visible', timeout: 5000 });
|
||||
});
|
||||
|
||||
await test.step('确认删除', async () => {
|
||||
await page.locator('.el-message-box button:has-text("确定")').click();
|
||||
await page.waitForSelector('.el-message-box', { state: 'hidden', timeout: 10000 });
|
||||
await expect(page.locator('.el-message--success')).toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
|
||||
await test.step('验证字典数据已删除', async () => {
|
||||
await page.locator('input[placeholder="请输入字典名称"]').fill(`更新字典_${timestamp}`);
|
||||
await page.locator('button:has-text("查询")').click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
const emptyText = page.locator('text=暂无数据');
|
||||
await expect(emptyText).toBeVisible({ timeout: 10000 });
|
||||
});
|
||||
});
|
||||
|
||||
test('字典管理功能验证', async ({ page }) => {
|
||||
await test.step('验证字典管理页面访问权限', async () => {
|
||||
await page.goto('/dicts');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
// 验证页面标题
|
||||
await expect(page.locator('h1:has-text("数据字典管理")')).toBeVisible({ timeout: 5000 });
|
||||
|
||||
// 验证标签页
|
||||
await expect(page.locator('.el-tabs__item:has-text("字典类型")')).toBeVisible();
|
||||
await expect(page.locator('.el-tabs__item:has-text("字典数据")')).toBeVisible();
|
||||
|
||||
// 验证功能按钮
|
||||
await expect(page.locator('button:has-text("新增字典类型")')).toBeVisible();
|
||||
await expect(page.locator('button:has-text("新增字典数据")')).toBeVisible();
|
||||
await expect(page.locator('button:has-text("查询")')).toBeVisible();
|
||||
});
|
||||
|
||||
await test.step('验证字典类型搜索功能', async () => {
|
||||
await page.locator('.el-tabs__item:has-text("字典类型")').click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
const searchInput = page.locator('input[placeholder="请输入字典类型"]');
|
||||
await expect(searchInput).toBeVisible();
|
||||
|
||||
const searchButton = page.locator('button:has-text("查询")');
|
||||
await expect(searchButton).toBeVisible();
|
||||
|
||||
// 测试搜索功能
|
||||
await searchInput.fill('test');
|
||||
await searchButton.click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
// 验证搜索结果
|
||||
const table = page.locator('.el-table');
|
||||
await expect(table).toBeVisible();
|
||||
});
|
||||
|
||||
await test.step('验证字典数据搜索功能', async () => {
|
||||
await page.locator('.el-tabs__item:has-text("字典数据")').click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
const searchInput = page.locator('input[placeholder="请输入字典名称"]');
|
||||
await expect(searchInput).toBeVisible();
|
||||
|
||||
const searchButton = page.locator('button:has-text("查询")');
|
||||
await expect(searchButton).toBeVisible();
|
||||
|
||||
// 测试搜索功能
|
||||
await searchInput.fill('test');
|
||||
await searchButton.click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
// 验证搜索结果
|
||||
const table = page.locator('.el-table');
|
||||
await expect(table).toBeVisible();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,169 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.describe('系统配置管理完整工作流', () => {
|
||||
test.describe.configure({ mode: 'serial' });
|
||||
|
||||
const timestamp = Date.now();
|
||||
const configKey = `test_config_${timestamp}`;
|
||||
const configName = `测试配置_${timestamp}`;
|
||||
const configValue = `test_value_${timestamp}`;
|
||||
|
||||
test('创建系统配置', async ({ page }) => {
|
||||
await test.step('导航到系统配置管理', async () => {
|
||||
await page.goto('/dashboard');
|
||||
await page.waitForLoadState('networkidle');
|
||||
await page.locator('text=系统管理').click();
|
||||
await page.waitForTimeout(500);
|
||||
await page.locator('text=系统配置').click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
await expect(page).toHaveURL(/.*configs/, { timeout: 10000 });
|
||||
});
|
||||
|
||||
await test.step('点击新增配置按钮', async () => {
|
||||
await page.locator('button:has-text("新增配置")').click();
|
||||
await page.waitForSelector('.el-dialog', { state: 'visible', timeout: 5000 });
|
||||
});
|
||||
|
||||
await test.step('填写配置信息', async () => {
|
||||
const dialog = page.locator('.el-dialog');
|
||||
await dialog.locator('input').first().fill(configName);
|
||||
await dialog.locator('input').nth(1).fill(configKey);
|
||||
await dialog.locator('input').nth(2).fill(configValue);
|
||||
await dialog.locator('textarea').fill(`这是测试配置的备注信息，用于验证配置管理功能。时间戳：${timestamp}`);
|
||||
});
|
||||
|
||||
await test.step('提交配置表单', async () => {
|
||||
await page.locator('.el-dialog button:has-text("确定")').click();
|
||||
await page.waitForSelector('.el-dialog', { state: 'hidden', timeout: 10000 });
|
||||
await expect(page.locator('.el-message--success')).toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
|
||||
await test.step('验证配置已创建', async () => {
|
||||
await page.locator('input[placeholder="请输入配置名称"]').fill(configName);
|
||||
await page.locator('button:has-text("查询")').click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
const configRow = page.locator(`tr:has-text("${configName}")`);
|
||||
await expect(configRow).toBeVisible({ timeout: 10000 });
|
||||
await expect(configRow.locator('td').nth(1)).toHaveText(configKey);
|
||||
await expect(configRow.locator('td').nth(2)).toHaveText(configValue);
|
||||
});
|
||||
});
|
||||
|
||||
test('编辑系统配置', async ({ page }) => {
|
||||
const updatedValue = `updated_value_${timestamp}`;
|
||||
|
||||
await test.step('导航到系统配置管理', async () => {
|
||||
await page.goto('/dashboard');
|
||||
await page.waitForLoadState('networkidle');
|
||||
await page.locator('text=系统管理').click();
|
||||
await page.waitForTimeout(500);
|
||||
await page.locator('text=系统配置').click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
});
|
||||
|
||||
await test.step('搜索并编辑配置', async () => {
|
||||
await page.locator('input[placeholder="请输入配置名称"]').fill(configName);
|
||||
await page.locator('button:has-text("查询")').click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
const configRow = page.locator(`tr:has-text("${configName}")`);
|
||||
await configRow.locator('button:has-text("编辑")').click();
|
||||
await page.waitForSelector('.el-dialog', { state: 'visible', timeout: 5000 });
|
||||
});
|
||||
|
||||
await test.step('修改配置值', async () => {
|
||||
const dialog = page.locator('.el-dialog');
|
||||
await dialog.locator('input').nth(2).fill(updatedValue);
|
||||
await dialog.locator('textarea').fill(`这是更新后的配置备注，时间戳：${timestamp}`);
|
||||
});
|
||||
|
||||
await test.step('提交更新', async () => {
|
||||
await page.locator('.el-dialog button:has-text("确定")').click();
|
||||
await page.waitForSelector('.el-dialog', { state: 'hidden', timeout: 10000 });
|
||||
await expect(page.locator('.el-message--success')).toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
|
||||
await test.step('验证配置已更新', async () => {
|
||||
await page.locator('input[placeholder="请输入配置名称"]').fill(configName);
|
||||
await page.locator('button:has-text("查询")').click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
const configRow = page.locator(`tr:has-text("${configName}")`);
|
||||
await expect(configRow.locator('td').nth(2)).toHaveText(updatedValue);
|
||||
});
|
||||
});
|
||||
|
||||
test('删除系统配置', async ({ page }) => {
|
||||
await test.step('导航到系统配置管理', async () => {
|
||||
await page.goto('/dashboard');
|
||||
await page.waitForLoadState('networkidle');
|
||||
await page.locator('text=系统管理').click();
|
||||
await page.waitForTimeout(500);
|
||||
await page.locator('text=系统配置').click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
});
|
||||
|
||||
await test.step('搜索并删除配置', async () => {
|
||||
await page.locator('input[placeholder="请输入配置名称"]').fill(configName);
|
||||
await page.locator('button:has-text("查询")').click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
const configRow = page.locator(`tr:has-text("${configName}")`);
|
||||
await configRow.locator('button:has-text("删除")').click();
|
||||
await page.waitForSelector('.el-message-box', { state: 'visible', timeout: 5000 });
|
||||
});
|
||||
|
||||
await test.step('确认删除', async () => {
|
||||
await page.locator('.el-message-box button:has-text("确定")').click();
|
||||
await page.waitForSelector('.el-message-box', { state: 'hidden', timeout: 10000 });
|
||||
await expect(page.locator('.el-message--success')).toBeVisible({ timeout: 5000 });
|
||||
});
|
||||
|
||||
await test.step('验证配置已删除', async () => {
|
||||
await page.locator('input[placeholder="请输入配置名称"]').fill(configName);
|
||||
await page.locator('button:has-text("查询")').click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
const emptyText = page.locator('text=暂无数据');
|
||||
await expect(emptyText).toBeVisible({ timeout: 10000 });
|
||||
});
|
||||
});
|
||||
|
||||
test('配置管理权限验证', async ({ page }) => {
|
||||
await test.step('验证配置管理页面访问权限', async () => {
|
||||
await page.goto('/configs');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
// 验证页面标题
|
||||
await expect(page.locator('h1:has-text("系统配置管理")')).toBeVisible({ timeout: 5000 });
|
||||
|
||||
// 验证功能按钮可见性
|
||||
await expect(page.locator('button:has-text("新增配置")')).toBeVisible();
|
||||
await expect(page.locator('button:has-text("查询")')).toBeVisible();
|
||||
|
||||
// 验证表格列头
|
||||
await expect(page.locator('th:has-text("配置名称")')).toBeVisible();
|
||||
await expect(page.locator('th:has-text("配置键")')).toBeVisible();
|
||||
await expect(page.locator('th:has-text("配置值")')).toBeVisible();
|
||||
await expect(page.locator('th:has-text("操作")')).toBeVisible();
|
||||
});
|
||||
|
||||
await test.step('验证配置搜索功能', async () => {
|
||||
const searchInput = page.locator('input[placeholder="请输入配置名称"]');
|
||||
await expect(searchInput).toBeVisible();
|
||||
|
||||
const searchButton = page.locator('button:has-text("查询")');
|
||||
await expect(searchButton).toBeVisible();
|
||||
|
||||
// 测试搜索功能
|
||||
await searchInput.fill('test');
|
||||
await searchButton.click();
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
// 验证搜索结果
|
||||
const table = page.locator('.el-table');
|
||||
await expect(table).toBeVisible();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,57 @@
|
||||
import { defineConfig, devices } from '@playwright/test';
|
||||
|
||||
const baseURL = 'http://localhost:3002';
|
||||
|
||||
export default defineConfig({
|
||||
testDir: './e2e',
|
||||
fullyParallel: true,
|
||||
forbidOnly: !!process.env.CI,
|
||||
retries: 0,
|
||||
workers: 1,
|
||||
reporter: 'list',
|
||||
|
||||
timeout: 30000,
|
||||
expect: {
|
||||
timeout: 10000,
|
||||
},
|
||||
|
||||
use: {
|
||||
baseURL: baseURL,
|
||||
trace: 'on-first-retry',
|
||||
screenshot: 'only-on-failure',
|
||||
video: 'off',
|
||||
actionTimeout: 10000,
|
||||
navigationTimeout: 15000,
|
||||
headless: true,
|
||||
locale: 'zh-CN',
|
||||
timezoneId: 'Asia/Shanghai',
|
||||
ignoreHTTPSErrors: true,
|
||||
bypassCSP: true,
|
||||
viewport: { width: 1280, height: 720 },
|
||||
},
|
||||
|
||||
projects: [
|
||||
{
|
||||
name: 'ui-test',
|
||||
testMatch: '**/basic-ui-test.spec.ts',
|
||||
use: { ...devices['Desktop Chrome'] },
|
||||
},
|
||||
{
|
||||
name: 'smoke-test',
|
||||
testMatch: '**/smoke/**/*.spec.ts',
|
||||
use: { ...devices['Desktop Chrome'] },
|
||||
},
|
||||
{
|
||||
name: 'journey-test',
|
||||
testMatch: '**/journeys/**/*.spec.ts',
|
||||
use: { ...devices['Desktop Chrome'] },
|
||||
},
|
||||
],
|
||||
|
||||
webServer: {
|
||||
command: 'pnpm run dev',
|
||||
url: baseURL,
|
||||
reuseExistingServer: !process.env.CI,
|
||||
timeout: 120000,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user