96 lines
3.3 KiB
JavaScript
96 lines
3.3 KiB
JavaScript
// 验证统计页面修复 - 添加5元交通支出并验证饼图显示
|
|
const { chromium } = require('playwright');
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch({ headless: true });
|
|
const context = await browser.newContext();
|
|
const page = await context.newPage();
|
|
|
|
try {
|
|
console.log('1. 导航到记账页面...');
|
|
await page.goto('http://localhost:5174/record', { waitUntil: 'networkidle' });
|
|
|
|
// 等待页面加载
|
|
await page.waitForSelector('.record-page', { timeout: 10000 });
|
|
console.log(' 记账页面已加载');
|
|
|
|
// 选择支出类型
|
|
console.log('2. 选择支出类型...');
|
|
const expenseTab = page.locator('.type-tab.expense');
|
|
if (await expenseTab.isVisible()) {
|
|
await expenseTab.click();
|
|
await page.waitForTimeout(300);
|
|
}
|
|
|
|
// 选择交通类别
|
|
console.log('3. 选择交通类别...');
|
|
const trafficCategory = page.locator('[data-category="交通"]');
|
|
if (await trafficCategory.isVisible()) {
|
|
await trafficCategory.click();
|
|
await page.waitForTimeout(300);
|
|
} else {
|
|
console.log(' 警告: 交通类别按钮未找到，尝试其他方式');
|
|
}
|
|
|
|
// 输入金额 5 元
|
|
console.log('4. 输入金额 5 元...');
|
|
const amountInput = page.locator('input[type="number"], .amount-input input, input[placeholder*="金"]');
|
|
await amountInput.fill('5');
|
|
await page.waitForTimeout(200);
|
|
|
|
// 点击保存按钮
|
|
console.log('5. 点击保存按钮...');
|
|
const saveButton = page.locator('button[type="submit"], .save-btn, button:has-text("保存")');
|
|
await saveButton.click();
|
|
await page.waitForTimeout(1500);
|
|
|
|
console.log(' 记录已保存');
|
|
|
|
// 导航到统计页面
|
|
console.log('6. 导航到统计页面...');
|
|
await page.goto('http://localhost:5174/statistics', { waitUntil: 'networkidle' });
|
|
await page.waitForTimeout(1000);
|
|
|
|
// 切换到饼图视图
|
|
console.log('7. 切换到饼图视图...');
|
|
const pieButton = page.locator('[data-type="pie"], button:has-text("饼图")');
|
|
if (await pieButton.isVisible()) {
|
|
await pieButton.click();
|
|
await page.waitForTimeout(1000);
|
|
}
|
|
|
|
// 截图统计页面
|
|
console.log('8. 截图统计页面...');
|
|
await page.screenshot({
|
|
path: 'd:/Users/kaifa/Trae_cn260425/personal-finance-budget-system/frontend/statistics-verification.png',
|
|
fullPage: false
|
|
});
|
|
console.log(' 截图已保存到 statistics-verification.png');
|
|
|
|
// 检查饼图图例中的交通显示
|
|
console.log('9. 检查交通支出显示...');
|
|
const legendItems = await page.locator('.legend-item').allTextContents();
|
|
console.log(' 图例数据:', legendItems);
|
|
|
|
// 查找交通分类的值
|
|
const trafficLegend = page.locator('.legend-item:has-text("交通")');
|
|
if (await trafficLegend.isVisible()) {
|
|
const trafficText = await trafficLegend.textContent();
|
|
console.log(' 交通图例内容:', trafficText);
|
|
}
|
|
|
|
console.log('\n验证完成!');
|
|
|
|
} catch (error) {
|
|
console.error('测试过程中出错:', error.message);
|
|
// 即使出错也截图
|
|
await page.screenshot({
|
|
path: 'd:/Users/kaifa/Trae_cn260425/personal-finance-budget-system/frontend/statistics-error.png',
|
|
fullPage: true
|
|
});
|
|
console.log('错误截图已保存');
|
|
} finally {
|
|
await browser.close();
|
|
}
|
|
})();
|