rrweb/detailed-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
  });

  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');

  // 等待 rrweb 加载
  await page.waitForFunction(() => {
    return typeof rrweb !== 'undefined' &&
           typeof rrweb.record === 'function' &&
           typeof rrweb.Replayer === 'function';
  }, { timeout: 10000 });

  console.log('✓ rrweb 已加载完成');

  // 步骤 1: 检查初始状态
  console.log('\n1. 检查初始状态...');
  const initialState = await page.evaluate(() => {
    const results = {
      buttons: {},
      functions: {},
      window: {}
    };

    // 检查所有按钮
    const buttons = {
      playToggle: 'play-toggle-btn',
      startBtn: 'start-btn',
      stopBtn: 'stop-btn',
      timeline: 'timeline',
      speedBtn1: '.speed-controls button[data-speed="0.5"]',
      speedBtn2: '.speed-controls button[data-speed="1"]',
      speedBtn3: '.speed-controls button[data-speed="2"]',
      speedBtn4: '.speed-controls button[data-speed="4"]',
      exportBtn: 'button[onclick="exportRecording()"]'
    };

    for (const [key, selector] of Object.entries(buttons)) {
      const element = document.querySelector(selector);
      if (element) {
        results.buttons[key] = {
          exists: true,
          disabled: element.disabled,
          text: element.textContent.trim(),
          tagName: element.tagName,
          hasOnclick: element.hasAttribute('onclick'),
          listeners: element._ ? element._.events : {}
        };
      } else {
        results.buttons[key] = { exists: false };
      }
    }

    // 检查函数是否存在
    const functions = {
      rrwebRecord: typeof rrweb.record,
      rrwebReplayer: typeof rrweb.Replayer,
      exportRecording: typeof window.exportRecording,
      toggleReplay: typeof window.toggleReplay,
      changeReplaySpeed: typeof window.changeReplaySpeed,
      seekReplay: typeof window.seekReplay
    };

    for (const [key, type] of Object.entries(functions)) {
      results.functions[key] = type;
    }

    // 检查全局变量
    results.window.events = window.events ? window.events.length : 'undefined';
    results.window.replayer = window.replayer ? 'exists' : 'undefined';
    results.window.isReplaying = window.isReplaying;
    results.window.currentSpeed = window.currentSpeed;

    return results;
  });

  console.log('\n初始状态详情:');
  console.log('按钮状态:');
  for (const [key, info] of Object.entries(initialState.buttons)) {
    console.log(`  ${key}:`, info);
  }

  console.log('\n函数状态:');
  for (const [key, type] of Object.entries(initialState.functions)) {
    console.log(`  ${key}:`, type);
  }

  console.log('\n全局变量状态:');
  for (const [key, value] of Object.entries(initialState.window)) {
    console.log(`  ${key}:`, value);
  }

  // 步骤 2: 开始录制
  console.log('\n2. 开始录制...');
  await page.click('#start-btn');
  await new Promise(r => setTimeout(r, 1500));

  // 步骤 3: 执行一些操作
  console.log('\n3. 执行操作...');
  await page.evaluate(() => {
    document.querySelector('button[onclick="changeColor()"]').click();
    document.querySelector('button[onclick="addCounter()"]').click();
  });
  await new Promise(r => setTimeout(r, 1000));

  // 步骤 4: 停止录制
  console.log('\n4. 停止录制...');
  await page.click('#stop-btn');
  await new Promise(r => setTimeout(r, 3000));

  // 步骤 5: 检查停止后的状态
  console.log('\n5. 检查停止后状态...');
  const afterRecordState = await page.evaluate(() => {
    const results = {
      buttons: {},
      functions: {},
      events: window.events ? window.events.length : 'undefined',
      replayer: window.replayer ? 'exists' : 'undefined'
    };

    const buttons = {
      playToggle: 'play-toggle-btn',
      timeline: 'timeline',
      exportBtn: 'button[onclick="exportRecording()"]',
      speedBtn1: '.speed-controls button[data-speed="0.5"]'
    };

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

    // 检查按钮是否有点击事件
    const playToggle = document.querySelector('#play-toggle-btn');
    if (playToggle) {
      results.buttons.playToggle.hasClickHandler = playToggle.onclick ? 'has handler' : 'no handler';
      results.buttons.playToggle.eventListeners = playToggle._ ? Object.keys(playToggle._.events || {}) : [];
    }

    return results;
  });

  console.log('\n停止后状态:');
  console.log('按钮状态:');
  for (const [key, info] of Object.entries(afterRecordState.buttons)) {
    console.log(`  ${key}:`, info);
  }

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

  // 步骤 7: 检查播放状态
  const playState = await page.evaluate(() => {
    const playToggle = document.getElementById('play-toggle-btn');
    return {
      text: playToggle ? playToggle.textContent : 'null',
      isReplaying: window.isReplaying,
      currentTime: window.replayer ? window.replayer.getCurrentTime() : 'no replayer'
    };
  });
  console.log('播放状态:', playState);

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