rrweb/complete-test.js

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

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

  const page = await browser.newPage();

  // Capture console logs
  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
  });

  // Wait for scripts to load
  await new Promise(r => setTimeout(r, 2000));

  console.log('=== Complete Button Test ===');

  // Step 1: Check initial state
  console.log('\n1. Checking initial state...');
  const initialState = await page.evaluate(() => {
    const playBtn = document.getElementById('play-toggle-btn');
    const timeline = document.getElementById('timeline');
    const speedBtns = document.querySelectorAll('.speed-controls button');
    const exportBtn = document.querySelector('button[onclick="exportRecording()"]');

    return {
      playBtnDisabled: playBtn.disabled,
      timelineDisabled: timeline.disabled,
      speedBtnsDisabled: Array.from(speedBtns).map(btn => btn.disabled),
      exportBtnDisabled: exportBtn.disabled
    };
  });
  console.log('Initial State:', initialState);

  // Step 2: Start recording
  console.log('\n2. Starting recording...');
  await page.click('#start-btn');
  await new Promise(r => setTimeout(r, 1000));

  // Step 3: Perform some actions
  console.log('3. Performing actions...');
  await page.evaluate(() => {
    document.querySelector('button[onclick="changeColor()"]').click();
    document.querySelector('button[onclick="addCounter()"]').click();
    document.querySelector('button[onclick="addCounter()"]').click();
  });
  await new Promise(r => setTimeout(r, 1000));

  // Step 4: Stop recording
  console.log('4. Stopping recording...');
  await page.click('#stop-btn');
  await new Promise(r => setTimeout(r, 2000));

  // Step 5: Check state after recording
  console.log('\n5. Checking state after recording...');
  const afterRecordState = await page.evaluate(() => {
    const playBtn = document.getElementById('play-toggle-btn');
    const timeline = document.getElementById('timeline');
    const speedBtns = document.querySelectorAll('.speed-controls button');
    const exportBtn = document.querySelector('button[onclick="exportRecording()"]');
    const events = window.events || [];

    return {
      playBtnDisabled: playBtn.disabled,
      playBtnText: playBtn.textContent,
      timelineDisabled: timeline.disabled,
      timelineMax: timeline.max,
      timelineValue: timeline.value,
      speedBtnsDisabled: Array.from(speedBtns).map(btn => btn.disabled),
      exportBtnDisabled: exportBtn.disabled,
      eventCount: events.length
    };
  });
  console.log('After Recording State:', afterRecordState);

  // Step 6: Test play button
  if (!afterRecordState.playBtnDisabled) {
    console.log('\n6. Testing play button...');
    await page.click('#play-toggle-btn');
    await new Promise(r => setTimeout(r, 1000));

    const playAfterClick = await page.evaluate(() => {
      const playBtn = document.getElementById('play-toggle-btn');
      return {
        playBtnText: playBtn.textContent,
        isReplaying: window.isReplaying
      };
    });
    console.log('After Play Click:', playAfterClick);
  }

  // Step 7: Test pause button
  if (afterRecordState.playBtnText === '⏸ 暂停') {
    console.log('\n7. Testing pause button...');
    await page.click('#play-toggle-btn');
    await new Promise(r => setTimeout(r, 1000));

    const pauseAfterClick = await page.evaluate(() => {
      const playBtn = document.getElementById('play-toggle-btn');
      return {
        playBtnText: playBtn.textContent
      };
    });
    console.log('After Pause Click:', pauseAfterClick);
  }

  // Step 8: Test speed buttons
  if (!afterRecordState.speedBtnsDisabled.every(disabled => disabled)) {
    console.log('\n8. Testing speed buttons...');
    const speedBtn = await page.$('.speed-controls button[data-speed="2"]');
    if (speedBtn) {
      await speedBtn.click();
      await new Promise(r => setTimeout(r, 500));

      const speedAfterClick = await page.evaluate(() => {
        const activeSpeedBtn = document.querySelector('.speed-controls button.active');
        return {
          activeSpeed: activeSpeedBtn ? activeSpeedBtn.textContent : 'N/A',
          currentSpeed: window.currentSpeed
        };
      });
      console.log('After Speed Click:', speedAfterClick);
    }
  }

  // Step 9: Test export button
  console.log('\n9. Testing export button...');
  await page.click('button[onclick="exportRecording()"]');
  await new Promise(r => setTimeout(r, 2000));

  // Step 10: Test clear button
  console.log('\n10. Testing clear button...');
  await page.click('button[onclick="clearAll()"]');
  await new Promise(r => setTimeout(r, 1000));

  const finalState = await page.evaluate(() => {
    const playBtn = document.getElementById('play-toggle-btn');
    const timeline = document.getElementById('timeline');
    const events = window.events || [];

    return {
      playBtnDisabled: playBtn.disabled,
      timelineDisabled: timeline.disabled,
      eventCount: events.length
    };
  });
  console.log('Final State:', finalState);

  console.log('\n=== Test Summary ===');
  console.log('✓ Initial state checked');
  console.log('✓ Recording completed');
  console.log('✓ Recording state verified');
  if (!afterRecordState.playBtnDisabled) console.log('✓ Play/Pause buttons working');
  if (!afterRecordState.speedBtnsDisabled.every(disabled => disabled)) console.log('✓ Speed buttons working');
  if (!afterRecordState.exportBtnDisabled) console.log('✓ Export button working');
  console.log('✓ Clear button working');

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