- Created new finance application based on Vue Vben Admin - Implemented transaction management, category management, and loan tracking - Added person management for tracking financial relationships - Integrated budget management and financial analytics - Added data import/export functionality - Implemented responsive design for mobile support - Added comprehensive testing with Playwright 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
164 lines
5.6 KiB
JavaScript
164 lines
5.6 KiB
JavaScript
import { chromium } from 'playwright';
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch({
|
|
headless: false,
|
|
slowMo: 500
|
|
});
|
|
|
|
const page = await browser.newPage();
|
|
|
|
// 监听控制台错误
|
|
page.on('console', msg => {
|
|
if (msg.type() === 'error') {
|
|
console.log('[浏览器错误]', msg.text());
|
|
}
|
|
});
|
|
|
|
page.on('pageerror', error => {
|
|
console.log('[页面错误]', error.message);
|
|
});
|
|
|
|
try {
|
|
console.log('========== 开始测试 ==========\n');
|
|
|
|
// 1. 直接访问交易管理页面
|
|
console.log('1. 访问交易管理页面...');
|
|
await page.goto('http://localhost:5667/finance/transaction');
|
|
await page.waitForTimeout(3000);
|
|
|
|
// 检查URL是否跳转到登录页
|
|
const currentUrl = page.url();
|
|
console.log(' 当前URL:', currentUrl);
|
|
|
|
if (currentUrl.includes('/login')) {
|
|
console.log(' 需要登录,执行自动登录...');
|
|
|
|
// 等待页面完全加载
|
|
await page.waitForTimeout(2000);
|
|
|
|
// 输入用户名密码
|
|
const usernameInput = await page.locator('input[placeholder*="用户名"]').first();
|
|
const passwordInput = await page.locator('input[type="password"]').first();
|
|
|
|
if (await usernameInput.isVisible()) {
|
|
await usernameInput.fill('admin');
|
|
console.log(' 输入用户名: admin');
|
|
}
|
|
|
|
if (await passwordInput.isVisible()) {
|
|
await passwordInput.fill('123456');
|
|
console.log(' 输入密码: ******');
|
|
}
|
|
|
|
// 处理滑块验证
|
|
const slider = await page.locator('.slider-button').first();
|
|
if (await slider.isVisible()) {
|
|
console.log(' 处理滑块验证...');
|
|
const box = await slider.boundingBox();
|
|
if (box) {
|
|
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
|
|
await page.mouse.down();
|
|
await page.mouse.move(box.x + 300, box.y + box.height / 2);
|
|
await page.mouse.up();
|
|
console.log(' 滑块验证完成');
|
|
}
|
|
}
|
|
|
|
await page.waitForTimeout(1000);
|
|
|
|
// 点击登录按钮
|
|
const loginBtn = await page.locator('button:has-text("登录")').first();
|
|
if (await loginBtn.isVisible()) {
|
|
await loginBtn.click();
|
|
console.log(' 点击登录按钮');
|
|
await page.waitForTimeout(3000);
|
|
}
|
|
|
|
// 检查是否登录成功
|
|
const afterLoginUrl = page.url();
|
|
if (!afterLoginUrl.includes('/login')) {
|
|
console.log(' ✅ 登录成功');
|
|
|
|
// 重新访问交易管理页面
|
|
console.log('\n2. 重新访问交易管理页面...');
|
|
await page.goto('http://localhost:5667/finance/transaction');
|
|
await page.waitForTimeout(3000);
|
|
} else {
|
|
console.log(' ❌ 登录失败,仍在登录页');
|
|
}
|
|
}
|
|
|
|
// 检查交易管理页面
|
|
const finalUrl = page.url();
|
|
if (finalUrl.includes('/finance/transaction')) {
|
|
console.log('\n✅ 成功进入交易管理页面');
|
|
|
|
// 等待页面加载
|
|
await page.waitForTimeout(2000);
|
|
|
|
// 检查关键元素
|
|
const table = await page.locator('.ant-table').first();
|
|
const searchBox = await page.locator('input[placeholder*="关键词"]').first();
|
|
const createBtn = await page.locator('button:has-text("新建")').first();
|
|
|
|
console.log('\n页面元素检查:');
|
|
console.log(' 表格:', await table.isVisible() ? '✅ 显示' : '❌ 未显示');
|
|
console.log(' 搜索框:', await searchBox.isVisible() ? '✅ 显示' : '❌ 未显示');
|
|
console.log(' 新建按钮:', await createBtn.isVisible() ? '✅ 显示' : '❌ 未显示');
|
|
|
|
// 尝试新建交易
|
|
if (await createBtn.isVisible()) {
|
|
console.log('\n3. 测试新建交易...');
|
|
await createBtn.click();
|
|
await page.waitForTimeout(1500);
|
|
|
|
const modal = await page.locator('.ant-modal').first();
|
|
if (await modal.isVisible()) {
|
|
console.log(' ✅ 弹窗打开成功');
|
|
|
|
// 填写基本信息
|
|
const amountInput = await page.locator('input.ant-input-number-input').first();
|
|
if (await amountInput.isVisible()) {
|
|
await amountInput.fill('99.99');
|
|
console.log(' 输入金额: 99.99');
|
|
}
|
|
|
|
// 点击确定
|
|
const submitBtn = await page.locator('.ant-modal-footer button.ant-btn-primary').first();
|
|
if (await submitBtn.isVisible()) {
|
|
await submitBtn.click();
|
|
console.log(' 点击提交');
|
|
await page.waitForTimeout(2000);
|
|
}
|
|
|
|
// 检查结果
|
|
const successMsg = await page.locator('.ant-message-success').first();
|
|
if (await successMsg.isVisible()) {
|
|
console.log(' ✅ 创建成功');
|
|
} else {
|
|
console.log(' ⚠️ 未检测到成功消息');
|
|
}
|
|
}
|
|
}
|
|
|
|
// 截图
|
|
await page.screenshot({ path: 'test-success.png', fullPage: true });
|
|
console.log('\n截图已保存: test-success.png');
|
|
|
|
} else {
|
|
console.log('\n❌ 未能进入交易管理页面');
|
|
console.log('当前页面:', finalUrl);
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('\n❌ 测试出错:', error.message);
|
|
await page.screenshot({ path: 'test-error.png', fullPage: true });
|
|
console.log('错误截图已保存: test-error.png');
|
|
} finally {
|
|
console.log('\n========== 测试结束 ==========');
|
|
console.log('浏览器将在5秒后关闭...');
|
|
await page.waitForTimeout(5000);
|
|
await browser.close();
|
|
}
|
|
})(); |