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:
你的用户名
263
frontend-vben/playwright-auth-test.js
Normal file
263
frontend-vben/playwright-auth-test.js
Normal file
@@ -0,0 +1,263 @@
|
||||
import { chromium } from 'playwright';
|
||||
|
||||
async function testAuthenticationFlow() {
|
||||
console.log('启动浏览器测试...');
|
||||
|
||||
const browser = await chromium.launch({
|
||||
headless: false,
|
||||
slowMo: 1000,
|
||||
devtools: true,
|
||||
});
|
||||
|
||||
const context = await browser.newContext();
|
||||
const page = await context.newPage();
|
||||
|
||||
// 监听所有网络请求
|
||||
page.on('request', (request) => {
|
||||
console.log('\n📤 请求:', {
|
||||
method: request.method(),
|
||||
url: request.url(),
|
||||
headers: JSON.stringify(request.headers(), null, 2),
|
||||
});
|
||||
});
|
||||
|
||||
// 监听所有网络响应
|
||||
page.on('response', (response) => {
|
||||
console.log('\n📥 响应:', {
|
||||
status: response.status(),
|
||||
url: response.url(),
|
||||
headers: JSON.stringify(response.headers(), null, 2),
|
||||
});
|
||||
});
|
||||
|
||||
// 监听控制台消息
|
||||
page.on('console', (msg) => {
|
||||
console.log('🖥️ Console:', msg.type(), msg.text());
|
||||
});
|
||||
|
||||
try {
|
||||
console.log('\n1. 访问首页...');
|
||||
await page.goto('http://localhost:5174');
|
||||
await page.waitForTimeout(2000);
|
||||
|
||||
console.log('\n2. 填写登录信息...');
|
||||
|
||||
// 等待登录表单出现
|
||||
await page.waitForSelector(
|
||||
'input[type="text"], input[placeholder*="用户名"], input[placeholder*="账号"]',
|
||||
{ timeout: 10000 },
|
||||
);
|
||||
|
||||
// 尝试不同的用户名输入选择器
|
||||
const usernameSelectors = [
|
||||
'input[type="text"]',
|
||||
'input[placeholder*="用户名"]',
|
||||
'input[placeholder*="账号"]',
|
||||
'input[name="username"]',
|
||||
'.ant-input',
|
||||
];
|
||||
|
||||
let usernameInput = null;
|
||||
for (const selector of usernameSelectors) {
|
||||
try {
|
||||
usernameInput = await page.$(selector);
|
||||
if (usernameInput) {
|
||||
console.log(`✅ 找到用户名输入框: ${selector}`);
|
||||
break;
|
||||
}
|
||||
} catch (e) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
if (usernameInput) {
|
||||
await usernameInput.fill('admin');
|
||||
console.log('✅ 用户名已填入');
|
||||
} else {
|
||||
console.log('❌ 未找到用户名输入框');
|
||||
// 打印页面内容用于调试
|
||||
const content = await page.content();
|
||||
console.log('页面内容片段:', content.substring(0, 1000));
|
||||
}
|
||||
|
||||
// 尝试不同的密码输入选择器
|
||||
const passwordSelectors = [
|
||||
'input[type="password"]',
|
||||
'input[placeholder*="密码"]',
|
||||
'input[name="password"]',
|
||||
];
|
||||
|
||||
let passwordInput = null;
|
||||
for (const selector of passwordSelectors) {
|
||||
try {
|
||||
passwordInput = await page.$(selector);
|
||||
if (passwordInput) {
|
||||
console.log(`✅ 找到密码输入框: ${selector}`);
|
||||
break;
|
||||
}
|
||||
} catch (e) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
if (passwordInput) {
|
||||
await passwordInput.fill('111111');
|
||||
console.log('✅ 密码已填入');
|
||||
} else {
|
||||
console.log('❌ 未找到密码输入框');
|
||||
}
|
||||
|
||||
console.log('\n3. 点击登录按钮...');
|
||||
|
||||
// 尝试不同的登录按钮选择器
|
||||
const loginButtonSelectors = [
|
||||
'button[type="submit"]',
|
||||
'button:has-text("登录")',
|
||||
'button:has-text("登陆")',
|
||||
'button:has-text("Login")',
|
||||
'.ant-btn-primary',
|
||||
'button.login-btn',
|
||||
];
|
||||
|
||||
let loginButton = null;
|
||||
for (const selector of loginButtonSelectors) {
|
||||
try {
|
||||
loginButton = await page.$(selector);
|
||||
if (loginButton) {
|
||||
console.log(`✅ 找到登录按钮: ${selector}`);
|
||||
break;
|
||||
}
|
||||
} catch (e) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
if (loginButton) {
|
||||
await loginButton.click();
|
||||
console.log('✅ 登录按钮已点击');
|
||||
} else {
|
||||
console.log('❌ 未找到登录按钮');
|
||||
// 尝试按回车键登录
|
||||
await page.keyboard.press('Enter');
|
||||
console.log('✅ 尝试按回车键登录');
|
||||
}
|
||||
|
||||
console.log('\n4. 等待登录完成...');
|
||||
await page.waitForTimeout(3000);
|
||||
|
||||
// 检查是否成功跳转到dashboard
|
||||
const currentUrl = page.url();
|
||||
console.log('当前URL:', currentUrl);
|
||||
|
||||
if (currentUrl.includes('/dashboard') || currentUrl.includes('/home')) {
|
||||
console.log('✅ 登录成功，已跳转到dashboard');
|
||||
} else {
|
||||
console.log('⚠️ 可能未成功跳转到dashboard，尝试手动导航...');
|
||||
await page.goto('http://localhost:5174/dashboard/home');
|
||||
await page.waitForTimeout(2000);
|
||||
}
|
||||
|
||||
console.log('\n5. 检查dashboard页面...');
|
||||
|
||||
// 等待页面加载
|
||||
await page.waitForTimeout(5000);
|
||||
|
||||
// 检查页面标题和内容
|
||||
const title = await page.title();
|
||||
console.log('页面标题:', title);
|
||||
|
||||
// 检查是否有错误信息
|
||||
const errorElements = await page.$$(
|
||||
'text=/401|Unauthorized|认证失败|登录失效/',
|
||||
);
|
||||
if (errorElements.length > 0) {
|
||||
console.log('❌ 发现认证错误信息');
|
||||
for (const element of errorElements) {
|
||||
const text = await element.textContent();
|
||||
console.log('错误信息:', text);
|
||||
}
|
||||
}
|
||||
|
||||
// 检查localStorage中的token
|
||||
const token = await page.evaluate(
|
||||
() =>
|
||||
localStorage.getItem('token') ||
|
||||
localStorage.getItem('accessToken') ||
|
||||
localStorage.getItem('authToken'),
|
||||
);
|
||||
console.log(
|
||||
'LocalStorage中的token:',
|
||||
token ? `${token.substring(0, 20)}...` : '无token',
|
||||
);
|
||||
|
||||
// 检查sessionStorage中的token
|
||||
const sessionToken = await page.evaluate(
|
||||
() =>
|
||||
sessionStorage.getItem('token') ||
|
||||
sessionStorage.getItem('accessToken') ||
|
||||
sessionStorage.getItem('authToken'),
|
||||
);
|
||||
console.log(
|
||||
'SessionStorage中的token:',
|
||||
sessionToken ? `${sessionToken.substring(0, 20)}...` : '无token',
|
||||
);
|
||||
|
||||
console.log('\n6. 监控网络请求...');
|
||||
|
||||
// 触发一些可能的API请求
|
||||
await page.reload();
|
||||
await page.waitForTimeout(5000);
|
||||
|
||||
// 尝试点击可能触发API请求的元素
|
||||
const clickableElements = await page.$$(
|
||||
'button, .ant-btn, [role="button"]',
|
||||
);
|
||||
if (clickableElements.length > 0) {
|
||||
console.log(
|
||||
`发现 ${clickableElements.length} 个可点击元素，尝试点击第一个...`,
|
||||
);
|
||||
try {
|
||||
await clickableElements[0].click();
|
||||
await page.waitForTimeout(2000);
|
||||
} catch (e) {
|
||||
console.log('点击元素时出错:', e.message);
|
||||
}
|
||||
}
|
||||
|
||||
console.log('\n7. 获取最终页面状态...');
|
||||
const finalUrl = page.url();
|
||||
const pageContent = await page.content();
|
||||
|
||||
console.log('最终URL:', finalUrl);
|
||||
console.log(
|
||||
'页面是否包含数据元素:',
|
||||
pageContent.includes('data') ||
|
||||
pageContent.includes('loading') ||
|
||||
pageContent.includes('error'),
|
||||
);
|
||||
|
||||
// 检查是否有API调用失败的迹象
|
||||
if (pageContent.includes('401') || pageContent.includes('Unauthorized')) {
|
||||
console.log('❌ 页面内容显示有401认证错误');
|
||||
}
|
||||
|
||||
if (
|
||||
pageContent.includes('Network Error') ||
|
||||
pageContent.includes('Failed to fetch')
|
||||
) {
|
||||
console.log('❌ 页面内容显示有网络错误');
|
||||
}
|
||||
|
||||
console.log('\n测试完成，浏览器将保持打开状态供进一步检查...');
|
||||
console.log('请手动检查开发者工具中的Network标签页');
|
||||
|
||||
// 保持浏览器打开
|
||||
await page.waitForTimeout(30000);
|
||||
} catch (error) {
|
||||
console.error('测试过程中出现错误:', error);
|
||||
} finally {
|
||||
await browser.close();
|
||||
}
|
||||
}
|
||||
|
||||
testAuthenticationFlow().catch(console.error);
|
||||
Reference in New Issue
Block a user