274 lines
10 KiB
JavaScript
274 lines
10 KiB
JavaScript
// 完整TDD测试流程 - 添加5元交通支出验证
|
|
const { chromium } = require('playwright');
|
|
|
|
async function runTDDTest() {
|
|
console.log('='.repeat(60));
|
|
console.log('TDD测试: 添加5元交通支出验证');
|
|
console.log('='.repeat(60));
|
|
|
|
const browser = await chromium.launch({ headless: false });
|
|
const context = await browser.newContext({
|
|
viewport: { width: 1920, height: 1080 }
|
|
});
|
|
const page = await context.newPage();
|
|
const baseUrl = 'http://localhost:5173';
|
|
|
|
const testResults = {
|
|
passed: [],
|
|
failed: [],
|
|
screenshots: []
|
|
};
|
|
|
|
try {
|
|
// ========== 步骤1: 打开记账页面 ==========
|
|
console.log('\n[步骤1] 打开记账页面 http://localhost:5173/record');
|
|
await page.goto(`${baseUrl}/record`, { waitUntil: 'networkidle', timeout: 30000 });
|
|
await page.waitForTimeout(2000);
|
|
|
|
const recordPageTitle = await page.$('.page-title');
|
|
console.log(` - 页面标题: ${recordPageTitle ? '✅' : '❌'}`);
|
|
|
|
// 截图记录页面（添加前）
|
|
await page.screenshot({ path: 'd:/Users/kaifa/Trae_cn260425/testing-archive/tdd_test/01_record_page_before.png', fullPage: true });
|
|
console.log(' - 截图: 01_record_page_before.png');
|
|
testResults.screenshots.push('01_record_page_before.png');
|
|
|
|
// ========== 步骤2: 点击"新增账单"按钮 ==========
|
|
console.log('\n[步骤2] 点击"新增账单"按钮');
|
|
const addBtn = await page.$('#addBtn');
|
|
if (addBtn) {
|
|
await addBtn.click();
|
|
console.log(' - 新增按钮: ✅ 点击成功');
|
|
await page.waitForTimeout(500);
|
|
} else {
|
|
throw new Error('未找到新增按钮 #addBtn');
|
|
}
|
|
|
|
// 截图弹窗
|
|
await page.screenshot({ path: 'd:/Users/kaifa/Trae_cn260425/testing-archive/tdd_test/02_modal_opened.png', fullPage: true });
|
|
console.log(' - 截图: 02_modal_opened.png');
|
|
testResults.screenshots.push('02_modal_opened.png');
|
|
|
|
// ========== 步骤3: 填写表单 ==========
|
|
console.log('\n[步骤3] 填写表单');
|
|
console.log(' - 类型: 支出（默认）');
|
|
|
|
// 输入金额
|
|
const amountInput = await page.$('#amount');
|
|
if (amountInput) {
|
|
await amountInput.fill('5');
|
|
console.log(' - 金额: ✅ 输入 5');
|
|
} else {
|
|
throw new Error('未找到金额输入框 #amount');
|
|
}
|
|
|
|
// 选择"交通"分类
|
|
const trafficCategory = await page.$('[data-category="交通"]');
|
|
if (trafficCategory) {
|
|
await trafficCategory.click();
|
|
console.log(' - 分类: ✅ 选择"交通"');
|
|
} else {
|
|
throw new Error('未找到交通分类按钮 [data-category="交通"]');
|
|
}
|
|
|
|
// 填写备注
|
|
const noteInput = await page.$('#note');
|
|
if (noteInput) {
|
|
await noteInput.fill('地铁测试');
|
|
console.log(' - 备注: ✅ 输入"地铁测试"');
|
|
} else {
|
|
throw new Error('未找到备注输入框 #note');
|
|
}
|
|
|
|
// 截图表单填写完成
|
|
await page.screenshot({ path: 'd:/Users/kaifa/Trae_cn260425/testing-archive/tdd_test/03_form_filled.png', fullPage: true });
|
|
console.log(' - 截图: 03_form_filled.png');
|
|
testResults.screenshots.push('03_form_filled.png');
|
|
|
|
// ========== 步骤4: 点击"保存记录" ==========
|
|
console.log('\n[步骤4] 点击"保存记录"');
|
|
const submitBtn = await page.$('button[type="submit"]');
|
|
if (submitBtn) {
|
|
await submitBtn.click();
|
|
console.log(' - 保存按钮: ✅ 点击成功');
|
|
} else {
|
|
throw new Error('未找到保存按钮 button[type="submit"]');
|
|
}
|
|
|
|
// 等待保存成功toast
|
|
await page.waitForTimeout(3000);
|
|
|
|
// 截图保存后
|
|
await page.screenshot({ path: 'd:/Users/kaifa/Trae_cn260425/testing-archive/tdd_test/04_after_save.png', fullPage: true });
|
|
console.log(' - 截图: 04_after_save.png');
|
|
testResults.screenshots.push('04_after_save.png');
|
|
|
|
// ========== 步骤5: 验证记账页面 ==========
|
|
console.log('\n[步骤5] 验证记账页面数据');
|
|
|
|
// 检查是否有"交通 - 5元"的记录
|
|
const recordItems = await page.$$('.record-item');
|
|
console.log(` - 账单记录数量: ${recordItems.length}`);
|
|
|
|
let trafficRecordFound = false;
|
|
for (const item of recordItems) {
|
|
const title = await item.$('.record-title');
|
|
const amount = await item.$('.record-amount');
|
|
if (title && amount) {
|
|
const titleText = await title.textContent();
|
|
const amountText = await amount.textContent();
|
|
console.log(` 记录: ${titleText} - ${amountText}`);
|
|
if (titleText === '交通' && amountText.includes('5')) {
|
|
trafficRecordFound = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (trafficRecordFound) {
|
|
console.log(' - 验证结果: ✅ 找到"交通 - 5元"记录');
|
|
testResults.passed.push('记账页面显示交通支出5元');
|
|
} else {
|
|
console.log(' - 验证结果: ❌ 未找到"交通 - 5元"记录');
|
|
testResults.failed.push('记账页面未显示交通支出5元');
|
|
}
|
|
|
|
// 关闭弹窗（如果还开着）
|
|
const closeBtn = await page.$('#closeModal');
|
|
if (closeBtn) {
|
|
await closeBtn.click();
|
|
await page.waitForTimeout(500);
|
|
}
|
|
|
|
// 再次截图确认
|
|
await page.screenshot({ path: 'd:/Users/kaifa/Trae_cn260425/testing-archive/tdd_test/05_record_page_after.png', fullPage: true });
|
|
console.log(' - 截图: 05_record_page_after.png');
|
|
testResults.screenshots.push('05_record_page_after.png');
|
|
|
|
// ========== 步骤6: 导航到统计页面 ==========
|
|
console.log('\n[步骤6] 导航到统计页面 http://localhost:5173/statistics');
|
|
await page.goto(`${baseUrl}/statistics`, { waitUntil: 'networkidle', timeout: 30000 });
|
|
await page.waitForTimeout(2000);
|
|
|
|
// 截图统计页面
|
|
await page.screenshot({ path: 'd:/Users/kaifa/Trae_cn260425/testing-archive/tdd_test/06_statistics_page.png', fullPage: true });
|
|
console.log(' - 截图: 06_statistics_page.png');
|
|
testResults.screenshots.push('06_statistics_page.png');
|
|
|
|
// ========== 步骤7: 验证统计页面 ==========
|
|
console.log('\n[步骤7] 验证统计页面数据');
|
|
|
|
// 查找交通支出数据（应该是30元 = 25 + 5）
|
|
const chartCards = await page.$$('.chart-card');
|
|
console.log(` - 图表卡片数量: ${chartCards.length}`);
|
|
|
|
// 尝试多种方式查找交通支出数据
|
|
const pageContent = await page.content();
|
|
const hasTraffic30 = pageContent.includes('30') && pageContent.includes('交通');
|
|
|
|
// 查找类别统计
|
|
const categoryStats = await page.$$('.category-stat');
|
|
if (categoryStats.length > 0) {
|
|
for (const stat of categoryStats) {
|
|
const statText = await stat.textContent();
|
|
if (statText && statText.includes('交通')) {
|
|
console.log(` 找到交通统计: ${statText}`);
|
|
if (statText.includes('30')) {
|
|
console.log(' - 验证结果: ✅ 交通支出显示为30元');
|
|
testResults.passed.push('统计页面显示交通支出30元');
|
|
} else {
|
|
console.log(' - 验证结果: ⚠️ 交通支出不是30元');
|
|
testResults.failed.push('统计页面交通支出不是30元');
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
// 直接搜索页面中的金额
|
|
const expenseData = await page.evaluate(() => {
|
|
const body = document.body.innerText;
|
|
// 查找所有包含"交通"和金额的行
|
|
const lines = body.split('\n');
|
|
for (const line of lines) {
|
|
if (line.includes('交通') && (line.includes('25') || line.includes('30'))) {
|
|
return line;
|
|
}
|
|
}
|
|
return null;
|
|
});
|
|
|
|
if (expenseData) {
|
|
console.log(` 找到交通数据: ${expenseData}`);
|
|
if (expenseData.includes('30')) {
|
|
console.log(' - 验证结果: ✅ 交通支出显示为30元');
|
|
testResults.passed.push('统计页面显示交通支出30元');
|
|
}
|
|
} else {
|
|
console.log(' - 验证结果: ⚠️ 未明确找到交通支出30元数据');
|
|
testResults.failed.push('统计页面未找到交通支出30元');
|
|
}
|
|
}
|
|
|
|
// ========== 步骤8: 验证Dashboard首页 ==========
|
|
console.log('\n[步骤8] 导航到Dashboard首页验证数据');
|
|
await page.goto(`${baseUrl}/`, { waitUntil: 'networkidle', timeout: 30000 });
|
|
await page.waitForTimeout(2000);
|
|
|
|
await page.screenshot({ path: 'd:/Users/kaifa/Trae_cn260425/testing-archive/tdd_test/07_dashboard_page.png', fullPage: true });
|
|
console.log(' - 截图: 07_dashboard_page.png');
|
|
testResults.screenshots.push('07_dashboard_page.png');
|
|
|
|
// 查找Dashboard中的支出数据
|
|
const dashboardContent = await page.evaluate(() => {
|
|
const body = document.body.innerText;
|
|
const lines = body.split('\n');
|
|
const relevantLines = [];
|
|
for (const line of lines) {
|
|
if (line.includes('交通') || (line.includes('支出') && line.match(/\d+/))) {
|
|
relevantLines.push(line.trim());
|
|
}
|
|
}
|
|
return relevantLines.slice(0, 10);
|
|
});
|
|
|
|
if (dashboardContent.length > 0) {
|
|
console.log(' - Dashboard相关数据:');
|
|
dashboardContent.forEach(line => console.log(` ${line}`));
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error(`\n❌ 测试执行出错: ${error.message}`);
|
|
testResults.failed.push(`测试执行错误: ${error.message}`);
|
|
|
|
await page.screenshot({ path: 'd:/Users/kaifa/Trae_cn260425/testing-archive/tdd_test/error_screenshot.png', fullPage: true });
|
|
testResults.screenshots.push('error_screenshot.png');
|
|
} finally {
|
|
await browser.close();
|
|
}
|
|
|
|
// ========== 测试报告 ==========
|
|
console.log('\n' + '='.repeat(60));
|
|
console.log('TDD测试报告');
|
|
console.log('='.repeat(60));
|
|
console.log(`\n通过项 (${testResults.passed.length}):`);
|
|
testResults.passed.forEach(item => console.log(` ✅ ${item}`));
|
|
|
|
if (testResults.failed.length > 0) {
|
|
console.log(`\n失败项 (${testResults.failed.length}):`);
|
|
testResults.failed.forEach(item => console.log(` ❌ ${item}`));
|
|
}
|
|
|
|
console.log(`\n截图文件:`);
|
|
testResults.screenshots.forEach(file => console.log(` - ${file}`));
|
|
|
|
console.log('\n' + '='.repeat(60));
|
|
if (testResults.failed.length === 0) {
|
|
console.log('🎉 测试结果: 全部通过!');
|
|
} else {
|
|
console.log(`⚠️ 测试结果: ${testResults.failed.length}项失败`);
|
|
}
|
|
console.log('='.repeat(60));
|
|
|
|
return testResults;
|
|
}
|
|
|
|
runTDDTest().catch(console.error);
|