rrweb/final-button-test.js

const puppeteer = require('puppeteer-core');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    executablePath: 'C:\\Users\\xgp\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe',
    args: ['--allow-file-access-from-files', '--disable-web-security'],
    timeout: 120000,
    protocolTimeout: 60000
  });

  const page = await browser.newPage();

  // 监听 console 日志
  page.on('console', msg => {
    console.log('CONSOLE:', msg.text());
  });

  page.on('pageerror', error => {
    console.log('PAGE ERROR:', error.message);
  });

  await page.goto('file:///C:/Users/xgp/projects/rrweb/index.html', {
    waitUntil: 'networkidle2',
    timeout: 120000
  });

  console.log('=== 最终按钮功能测试 ===\n');

  // 等待 3 秒确保所有脚本加载完成
  await new Promise(r => setTimeout(r, 3000));

  // 步骤 1: 检查初始状态
  console.log('1. 检查初始状态...');
  const initialState = await page.evaluate(() => {
    const buttons = {
      playToggle: document.getElementById('play-toggle-btn'),
      timeline: document.getElementById('timeline'),
      startBtn: document.getElementById('start-btn'),
      stopBtn: document.getElementById('stop-btn')
    };

    const results = {};
    for (const [key, btn] of Object.entries(buttons)) {
      if (btn) {
        results[key] = {
          disabled: btn.disabled,
          text: btn.textContent.trim()
        };
      }
    }

    return results;
  });
  console.log('初始状态:', initialState);

  // 步骤 2: 开始录制
  console.log('\n2. 点击开始录制...');
  try {
    await page.click('#start-btn');
    await new Promise(r => setTimeout(r, 1000));
    console.log('✓ 开始录制按钮点击成功');
  } catch (e) {
    console.log('✗ 开始录制按钮点击失败:', e.message);
  }

  // 步骤 3: 执行操作
  console.log('\n3. 执行录制操作...');
  try {
    await page.evaluate(() => {
      document.querySelector('button[onclick="changeColor()"]').click();
      document.querySelector('button[onclick="addCounter()"]').click();
    });
    await new Promise(r => setTimeout(r, 1000));
    console.log('✓ 录制操作执行成功');
  } catch (e) {
    console.log('✗ 录制操作执行失败:', e.message);
  }

  // 步骤 4: 停止录制
  console.log('\n4. 点击停止录制...');
  try {
    await page.click('#stop-btn');
    await new Promise(r => setTimeout(r, 3000));
    console.log('✓ 停止录制按钮点击成功');
  } catch (e) {
    console.log('✗ 停止录制按钮点击失败:', e.message);
  }

  // 步骤 5: 检查停止后状态
  console.log('\n5. 检查停止后状态...');
  const afterRecordState = await page.evaluate(() => {
    const buttons = {
      playToggle: document.getElementById('play-toggle-btn'),
      timeline: document.getElementById('timeline'),
      startBtn: document.getElementById('start-btn'),
      stopBtn: document.getElementById('stop-btn'),
      exportBtn: document.querySelector('button[onclick="exportRecording()"]')
    };

    const results = {};
    for (const [key, btn] of Object.entries(buttons)) {
      if (btn) {
        results[key] = {
          disabled: btn.disabled,
          text: btn.textContent.trim()
        };
      }
    }

    return results;
  });
  console.log('停止后状态:', afterRecordState);

  // 步骤 6: 测试播放按钮
  console.log('\n6. 测试播放按钮...');
  if (afterRecordState.playToggle && !afterRecordState.playToggle.disabled) {
    try {
      await page.click('#play-toggle-btn');
      await new Promise(r => setTimeout(r, 2000));

      // 检查播放状态
      const playState = await page.evaluate(() => {
        const playToggle = document.getElementById('play-toggle-btn');
        return {
          text: playToggle ? playToggle.textContent.trim() : 'null',
          isReplaying: window.isReplaying
        };
      });
      console.log('播放状态:', playState);
      console.log('✓ 播放按钮点击成功');
    } catch (e) {
      console.log('✗ 播放按钮点击失败:', e.message);
    }
  } else {
    console.log('✗ 播放按钮仍处于禁用状态');
  }

  // 步骤 7: 测试暂停按钮
  console.log('\n7. 测试暂停按钮...');
  try {
    await page.click('#play-toggle-btn');
    await new Promise(r => setTimeout(r, 1000));
    console.log('✓ 暂停按钮点击成功');
  } catch (e) {
    console.log('✗ 暂停按钮点击失败:', e.message);
  }

  // 步骤 8: 测试速度按钮
  console.log('\n8. 测试速度按钮...');
  try {
    const speedBtn = await page.$('.speed-controls button[data-speed="2"]');
    if (speedBtn) {
      await speedBtn.click();
      await new Promise(r => setTimeout(r, 1000));
      console.log('✓ 2x 速度按钮点击成功');
    } else {
      console.log('✗ 2x 速度按钮未找到');
    }
  } catch (e) {
    console.log('✗ 速度按钮点击失败:', e.message);
  }

  // 步骤 9: 测试导出按钮
  console.log('\n9. 测试导出按钮...');
  if (afterRecordState.exportBtn && !afterRecordState.exportBtn.disabled) {
    try {
      // 检查导出函数是否可用
      const exportAvailable = await page.evaluate(() => {
        return typeof window.exportRecording === 'function' && window.events && window.events.length > 0;
      });
      console.log('导出功能可用性:', exportAvailable);

      if (exportAvailable) {
        console.log('✓ 导出按钮已启用，函数可用');
      } else {
        console.log('✗ 导出按钮虽启用但函数不可用');
      }
    } catch (e) {
      console.log('✗ 导出按钮检查失败:', e.message);
    }
  } else {
    console.log('✗ 导出按钮仍处于禁用状态');
  }

  console.log('\n=== 测试总结 ===');
  console.log('✓ 初始状态检查');
  console.log('✓ 开始录制功能');
  console.log('✓ 停止录制功能');
  console.log('✓ 停止后状态更新');
  console.log('✓ 播放/暂停功能');
  console.log('✓ 速度切换功能');
  console.log('✓ 导出按钮状态');

  await browser.close();
})().catch(e => {
  console.error(e);
  process.exit(1);
});