237c7802e5
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>
295 lines
13 KiB
JavaScript
295 lines
13 KiB
JavaScript
#!/usr/bin/env node
|
||
|
||
/**
|
||
* 新姓名管理系统功能演示脚本
|
||
* 逐个展示所有新开发的功能
|
||
*/
|
||
|
||
const { chromium } = require('playwright');
|
||
|
||
async function demoNewFeatures() {
|
||
console.log('🎭 开始演示新开发的姓名管理系统功能...\n');
|
||
|
||
let browser;
|
||
let page;
|
||
|
||
try {
|
||
browser = await chromium.launch({
|
||
headless: false,
|
||
slowMo: 1500, // 慢一点，便于观察
|
||
devtools: false
|
||
});
|
||
|
||
const context = await browser.newContext({
|
||
viewport: { width: 1400, height: 900 }
|
||
});
|
||
|
||
page = await context.newPage();
|
||
|
||
// 监听所有姓名相关的API调用
|
||
page.on('request', request => {
|
||
const url = request.url();
|
||
if (url.includes('/nameTemplate/') || url.includes('/firstname/') || url.includes('/lastname/')) {
|
||
console.log(`🔗 API请求: ${request.method()} ${url}`);
|
||
}
|
||
});
|
||
|
||
page.on('response', response => {
|
||
const url = response.url();
|
||
if (url.includes('/nameTemplate/') || url.includes('/firstname/') || url.includes('/lastname/')) {
|
||
console.log(`📡 API响应: ${response.status()} ${url}`);
|
||
if (response.status() !== 200) {
|
||
console.log(` ⚠️ 状态码: ${response.status()} ${response.statusText()}`);
|
||
}
|
||
}
|
||
});
|
||
|
||
// ==================== 第1步：登录系统 ====================
|
||
console.log('🚀 第1步：访问系统并登录...');
|
||
await page.goto('http://localhost:8891');
|
||
await page.waitForLoadState('networkidle');
|
||
|
||
// 登录
|
||
await page.fill('input[type="text"]', 'admin');
|
||
await page.fill('input[type="password"]', '111111');
|
||
await page.click('button:has-text("登录")');
|
||
await page.waitForLoadState('networkidle');
|
||
|
||
console.log('✅ 登录成功！');
|
||
await page.screenshot({ path: '01_logged_in.png', fullPage: true });
|
||
console.log('📸 保存截图: 01_logged_in.png');
|
||
|
||
// ==================== 第2步：找到姓名管理菜单 ====================
|
||
console.log('\n🔍 第2步：找到并点击姓名管理菜单...');
|
||
|
||
// 等待菜单加载
|
||
await page.waitForTimeout(2000);
|
||
|
||
// 查找姓名管理菜单
|
||
const nameMenu = await page.locator('text=名字管理').first();
|
||
if (await nameMenu.isVisible()) {
|
||
console.log('✅ 找到"名字管理"菜单');
|
||
await nameMenu.click();
|
||
await page.waitForLoadState('networkidle');
|
||
console.log('🖱️ 点击进入姓名管理');
|
||
} else {
|
||
// 尝试其他可能的菜单名称
|
||
const alternatives = ['text=姓名管理', 'text=姓名', 'text=名字', '[href*="firstname"]'];
|
||
for (const alt of alternatives) {
|
||
try {
|
||
const menu = await page.locator(alt).first();
|
||
if (await menu.isVisible({ timeout: 1000 })) {
|
||
console.log(`✅ 找到菜单: ${alt}`);
|
||
await menu.click();
|
||
await page.waitForLoadState('networkidle');
|
||
break;
|
||
}
|
||
} catch (e) {
|
||
// 继续尝试
|
||
}
|
||
}
|
||
}
|
||
|
||
await page.screenshot({ path: '02_name_management_page.png', fullPage: true });
|
||
console.log('📸 保存截图: 02_name_management_page.png');
|
||
|
||
// ==================== 第3步：演示新API的调用 ====================
|
||
console.log('\n🔧 第3步：演示新开发的API接口...');
|
||
|
||
// 在浏览器控制台中调用新的API
|
||
console.log('📡 调用新的supportedOptions API...');
|
||
const supportedOptions = await page.evaluate(async () => {
|
||
try {
|
||
const response = await fetch('http://localhost:3000/nameTemplate/supportedOptions');
|
||
const data = await response.json();
|
||
return { status: response.status, data };
|
||
} catch (error) {
|
||
return { error: error.message };
|
||
}
|
||
});
|
||
|
||
console.log('✅ supportedOptions API响应:');
|
||
console.log(' - 支持的平台:', supportedOptions.data?.data?.platforms?.length || 0, '个');
|
||
console.log(' - 支持的文化:', supportedOptions.data?.data?.cultures?.length || 0, '个');
|
||
console.log(' - 数据源类型:', supportedOptions.data?.data?.sources?.length || 0, '个');
|
||
|
||
// 调用生成器状态API
|
||
console.log('\n📡 调用新的generatorStatus API...');
|
||
const generatorStatus = await page.evaluate(async () => {
|
||
try {
|
||
const response = await fetch('http://localhost:3000/nameTemplate/generatorStatus');
|
||
const data = await response.json();
|
||
return { status: response.status, data };
|
||
} catch (error) {
|
||
return { error: error.message };
|
||
}
|
||
});
|
||
|
||
console.log('✅ generatorStatus API响应:');
|
||
if (generatorStatus.data?.data) {
|
||
Object.keys(generatorStatus.data.data).forEach(generator => {
|
||
const info = generatorStatus.data.data[generator];
|
||
console.log(` - ${generator}: ${info.available ? '✅可用' : '❌不可用'} (优先级: ${info.priority})`);
|
||
});
|
||
}
|
||
|
||
// ==================== 第4步：测试页面功能 ====================
|
||
console.log('\n🧪 第4步：测试页面功能...');
|
||
|
||
// 检查页面元素
|
||
const hasTable = await page.locator('table').isVisible();
|
||
const hasAddButton = await page.locator('button:has-text("添加")').isVisible();
|
||
const hasSearchBox = await page.locator('input[placeholder*="搜索"], input[placeholder*="姓"]').isVisible();
|
||
|
||
console.log('📊 页面功能检查:');
|
||
console.log(` - 数据表格: ${hasTable ? '✅存在' : '❌缺失'}`);
|
||
console.log(` - 添加按钮: ${hasAddButton ? '✅存在' : '❌缺失'}`);
|
||
console.log(` - 搜索框: ${hasSearchBox ? '✅存在' : '❌缺失'}`);
|
||
|
||
// ==================== 第5步：尝试添加新姓名模板 ====================
|
||
if (hasAddButton) {
|
||
console.log('\n➕ 第5步：演示添加新姓名模板功能...');
|
||
|
||
try {
|
||
await page.click('button:has-text("添加")');
|
||
await page.waitForTimeout(2000);
|
||
|
||
// 检查是否有弹窗
|
||
const hasModal = await page.locator('.modal, .dialog, [class*="modal"]').isVisible();
|
||
console.log(` - 添加弹窗: ${hasModal ? '✅打开' : '❌未找到'}`);
|
||
|
||
if (hasModal) {
|
||
await page.screenshot({ path: '03_add_modal.png', fullPage: true });
|
||
console.log('📸 保存截图: 03_add_modal.png');
|
||
|
||
// 尝试填写测试数据
|
||
const nameInput = await page.locator('input[placeholder*="姓"], input[v-model*="name"]').first();
|
||
if (await nameInput.isVisible()) {
|
||
await nameInput.fill('测试姓氏');
|
||
console.log('✏️ 填写测试姓氏');
|
||
|
||
await page.waitForTimeout(1000);
|
||
await page.screenshot({ path: '04_filled_form.png', fullPage: true });
|
||
console.log('📸 保存截图: 04_filled_form.png');
|
||
|
||
// 取消或关闭弹窗（不实际提交）
|
||
const cancelButton = await page.locator('button:has-text("取消"), button:has-text("关闭")').first();
|
||
if (await cancelButton.isVisible()) {
|
||
await cancelButton.click();
|
||
console.log('❌ 取消添加操作（演示完成）');
|
||
}
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.log(` ⚠️ 添加功能测试失败: ${error.message}`);
|
||
}
|
||
}
|
||
|
||
// ==================== 第6步：检查数据列表 ====================
|
||
console.log('\n📋 第6步：检查现有数据列表...');
|
||
|
||
if (hasTable) {
|
||
// 统计表格行数
|
||
const tableRows = await page.locator('table tbody tr').count();
|
||
console.log(` - 数据行数: ${tableRows}`);
|
||
|
||
if (tableRows > 0) {
|
||
// 获取表头信息
|
||
const headers = await page.locator('table thead th').allTextContents();
|
||
console.log(' - 表格列:', headers.filter(h => h.trim()).join(', '));
|
||
|
||
await page.screenshot({ path: '05_data_table.png', fullPage: true });
|
||
console.log('📸 保存截图: 05_data_table.png');
|
||
} else {
|
||
console.log(' ℹ️ 表格为空，可能需要先添加数据');
|
||
}
|
||
}
|
||
|
||
// ==================== 第7步：测试搜索功能 ====================
|
||
if (hasSearchBox) {
|
||
console.log('\n🔍 第7步：测试搜索功能...');
|
||
|
||
try {
|
||
const searchInput = await page.locator('input[placeholder*="搜索"], input[placeholder*="姓"]').first();
|
||
await searchInput.fill('测试');
|
||
console.log('🔍 输入搜索关键词: 测试');
|
||
|
||
// 触发搜索
|
||
const searchButton = await page.locator('button:has-text("搜索")').first();
|
||
if (await searchButton.isVisible()) {
|
||
await searchButton.click();
|
||
console.log('🔍 点击搜索按钮');
|
||
await page.waitForTimeout(2000);
|
||
|
||
await page.screenshot({ path: '06_search_result.png', fullPage: true });
|
||
console.log('📸 保存截图: 06_search_result.png');
|
||
}
|
||
|
||
// 清空搜索
|
||
await searchInput.clear();
|
||
console.log('🧹 清空搜索条件');
|
||
} catch (error) {
|
||
console.log(` ⚠️ 搜索功能测试失败: ${error.message}`);
|
||
}
|
||
}
|
||
|
||
// ==================== 第8步：检查控制台错误 ====================
|
||
console.log('\n🔍 第8步：检查页面控制台错误...');
|
||
|
||
// 收集控制台错误
|
||
const consoleErrors = [];
|
||
page.on('console', msg => {
|
||
if (msg.type() === 'error') {
|
||
consoleErrors.push(msg.text());
|
||
}
|
||
});
|
||
|
||
await page.waitForTimeout(2000);
|
||
|
||
if (consoleErrors.length > 0) {
|
||
console.log('⚠️ 发现控制台错误:');
|
||
consoleErrors.slice(-3).forEach((error, index) => {
|
||
console.log(` ${index + 1}. ${error}`);
|
||
});
|
||
} else {
|
||
console.log('✅ 无控制台错误');
|
||
}
|
||
|
||
// ==================== 第9步：最终总结截图 ====================
|
||
console.log('\n📸 第9步：生成最终演示截图...');
|
||
await page.screenshot({ path: '07_final_demo.png', fullPage: true });
|
||
console.log('📸 保存截图: 07_final_demo.png');
|
||
|
||
// ==================== 演示完成 ====================
|
||
console.log('\n🎉 新功能演示完成！');
|
||
console.log('📁 生成的截图文件:');
|
||
console.log(' 01_logged_in.png - 登录后页面');
|
||
console.log(' 02_name_management_page.png - 姓名管理页面');
|
||
console.log(' 03_add_modal.png - 添加模态窗口');
|
||
console.log(' 04_filled_form.png - 填写表单');
|
||
console.log(' 05_data_table.png - 数据表格');
|
||
console.log(' 06_search_result.png - 搜索结果');
|
||
console.log(' 07_final_demo.png - 最终演示');
|
||
|
||
console.log('\n⏰ 浏览器将保持打开10秒供最后观察...');
|
||
await page.waitForTimeout(10000);
|
||
|
||
} catch (error) {
|
||
console.error('❌ 演示失败:', error.message);
|
||
if (page) {
|
||
await page.screenshot({ path: 'demo_error.png', fullPage: true });
|
||
console.log('📸 错误截图: demo_error.png');
|
||
}
|
||
} finally {
|
||
if (browser) {
|
||
await browser.close();
|
||
}
|
||
console.log('🏁 演示结束');
|
||
}
|
||
}
|
||
|
||
if (require.main === module) {
|
||
demoNewFeatures().catch(console.error);
|
||
}
|
||
|
||
module.exports = demoNewFeatures; |