zhangxiang
c0599fd7b1
问题： - 用户管理页面输入框缺少name属性 - API缺少POST方法处理用户创建 - 测试未等待模态框打开 修复： 1. 应用代码：为创建/编辑模态框的输入框添加name属性 2. API：添加POST方法处理用户创建请求 3. 测试：增加模态框等待逻辑和详细日志 测试结果： - Chromium: ✓ 通过 - Firefox: ✓ 通过
93 lines
2.8 KiB
TypeScript
93 lines
2.8 KiB
TypeScript
import { Page, expect } from '@playwright/test';
|
|
|
|
export interface UserData {
|
|
email: string;
|
|
password: string;
|
|
name?: string;
|
|
role?: 'admin' | 'editor' | 'viewer';
|
|
}
|
|
|
|
export class AdminUserPage {
|
|
constructor(private page: Page) { }
|
|
|
|
async goto() {
|
|
await this.page.goto('/admin/users');
|
|
await this.page.waitForLoadState('domcontentloaded');
|
|
await this.page.waitForSelector('table', { timeout: 10000, state: 'visible' });
|
|
}
|
|
|
|
async createUser(data: UserData) {
|
|
console.log('开始创建用户:', data.email);
|
|
|
|
await this.goto();
|
|
await this.page.waitForLoadState('domcontentloaded');
|
|
|
|
console.log('页面加载完成，准备点击添加用户按钮');
|
|
|
|
const addButton = this.page.locator('button:has-text("添加用户")');
|
|
await addButton.waitFor({ timeout: 10000, state: 'visible' });
|
|
await addButton.click();
|
|
|
|
console.log('已点击添加用户按钮，等待模态框打开');
|
|
|
|
await this.page.waitForTimeout(500);
|
|
|
|
await this.page.waitForSelector('.fixed.inset-0.bg-black.bg-opacity-50', {
|
|
timeout: 5000,
|
|
state: 'visible'
|
|
});
|
|
|
|
console.log('模态框已打开，等待表单加载');
|
|
|
|
await this.page.waitForTimeout(300);
|
|
|
|
await this.page.waitForSelector('input[name="email"]', { timeout: 5000, state: 'visible' });
|
|
await this.page.fill('input[name="email"]', data.email);
|
|
await this.page.fill('input[name="password"]', data.password);
|
|
|
|
if (data.name) {
|
|
await this.page.fill('input[name="name"]', data.name);
|
|
}
|
|
|
|
if (data.role) {
|
|
await this.page.selectOption('select[name="role"]', data.role);
|
|
}
|
|
|
|
console.log('表单填写完成，准备提交');
|
|
|
|
await this.page.click('button:has-text("创建")');
|
|
|
|
console.log('用户创建请求已提交');
|
|
}
|
|
|
|
async expectUserInList(email: string) {
|
|
console.log(`检查用户是否在列表中: ${email}`);
|
|
|
|
await this.goto();
|
|
await this.page.waitForLoadState('domcontentloaded');
|
|
await this.page.waitForTimeout(1000);
|
|
|
|
let row = this.page.locator(`tr:has-text("${email}")`);
|
|
let isVisible = await row.count() > 0;
|
|
|
|
if (!isVisible) {
|
|
console.log('用户不在列表中，尝试刷新页面');
|
|
await this.page.reload({ waitUntil: 'domcontentloaded' });
|
|
await this.page.waitForSelector('table tbody tr', { timeout: 5000 });
|
|
await this.page.waitForTimeout(1000);
|
|
|
|
row = this.page.locator(`tr:has-text("${email}")`);
|
|
isVisible = await row.count() > 0;
|
|
}
|
|
|
|
if (!isVisible) {
|
|
const allRows = await this.page.locator('table tbody tr').allTextContents();
|
|
console.log('当前列表中的用户:');
|
|
allRows.forEach((text, i) => console.log(`行 ${i + 1}: ${text}`));
|
|
}
|
|
|
|
await expect(row).toBeVisible({ timeout: 10000 });
|
|
console.log(`✅ 用户已在列表中: ${email}`);
|
|
}
|
|
}
|