kindergarten_java/reading-platform-frontend/tests/e2e/admin/debug-course-create-3.spec.ts

/**
 * 调试课程创建 - 带详细步骤日志和错误捕获
 */
import { test, expect } from '@playwright/test';
import { loginAsAdmin } from './helpers';

test.describe('课程创建调试 - 详细步骤追踪', () => {
  test('调试课程创建完整流程', async ({ page }) => {
    test.setTimeout(180000);

    const courseName = '调试测试课程包-' + Date.now();
    console.log('=== 测试开始 ===');
    console.log('测试课程名称:', courseName);

    // 捕获所有控制台日志
    page.on('console', msg => {
      console.log(`[Browser ${msg.type()}] ${msg.text()}`);
    });

    // 捕获所有网络请求
    page.on('request', request => {
      if (request.method() !== 'GET' || request.url().includes('/api/')) {
        console.log(`[Network] >> ${request.method()} ${request.url()}`);
      }
    });

    page.on('response', response => {
      if (response.url().includes('/api/')) {
        console.log(`[Network] << ${response.status()} ${response.url()}`);
        if (response.status() >= 400) {
          response.text().then(text => {
            console.log(`[Error Response] ${text}`);
          }).catch(() => {});
        }
      }
    });

    // 步骤 1: 登录
    console.log('=== 步骤 1: 登录 ===');
    await loginAsAdmin(page);
    console.log('登录完成');
    await page.waitForTimeout(1000);

    // 步骤 2: 进入课程列表页面
    console.log('=== 步骤 2: 进入课程列表 ===');
    await page.goto('/admin/courses', { timeout: 30000, waitUntil: 'networkidle' });
    await page.waitForTimeout(3000);

    const tableVisible = await page.locator('.ant-table').first().isVisible().catch(() => false);
    console.log('表格是否可见:', tableVisible);

    // 步骤 3: 点击新建课程包按钮
    console.log('=== 步骤 3: 点击新建课程包 ===');
    const createButton = page.getByRole('button', { name: '新建课程包' });
    const buttonVisible = await createButton.isVisible();
    console.log('新建课程包按钮是否可见:', buttonVisible);

    if (!buttonVisible) {
      console.log('按钮不可见，尝试截图...');
      await page.screenshot({ path: 'test-results/debug-no-create-button.png' });
      throw new Error('新建课程包按钮不可见');
    }

    await createButton.click();
    console.log('已点击新建课程包按钮');
    await page.waitForTimeout(2000);

    // 验证进入创建页面
    console.log('=== 验证创建页面 ===');
    const pageTitle = await page.getByText('创建课程包').isVisible().catch(() => false);
    console.log('创建页面标题是否可见:', pageTitle);

    if (!pageTitle) {
      await page.screenshot({ path: 'test-results/debug-not-create-page.png' });
      throw new Error('未进入创建页面');
    }

    // 步骤 4: 填写基本信息
    console.log('=== 步骤 4: 填写基本信息 ===');

    // 填写课程名称
    const nameInput = page.getByPlaceholder('请输入课程包名称');
    const nameInputVisible = await nameInput.isVisible();
    console.log('课程名称输入框是否可见:', nameInputVisible);
    await nameInput.fill(courseName);
    console.log('已填写课程名称');

    // 选择关联主题
    console.log('选择关联主题...');
    const themeSelector = page.locator('.ant-select-selector').first();
    await themeSelector.click();
    await page.waitForTimeout(500);

    const themeOption = page.getByText('社会认知', { exact: true }).first();
    const themeVisible = await themeOption.isVisible();
    console.log('主题选项是否可见:', themeVisible);
    await themeOption.click();
    await page.waitForTimeout(300);
    console.log('已选择主题');

    // 选择适用年级
    console.log('选择适用年级...');
    const gradeCheckbox = page.getByRole('checkbox', { name: '小班' });
    const checkboxVisible = await gradeCheckbox.isVisible();
    console.log('年级复选框是否可见:', checkboxVisible);
    await gradeCheckbox.check();
    await page.waitForTimeout(300);
    console.log('已选择年级');

    // 填写核心内容
    console.log('填写核心内容...');
    const contentInput = page.getByPlaceholder('请输入课程包核心内容');
    const contentVisible = await contentInput.isVisible();
    console.log('核心内容输入框是否可见:', contentVisible);
    await contentInput.fill('调试测试课程内容');
    console.log('已填写核心内容');

    // 步骤 5: 点击下一步按钮直到最后
    console.log('=== 步骤 5: 点击下一步 ===');
    for (let i = 0; i < 6; i++) {
      const nextButton = page.getByRole('button', { name: '下一步' });
      const nextVisible = await nextButton.isVisible().catch(() => false);
      console.log(`第 ${i + 1} 次 - 下一步按钮是否可见:`, nextVisible);

      if (nextVisible) {
        console.log(`点击第 ${i + 1} 次"下一步"`);
        await nextButton.click();
        await page.waitForTimeout(1000);

        // 检查是否有验证错误
        const hasError = await page.locator('.ant-message-error').isVisible().catch(() => false);
        if (hasError) {
          const errorText = await page.locator('.ant-message-error').textContent();
          console.log('验证错误:', errorText);
        }
      } else {
        console.log(`第 ${i + 1} 次没有找到下一步按钮，可能已到最后一步`);
        break;
      }
    }

    await page.waitForTimeout(1000);

    // 步骤 6: 点击创建按钮
    console.log('=== 步骤 6: 点击创建 ===');
    const submitButton = page.getByRole('button', { name: '创建' });
    const submitVisible = await submitButton.isVisible().catch(() => false);
    console.log('创建按钮是否可见:', submitVisible);

    if (!submitVisible) {
      console.log('创建按钮不可见，尝试截图...');
      await page.screenshot({ path: 'test-results/debug-no-submit-button.png' });
      throw new Error('创建按钮不可见');
    }

    console.log('准备点击创建按钮...');
    await submitButton.click();
    console.log('已点击创建按钮');

    // 步骤 7: 等待创建结果
    console.log('=== 步骤 7: 等待创建结果 ===');

    // 等待成功提示
    const hasSuccessMessage = await page.waitForSelector('.ant-message-success', { timeout: 10000 }).catch(() => null);
    console.log('是否有成功提示:', hasSuccessMessage !== null);

    // 等待页面跳转
    const hasUrlChange = await page.waitForURL('**/admin/courses**', { timeout: 15000 }).catch(() => false);
    console.log('是否发生页面跳转:', hasUrlChange);

    await page.waitForTimeout(3000);

    // 步骤 8: 验证课程列表
    console.log('=== 步骤 8: 验证课程列表 ===');
    const table = page.locator('.ant-table').first();
    const rows = table.locator('tbody tr');
    const afterCount = await rows.count();
    console.log('创建后的课程数量:', afterCount);

    // 查找新课程
    const newCourseRow = table.getByText(courseName);
    const isCourseExists = await newCourseRow.isVisible().catch(() => false);
    console.log('新课程是否在列表中:', isCourseExists);

    // 截图
    await page.screenshot({ path: 'test-results/debug-create-final-result.png' });
    console.log('最终结果截图已保存');

    // 输出结论
    console.log('=== 测试总结 ===');
    if (isCourseExists) {
      console.log('✅ 课程创建成功！');
    } else {
      console.log('❌ 课程创建失败或列表未更新');
      console.log('  - 创建按钮已点击，但没有检测到成功提示或课程在列表中');
    }

    // 断言
    expect(isCourseExists).toBe(true);
  });
});