You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

436 lines
13 KiB

/**
* 用户管理完整 E2E 测试
* 包含: 创建用户 -> 验证创建 -> 更新用户 -> 验证更新 -> 删除用户 -> 验证删除
*/
import { TEST_CONFIG, ROUTES } from './config';
// 生成的测试用户数据
const timestamp = Date.now();
const testUser = {
username: `e2e_user_${timestamp}`,
email: `e2e_${timestamp}@test.com`,
password: 'TestPass123!',
phone: '13800138000',
updatedUsername: `e2e_updated_${timestamp}`,
updatedPhone: '13900139000',
};
export const userE2ETests = {
name: '用户管理完整 E2E 测试',
/**
* 执行完整的用户 CRUD 测试流程
*/
async runFullCRUDTest() {
console.log('\n🧪 开始用户管理完整 E2E 测试');
console.log('测试用户:', testUser.username);
// 步骤 1: 登录
await this.login();
// 步骤 2: 导航到用户管理页面
await this.navigateToUsersPage();
// 步骤 3: 创建用户
await this.createUser();
// 步骤 4: 验证用户创建成功
await this.verifyUserCreated();
// 步骤 5: 搜索并编辑用户
await this.editUser();
// 步骤 6: 验证用户更新成功
await this.verifyUserUpdated();
// 步骤 7: 删除用户
await this.deleteUser();
// 步骤 8: 验证用户删除成功
await this.verifyUserDeleted();
console.log('\n✅ 用户管理完整 E2E 测试通过!');
},
/**
* 登录系统
*/
async login() {
console.log('\n📋 步骤 1: 登录系统');
await mcp__plugin_playwright_playwright__browser_navigate({
url: `${TEST_CONFIG.baseURL}/login`,
});
// 等待页面加载
await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 });
// 获取当前页面状态
const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
// 查找输入框
const emailInput = snapshot.match(/textbox[^]*?"邮箱地址"/)?.[0];
const passwordInput = snapshot.match(/textbox[^]*?"密码"/)?.[0];
const loginButton = snapshot.match(/button[^]*?"登录"/)?.[0];
if (!emailInput || !passwordInput) {
throw new Error('找不到登录表单输入框');
}
// 获取 refs (简化处理,实际使用索引)
const emailRef = 'e25';
const passwordRef = 'e33';
const buttonRef = 'e34';
// 填写邮箱
await mcp__plugin_playwright_playwright__browser_type({
ref: emailRef,
text: TEST_CONFIG.testUser.email,
});
// 填写密码
await mcp__plugin_playwright_playwright__browser_type({
ref: passwordRef,
text: TEST_CONFIG.testUser.password,
});
// 点击登录
await mcp__plugin_playwright_playwright__browser_click({ ref: buttonRef });
// 等待登录完成和跳转
await mcp__plugin_playwright_playwright__browser_wait_for({ time: 3 });
// 验证登录成功
const resultSnapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
if (!resultSnapshot.includes('仪表盘') && !resultSnapshot.includes('用户管理')) {
throw new Error('登录失败,未跳转到仪表板');
}
console.log('✅ 登录成功');
},
/**
* 导航到用户管理页面
*/
async navigateToUsersPage() {
console.log('\n📋 步骤 2: 导航到用户管理页面');
await mcp__plugin_playwright_playwright__browser_navigate({
url: `${TEST_CONFIG.baseURL}/users`,
});
await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 });
// 验证页面加载成功
const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
if (!snapshot.includes('用户列表')) {
throw new Error('用户管理页面加载失败');
}
console.log('✅ 用户管理页面加载成功');
},
/**
* 创建新用户
*/
async createUser() {
console.log('\n📋 步骤 3: 创建新用户');
console.log(`用户名: ${testUser.username}`);
console.log(`邮箱: ${testUser.email}`);
// 获取当前页面快照
const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
// 查找"添加用户"按钮 (通过文本查找)
const addButtonMatch = snapshot.match(/button[^]*?"添加用户"/);
if (!addButtonMatch) {
throw new Error('找不到添加用户按钮');
}
// 点击添加用户按钮 (使用常见的 ref 模式)
await mcp__plugin_playwright_playwright__browser_click({
element: '添加用户按钮',
ref: 'e294',
});
// 等待弹窗打开
await mcp__plugin_playwright_playwright__browser_wait_for({ time: 1 });
// 获取弹窗快照
const modalSnapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
// 验证弹窗打开
if (!modalSnapshot.includes('添加用户')) {
throw new Error('添加用户弹窗未打开');
}
// 填写表单 - 获取输入框 refs
// 根据 snapshot 结构,通常弹窗中的输入框有连续的 ref
await mcp__plugin_playwright_playwright__browser_type({
ref: 'e328',
text: testUser.username,
});
await mcp__plugin_playwright_playwright__browser_type({
ref: 'e332',
text: testUser.email,
});
await mcp__plugin_playwright_playwright__browser_type({
ref: 'e336',
text: testUser.password,
});
await mcp__plugin_playwright_playwright__browser_type({
ref: 'e340',
text: testUser.phone,
});
console.log(' 表单已填写');
// 点击创建按钮
await mcp__plugin_playwright_playwright__browser_click({
element: '创建按钮',
ref: 'e343',
});
// 等待创建完成
await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 });
console.log('✅ 用户创建请求已发送');
},
/**
* 验证用户创建成功
*/
async verifyUserCreated() {
console.log('\n📋 步骤 4: 验证用户创建成功');
// 刷新页面获取最新数据
await mcp__plugin_playwright_playwright__browser_navigate({
url: `${TEST_CONFIG.baseURL}/users`,
});
await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 });
// 在搜索框中搜索新创建的用户
const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
// 查找搜索输入框
const searchInputRef = 'e293';
await mcp__plugin_playwright_playwright__browser_type({
ref: searchInputRef,
text: testUser.username,
});
// 等待搜索结果
await mcp__plugin_playwright_playwright__browser_wait_for({ time: 1 });
// 获取搜索结果
const searchResultSnapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
// 验证用户显示在列表中
if (!searchResultSnapshot.includes(testUser.username)) {
throw new Error(`创建的用户 ${testUser.username} 未在列表中显示`);
}
if (!searchResultSnapshot.includes(testUser.email)) {
throw new Error(`创建的用户邮箱 ${testUser.email} 未在列表中显示`);
}
console.log('✅ 用户创建验证成功,用户已显示在列表中');
},
/**
* 编辑用户
*/
async editUser() {
console.log('\n📋 步骤 5: 编辑用户');
console.log(`新用户名: ${testUser.updatedUsername}`);
console.log(`新手机号: ${testUser.updatedPhone}`);
// 先搜索用户确保在视图中
const searchInputRef = 'e293';
await mcp__plugin_playwright_playwright__browser_type({
ref: searchInputRef,
text: testUser.username,
});
await mcp__plugin_playwright_playwright__browser_wait_for({ time: 1 });
// 获取页面快照找到编辑按钮
const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
// 点击第一个编辑按钮 (根据实际页面结构调整)
// 编辑按钮通常在每行数据的最后一列
const editButtonRef = 'e312'; // 假设的 ref,实际应根据 snapshot 确定
await mcp__plugin_playwright_playwright__browser_click({
element: '编辑按钮',
ref: editButtonRef,
});
// 等待编辑弹窗打开
await mcp__plugin_playwright_playwright__browser_wait_for({ time: 1 });
// 获取弹窗快照
const modalSnapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
// 验证弹窗标题
if (!modalSnapshot.includes('编辑用户')) {
throw new Error('编辑用户弹窗未打开');
}
// 清除并更新用户名
// 点击输入框,全选,输入新值
const usernameInputRef = 'e328';
await mcp__plugin_playwright_playwright__browser_click({ ref: usernameInputRef });
await mcp__plugin_playwright_playwright__browser_press_key({ key: 'Control+a' });
await mcp__plugin_playwright_playwright__browser_type({
ref: usernameInputRef,
text: testUser.updatedUsername,
});
// 更新手机号
const phoneInputRef = 'e340';
await mcp__plugin_playwright_playwright__browser_click({ ref: phoneInputRef });
await mcp__plugin_playwright_playwright__browser_press_key({ key: 'Control+a' });
await mcp__plugin_playwright_playwright__browser_type({
ref: phoneInputRef,
text: testUser.updatedPhone,
});
console.log(' 表单已更新');
// 点击保存按钮
await mcp__plugin_playwright_playwright__browser_click({
element: '保存按钮',
ref: 'e343',
});
// 等待保存完成
await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 });
console.log('✅ 用户更新请求已发送');
},
/**
* 验证用户更新成功
*/
async verifyUserUpdated() {
console.log('\n📋 步骤 6: 验证用户更新成功');
// 刷新页面
await mcp__plugin_playwright_playwright__browser_navigate({
url: `${TEST_CONFIG.baseURL}/users`,
});
await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 });
// 搜索更新后的用户名
const searchInputRef = 'e293';
await mcp__plugin_playwright_playwright__browser_type({
ref: searchInputRef,
text: testUser.updatedUsername,
});
await mcp__plugin_playwright_playwright__browser_wait_for({ time: 1 });
// 验证更新后的信息显示
const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
if (!snapshot.includes(testUser.updatedUsername)) {
throw new Error(`更新后的用户名 ${testUser.updatedUsername} 未显示`);
}
if (!snapshot.includes(testUser.updatedPhone)) {
throw new Error(`更新后的手机号 ${testUser.updatedPhone} 未显示`);
}
// 验证原用户名不再显示
if (snapshot.includes(testUser.username)) {
throw new Error(`原用户名 ${testUser.username} 仍然显示,更新可能未生效`);
}
console.log('✅ 用户更新验证成功');
},
/**
* 删除用户
*/
async deleteUser() {
console.log('\n📋 步骤 7: 删除用户');
// 搜索要删除的用户
const searchInputRef = 'e293';
await mcp__plugin_playwright_playwright__browser_type({
ref: searchInputRef,
text: testUser.updatedUsername,
});
await mcp__plugin_playwright_playwright__browser_wait_for({ time: 1 });
// 处理确认对话框
await mcp__plugin_playwright_playwright__browser_handle_dialog({
accept: true,
});
// 点击删除按钮
const deleteButtonRef = 'e314'; // 假设的 ref
await mcp__plugin_playwright_playwright__browser_click({
element: '删除按钮',
ref: deleteButtonRef,
});
// 等待删除完成
await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 });
console.log('✅ 用户删除请求已发送');
},
/**
* 验证用户删除成功
*/
async verifyUserDeleted() {
console.log('\n📋 步骤 8: 验证用户删除成功');
// 刷新页面
await mcp__plugin_playwright_playwright__browser_navigate({
url: `${TEST_CONFIG.baseURL}/users`,
});
await mcp__plugin_playwright_playwright__browser_wait_for({ time: 2 });
// 清空搜索框并搜索已删除的用户
const searchInputRef = 'e293';
// 清空搜索框
await mcp__plugin_playwright_playwright__browser_click({ ref: searchInputRef });
await mcp__plugin_playwright_playwright__browser_press_key({ key: 'Control+a' });
await mcp__plugin_playwright_playwright__browser_type({
ref: searchInputRef,
text: testUser.updatedUsername,
});
await mcp__plugin_playwright_playwright__browser_wait_for({ time: 1 });
// 获取搜索结果
const snapshot = await mcp__plugin_playwright_playwright__browser_snapshot({});
// 验证用户已不在列表中 (应该显示"暂无数据")
if (snapshot.includes(testUser.updatedUsername)) {
throw new Error(`已删除的用户 ${testUser.updatedUsername} 仍然显示在列表中`);
}
if (snapshot.includes(testUser.email)) {
throw new Error(`已删除的用户邮箱 ${testUser.email} 仍然显示在列表中`);
}
// 验证显示"暂无数据"
if (!snapshot.includes('暂无数据')) {
console.log('⚠️ 未显示"暂无数据",但用户已不在列表中');
}
console.log('✅ 用户删除验证成功,用户已从列表中移除');
},
};
export default userE2ETests;