const { chromium } = require('playwright');

(async () => {
  console.log('🧪 开始测试批量删除功能...');

  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext();
  const page = await context.newPage();

  try {
    console.log('📍 打开历史记录页面...');
    await page.goto('http://localhost:5173/#/pages/history/index');
    await page.waitForTimeout(3000);

    console.log('✅ 页面加载成功！');
    console.log('📸 截图保存为 history-page.png');
    await page.screenshot({ path: 'history-page.png' });

    // 检查是否有"编辑"按钮
    console.log('🔍 检查编辑按钮...');
    const editButton = page.locator('text=编辑').first();
    if (await editButton.isVisible({ timeout: 5000 })) {
      console.log('✅ 找到编辑按钮！');

      // 点击编辑按钮
      console.log('🖱️  点击编辑按钮...');
      await editButton.click();
      await page.waitForTimeout(1000);

      console.log('📸 编辑模式截图保存为 edit-mode.png');
      await page.screenshot({ path: 'edit-mode.png' });

      // 检查是否有批量操作按钮
      console.log('🔍 检查批量操作按钮...');
      const selectAllButton = page.locator('text=全选,text=取消全选').first();
      const deleteButton = page.locator('text=删除').first();
      const cancelButton = page.locator('text=取消').first();

      if (await selectAllButton.isVisible({ timeout: 2000 })) {
        console.log('✅ 找到全选/取消全选按钮！');
      }
      if (await deleteButton.isVisible({ timeout: 2000 })) {
        console.log('✅ 找到删除按钮！');
      }
      if (await cancelButton.isVisible({ timeout: 2000 })) {
        console.log('✅ 找到取消按钮！');
      }

      console.log('🎉 批量删除功能的UI组件都已实现！');
    } else {
      console.log('⚠️  未找到编辑按钮，可能需要登录或没有历史记录');
    }

  } catch (error) {
    console.error('❌ 测试出错:', error);
  } finally {
    console.log('🔚 测试完成，浏览器将在5秒后关闭...');
    await page.waitForTimeout(5000);
    await browser.close();
  }
})();