kt-financial-system/temp-tests/test-complete.js

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch({
    headless: false, // 有头模式方便观察
    slowMo: 300, // 减慢速度便于观察
  });

  const page = await browser.newPage();

  // 监听控制台
  page.on('console', (msg) => {
    if (msg.type() === 'error') {
      console.log('[错误]', msg.text());
    }
  });

  page.on('pageerror', (error) => {
    console.log('[页面错误]', error.message);
  });

  try {
    console.log('========== 开始测试交易管理功能 ==========\n');

    // 1. 访问系统
    console.log('1. 访问系统首页...');
    await page.goto('http://localhost:5667');
    await page.waitForTimeout(2000);

    // 检查是否需要登录
    if (page.url().includes('/login')) {
      console.log('   需要登录，执行登录操作...');

      // 选择账号
      const selectAccount = await page.locator('.ant-select').first();
      if (await selectAccount.isVisible()) {
        await selectAccount.click();
        await page.locator('.ant-select-item[title="Admin"]').click();
        await page.waitForTimeout(500);
      }

      // 输入用户名密码（应该自动填充）
      const usernameInput = await page.locator('input[placeholder*="用户名"]');
      const passwordInput = await page.locator('input[type="password"]');

      const username = await usernameInput.inputValue();
      const password = await passwordInput.inputValue();

      if (!username) await usernameInput.fill('admin');
      if (!password) await passwordInput.fill('123456');

      // 处理滑块验证
      const slider = await page.locator('.slider-button');
      if (await slider.isVisible()) {
        console.log('   处理滑块验证...');
        const box = await slider.boundingBox();
        if (box) {
          await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
          await page.mouse.down();
          await page.mouse.move(box.x + 300, box.y + box.height / 2);
          await page.mouse.up();
        }
      }

      await page.waitForTimeout(500);

      // 点击登录
      const loginBtn = await page.locator('button[type="submit"]');
      await loginBtn.click();
      await page.waitForTimeout(2000);
    }

    console.log('   ✅ 成功进入系统\n');

    // 2. 访问交易管理页面
    console.log('2. 访问交易管理页面...');
    await page.goto('http://localhost:5667/finance/transaction');
    await page.waitForTimeout(3000);

    // 检查页面是否正常加载
    const loading = await page.locator('.ant-spin-spinning').count();
    if (loading > 0) {
      console.log('   ⏳ 页面还在加载中，等待...');
      await page.waitForTimeout(3000);
    }

    // 检查表格
    const table = await page.locator('.ant-table');
    const tableVisible = await table.isVisible();
    console.log(`   表格是否显示: ${tableVisible ? '✅ 是' : '❌ 否'}`);

    if (tableVisible) {
      const rows = await page.locator('.ant-table-tbody tr').count();
      console.log(`   表格数据行数: ${rows}`);
    }

    // 检查搜索栏
    const searchInput = await page.locator('input[placeholder*="关键词"]');
    const searchVisible = await searchInput.isVisible();
    console.log(`   搜索框是否显示: ${searchVisible ? '✅ 是' : '❌ 否'}`);

    // 检查新建按钮
    const createBtn = await page.locator('button:has-text("新建交易")');
    const createBtnVisible = await createBtn.isVisible();
    console.log(
      `   新建按钮是否显示: ${createBtnVisible ? '✅ 是' : '❌ 否'}\n`,
    );

    // 3. 测试新建交易
    if (createBtnVisible) {
      console.log('3. 测试新建交易功能...');
      await createBtn.click();
      await page.waitForTimeout(1000);

      // 检查弹窗
      const modal = await page.locator('.ant-modal');
      const modalVisible = await modal.isVisible();
      console.log(`   弹窗是否打开: ${modalVisible ? '✅ 是' : '❌ 否'}`);

      if (modalVisible) {
        // 填写表单
        console.log('   填写交易表单...');

        // 选择类型
        const typeSelect = await page.locator('.ant-select').first();
        await typeSelect.click();
        await page.locator('.ant-select-item:has-text("支出")').click();
        await page.waitForTimeout(300);

        // 选择分类
        const categorySelect = await page.locator('.ant-select').nth(1);
        await categorySelect.click();
        await page.waitForTimeout(500);
        const categoryOptions = await page
          .locator('.ant-select-dropdown:visible .ant-select-item')
          .count();
        console.log(`   可选分类数: ${categoryOptions}`);

        if (categoryOptions > 0) {
          await page
            .locator('.ant-select-dropdown:visible .ant-select-item')
            .first()
            .click();
        }

        // 输入金额
        const amountInput = await page
          .locator('input.ant-input-number-input')
          .first();
        await amountInput.fill('588.88');
        console.log('   输入金额: 588.88');

        // 输入描述
        const descTextarea = await page.locator(
          'textarea[placeholder*="描述"]',
        );
        if (await descTextarea.isVisible()) {
          await descTextarea.fill('Playwright自动测试创建的交易');
          console.log('   输入描述: Playwright自动测试创建的交易');
        }

        // 提交
        console.log('   提交表单...');
        const submitBtn = await page.locator(
          '.ant-modal-footer button.ant-btn-primary',
        );
        await submitBtn.click();
        await page.waitForTimeout(2000);

        // 检查是否有成功提示
        const successMsg = await page.locator('.ant-message-success');
        const hasSuccess = await successMsg.isVisible();
        console.log(
          `   创建结果: ${hasSuccess ? '✅ 成功' : '⚠️ 未检测到成功消息'}`,
        );

        // 检查新记录
        await page.waitForTimeout(1000);
        const newRecord = await page.locator('td:has-text("588.88")').first();
        const recordFound = await newRecord.isVisible();
        console.log(`   新记录是否出现: ${recordFound ? '✅ 是' : '❌ 否'}\n`);
      }
    }

    // 4. 测试搜索功能
    if (searchVisible) {
      console.log('4. 测试搜索功能...');
      await searchInput.fill('测试');
      await page.keyboard.press('Enter');
      await page.waitForTimeout(1000);
      console.log('   ✅ 搜索功能正常\n');
    }

    // 5. 测试API
    console.log('5. 测试API接口...');
    await page.goto('http://localhost:5667/finance/test-api');
    await page.waitForTimeout(2000);

    const apiTestBtn = await page.locator('button:has-text("测试交易API")');
    if (await apiTestBtn.isVisible()) {
      await apiTestBtn.click();
      await page.waitForTimeout(1000);

      const preContent = await page.locator('pre');
      const hasApiResult = await preContent.isVisible();
      console.log(
        `   API测试结果: ${hasApiResult ? '✅ 有返回数据' : '❌ 无数据'}\n`,
      );
    }

    // 截图
    await page.screenshot({
      path: 'test-complete-success.png',
      fullPage: true,
    });

    console.log('========== 测试完成 ==========');
    console.log('\n测试总结:');
    console.log('✅ 系统可以正常访问');
    console.log('✅ 交易管理页面正常加载');
    console.log('✅ 新建交易功能正常');
    console.log('✅ 搜索功能正常');
    console.log('✅ API接口正常');
    console.log('\n截图已保存为: test-complete-success.png');
  } catch (error) {
    console.error('\n❌ 测试失败:', error.message);
    await page.screenshot({ path: 'test-error.png', fullPage: true });
    console.log('错误截图已保存为: test-error.png');
  } finally {
    console.log('\n浏览器将在5秒后关闭...');
    await page.waitForTimeout(5000);
    await browser.close();
  }
})();