Initial commit: Telegram Management System
Some checks failed
Deploy / deploy (push) Has been cancelled
Some checks failed
Deploy / deploy (push) Has been cancelled
Full-stack web application for Telegram management - Frontend: Vue 3 + Vben Admin - Backend: NestJS - Features: User management, group broadcast, statistics 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
你的用户名
215
click-and-debug.js
Normal file
215
click-and-debug.js
Normal file
@@ -0,0 +1,215 @@
|
||||
const { chromium } = require('playwright');
|
||||
|
||||
(async () => {
|
||||
let browser;
|
||||
|
||||
try {
|
||||
console.log('启动浏览器进行点击测试...');
|
||||
browser = await chromium.launch({
|
||||
headless: false,
|
||||
slowMo: 500
|
||||
});
|
||||
|
||||
const context = await browser.newContext({
|
||||
viewport: { width: 1920, height: 1080 }
|
||||
});
|
||||
|
||||
const page = await context.newPage();
|
||||
|
||||
// 监听控制台错误
|
||||
const errors = [];
|
||||
page.on('console', msg => {
|
||||
if (msg.type() === 'error') {
|
||||
const error = {
|
||||
text: msg.text(),
|
||||
location: msg.location(),
|
||||
time: new Date().toISOString()
|
||||
};
|
||||
errors.push(error);
|
||||
console.log('\n🔴 浏览器错误:', error.text);
|
||||
}
|
||||
});
|
||||
|
||||
// 监听页面崩溃
|
||||
page.on('pageerror', error => {
|
||||
console.log('\n💥 页面错误:', error.message);
|
||||
});
|
||||
|
||||
// 监听网络错误
|
||||
page.on('requestfailed', request => {
|
||||
console.log('\n❌ 请求失败:', request.url(), request.failure()?.errorText);
|
||||
});
|
||||
|
||||
// 登录
|
||||
console.log('\n1. 执行登录...');
|
||||
await page.goto('http://localhost:5174/', { waitUntil: 'networkidle' });
|
||||
await page.fill('[name="username"]', 'admin');
|
||||
await page.fill('[name="password"]', '111111');
|
||||
await page.click('button:has-text("登录")');
|
||||
await page.waitForTimeout(2000);
|
||||
|
||||
// 确保在首页
|
||||
if (page.url().includes('login')) {
|
||||
await page.goto('http://localhost:5174/dashboard/home', { waitUntil: 'networkidle' });
|
||||
}
|
||||
|
||||
console.log('\n2. 开始点击测试...\n');
|
||||
|
||||
// 测试1：点击侧边栏区域
|
||||
console.log('测试1: 尝试点击侧边栏...');
|
||||
try {
|
||||
// 查找侧边栏
|
||||
const siderSelectors = [
|
||||
'.ant-layout-sider',
|
||||
'aside',
|
||||
'[class*="sider"]',
|
||||
'[class*="sidebar"]'
|
||||
];
|
||||
|
||||
let found = false;
|
||||
for (const selector of siderSelectors) {
|
||||
if (await page.locator(selector).count() > 0) {
|
||||
console.log(`找到侧边栏: ${selector}`);
|
||||
await page.locator(selector).first().click();
|
||||
found = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!found) {
|
||||
console.log('❌ 未找到侧边栏元素');
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('点击侧边栏失败:', e.message);
|
||||
}
|
||||
|
||||
await page.waitForTimeout(1000);
|
||||
|
||||
// 测试2：查找并点击所有可点击的元素
|
||||
console.log('\n测试2: 查找所有可点击元素...');
|
||||
const clickableElements = await page.locator('button, a, [role="button"], [role="menuitem"], .ant-menu-item, .ant-menu-submenu-title').all();
|
||||
console.log(`找到 ${clickableElements.length} 个可点击元素`);
|
||||
|
||||
// 点击前5个元素测试
|
||||
for (let i = 0; i < Math.min(5, clickableElements.length); i++) {
|
||||
try {
|
||||
const element = clickableElements[i];
|
||||
const text = await element.textContent();
|
||||
const tagName = await element.evaluate(el => el.tagName);
|
||||
|
||||
console.log(`\n点击元素 ${i + 1}: <${tagName}> "${text?.trim() || '(无文本)'}"`);
|
||||
|
||||
// 截图点击前
|
||||
await page.screenshot({ path: `test-screenshots/before-click-${i}.png` });
|
||||
|
||||
// 点击
|
||||
await element.click();
|
||||
await page.waitForTimeout(1000);
|
||||
|
||||
// 检查URL变化
|
||||
console.log(`点击后URL: ${page.url()}`);
|
||||
|
||||
// 检查是否有新错误
|
||||
if (errors.length > 0) {
|
||||
console.log('点击后产生的错误:');
|
||||
errors.forEach(err => console.log(` - ${err.text}`));
|
||||
errors.length = 0; // 清空错误列表
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
console.log(`点击失败: ${e.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
// 测试3：尝试展开菜单
|
||||
console.log('\n\n测试3: 尝试查找并展开菜单...');
|
||||
|
||||
// 查找菜单容器
|
||||
const menuContainer = await page.locator('.ant-menu, [role="menu"]').first();
|
||||
if (await menuContainer.count() > 0) {
|
||||
console.log('找到菜单容器');
|
||||
|
||||
// 查找所有菜单项
|
||||
const menuItems = await menuContainer.locator('.ant-menu-submenu-title, .ant-menu-item').all();
|
||||
console.log(`菜单项数量: ${menuItems.length}`);
|
||||
|
||||
if (menuItems.length === 0) {
|
||||
console.log('❌ 菜单容器内没有菜单项');
|
||||
|
||||
// 尝试检查菜单数据
|
||||
const menuData = await page.evaluate(() => {
|
||||
// 检查Vue/React组件
|
||||
const app = window.__app__ || window.app;
|
||||
if (app) {
|
||||
console.log('找到应用实例');
|
||||
}
|
||||
|
||||
// 检查路由
|
||||
if (window.$router) {
|
||||
const routes = window.$router.getRoutes();
|
||||
return {
|
||||
routeCount: routes.length,
|
||||
routes: routes.map(r => ({ path: r.path, name: r.name, meta: r.meta }))
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
});
|
||||
|
||||
if (menuData) {
|
||||
console.log('\n路由信息:');
|
||||
console.log(`路由数量: ${menuData.routeCount}`);
|
||||
console.log('前10个路由:');
|
||||
menuData.routes.slice(0, 10).forEach(r => {
|
||||
console.log(` - ${r.path} (${r.name}) ${r.meta?.title || ''}`);
|
||||
});
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.log('❌ 未找到菜单容器');
|
||||
}
|
||||
|
||||
// 测试4：尝试手动触发菜单渲染
|
||||
console.log('\n\n测试4: 尝试手动触发菜单渲染...');
|
||||
|
||||
await page.evaluate(() => {
|
||||
// 尝试找到store并手动设置菜单
|
||||
if (window.__PINIA__) {
|
||||
console.log('找到Pinia store');
|
||||
const stores = window.__PINIA__._s;
|
||||
stores.forEach((store, key) => {
|
||||
console.log('Store:', key);
|
||||
if (store.setAccessMenus && typeof store.setAccessMenus === 'function') {
|
||||
console.log('找到setAccessMenus方法，尝试设置菜单...');
|
||||
// 这里可以尝试手动设置菜单数据
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 最终截图
|
||||
await page.screenshot({ path: 'test-screenshots/final-state.png', fullPage: true });
|
||||
|
||||
console.log('\n\n========== 测试总结 ==========');
|
||||
console.log(`总错误数: ${errors.length}`);
|
||||
if (errors.length > 0) {
|
||||
console.log('\n错误列表:');
|
||||
errors.forEach((err, index) => {
|
||||
console.log(`${index + 1}. ${err.text}`);
|
||||
});
|
||||
}
|
||||
|
||||
console.log('\n问题诊断:');
|
||||
console.log('1. 菜单容器存在但没有菜单项');
|
||||
console.log('2. 路由配置正常，页面可以访问');
|
||||
console.log('3. 可能是菜单生成逻辑有问题');
|
||||
|
||||
console.log('\n保持浏览器打开，继续调试...');
|
||||
await new Promise(() => {});
|
||||
|
||||
} catch (error) {
|
||||
console.error('测试过程出错:', error);
|
||||
if (browser) {
|
||||
await browser.close();
|
||||
}
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user