130 lines
4.4 KiB
JavaScript
130 lines
4.4 KiB
JavaScript
const { chromium } = require('playwright');
|
|
|
|
async function runChartSwitchTest() {
|
|
const browser = await chromium.launch({ headless: true });
|
|
const context = await browser.newContext();
|
|
const page = await context.newPage();
|
|
|
|
const results = [];
|
|
const switchSequence = ['line', 'pie', 'line', 'pie', 'bar', 'pie', 'bar', 'pie', 'line', 'bar', 'pie', 'bar', 'line', 'pie', 'line', 'bar', 'pie', 'bar', 'line', 'pie'];
|
|
|
|
console.log('打开统计页面...');
|
|
await page.goto('http://localhost:5173/statistics', { waitUntil: 'networkidle', timeout: 15000 });
|
|
|
|
// 等待更长时间让数据加载
|
|
console.log('等待数据加载 (15秒)...');
|
|
await page.waitForTimeout(15000);
|
|
|
|
// 检查 DOM 状态
|
|
const domCheck = await page.evaluate(() => {
|
|
const echartsContainer = document.querySelector('.echarts-container');
|
|
const pieContainer = document.querySelector('.pie-chart-container');
|
|
const canvases = document.querySelectorAll('canvas');
|
|
return {
|
|
hasEchartsContainer: !!echartsContainer,
|
|
hasPieContainer: !!pieContainer,
|
|
canvasCount: canvases.length,
|
|
bodyText: document.body.innerText.substring(0, 500)
|
|
};
|
|
});
|
|
|
|
console.log('\n页面 DOM 状态:');
|
|
console.log(' .echarts-container:', domCheck.hasEchartsContainer ? '存在' : '不存在');
|
|
console.log(' .pie-chart-container:', domCheck.hasPieContainer ? '存在' : '不存在');
|
|
console.log(' canvas 数量:', domCheck.canvasCount);
|
|
console.log(' 页面文本:', domCheck.bodyText.replace(/\n/g, ' ').substring(0, 100));
|
|
|
|
console.log('\n开始20次图表切换测试...');
|
|
|
|
for (let i = 0; i < switchSequence.length; i++) {
|
|
const chartType = switchSequence[i];
|
|
const btnSelector = `[data-type="${chartType}"]`;
|
|
|
|
try {
|
|
await page.click(btnSelector, { timeout: 5000 });
|
|
await page.waitForTimeout(1500);
|
|
|
|
let chartStatus = 'OK';
|
|
let errorMsg = '';
|
|
|
|
if (chartType === 'pie') {
|
|
const pieCanvas = await page.$$('.pie-chart-container canvas');
|
|
const trendCanvas = await page.$$('.echarts-container canvas');
|
|
if (pieCanvas.length === 0) {
|
|
chartStatus = 'FAIL';
|
|
errorMsg = '饼图 canvas 为空';
|
|
} else if (pieCanvas.length > 1) {
|
|
chartStatus = 'WARN';
|
|
errorMsg = `饼图 canvas 重复(${pieCanvas.length})`;
|
|
}
|
|
if (trendCanvas.length > 0) {
|
|
chartStatus = 'FAIL';
|
|
errorMsg = `趋势图未销毁(${trendCanvas.length})`;
|
|
}
|
|
} else {
|
|
const trendCanvas = await page.$$('.echarts-container canvas');
|
|
if (trendCanvas.length === 0) {
|
|
chartStatus = 'FAIL';
|
|
errorMsg = '趋势图 canvas 为空';
|
|
} else if (trendCanvas.length > 1) {
|
|
chartStatus = 'WARN';
|
|
errorMsg = `趋势图 canvas 重复(${trendCanvas.length})`;
|
|
}
|
|
const pieCanvas = await page.$$('.pie-chart-container canvas');
|
|
if (pieCanvas.length > 0) {
|
|
chartStatus = 'FAIL';
|
|
errorMsg = `饼图未销毁(${pieCanvas.length})`;
|
|
}
|
|
}
|
|
|
|
results.push({
|
|
step: i + 1,
|
|
to: chartType,
|
|
status: chartStatus,
|
|
error: errorMsg
|
|
});
|
|
|
|
console.log(`[${i + 1}/20] ${chartType.padEnd(5)}: ${chartStatus}${errorMsg ? ' - ' + errorMsg : ''}`);
|
|
|
|
} catch (e) {
|
|
results.push({
|
|
step: i + 1,
|
|
to: chartType,
|
|
status: 'FAIL',
|
|
error: e.message.substring(0, 80)
|
|
});
|
|
console.log(`[${i + 1}/20] ${chartType.padEnd(5)}: FAIL - ${e.message.substring(0, 50)}`);
|
|
}
|
|
}
|
|
|
|
console.log('\n========== 测试结果统计 ==========');
|
|
const passCount = results.filter(r => r.status === 'OK').length;
|
|
const warnCount = results.filter(r => r.status === 'WARN').length;
|
|
const failCount = results.filter(r => r.status === 'FAIL').length;
|
|
|
|
console.log(`通过: ${passCount}/20 (${(passCount/20*100).toFixed(1)}%)`);
|
|
console.log(`警告: ${warnCount}/20`);
|
|
console.log(`失败: ${failCount}/20`);
|
|
|
|
if (failCount > 0) {
|
|
console.log('\n失败详情:');
|
|
results.filter(r => r.status === 'FAIL').forEach(r => {
|
|
console.log(` Step ${r.step}: ${r.to} - ${r.error}`);
|
|
});
|
|
}
|
|
|
|
await browser.close();
|
|
|
|
return { passCount, failCount, warnCount, details: results };
|
|
}
|
|
|
|
runChartSwitchTest()
|
|
.then(result => {
|
|
console.log('\n测试完成');
|
|
process.exit(result.failCount > 0 ? 1 : 0);
|
|
})
|
|
.catch(e => {
|
|
console.error('测试失败:', e);
|
|
process.exit(1);
|
|
});
|