save before filter

regression-test.js

@@ -0,0 +1,151 @@
+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']
+  });
+
+  const page = await browser.newPage();
+
+  // Override alert to capture messages
+  page.evaluateOnNewDocument(() => {
+    window.alert = (msg) => {
+      console.log('ALERT:', msg);
+      return true;
+    };
+  });
+
+  const results = {};
+
+  // Wait for page load
+  await page.goto('file:///C:/Users/xgp/projects/rrweb/index.html', {
+    waitUntil: 'networkidle2',
+    timeout: 120000
+  });
+
+  // Helper to get element state
+  const getState = async () => {
+    return await page.evaluate(() => {
+      const startBtn = document.getElementById('start-btn');
+      const stopBtn = document.getElementById('stop-btn');
+      const playBtn = document.getElementById('play-toggle-btn');
+      const timeline = document.getElementById('timeline');
+      const status = document.getElementById('status-bar');
+      const replay = document.getElementById('replayer');
+      const currentTime = document.getElementById('current-time');
+      const totalTime = document.getElementById('total-time');
+      const activeSpeed = document.querySelector('.speed-controls button.active');
+
+      return {
+        status: status.textContent.trim(),
+        startDisabled: startBtn.disabled,
+        stopDisabled: stopBtn.disabled,
+        playText: playBtn.textContent,
+        playDisabled: playBtn.disabled,
+        timelineDisabled: timeline.disabled,
+        timelineValue: timeline.value,
+        timelineMax: timeline.max,
+        currentTime: currentTime.textContent,
+        totalTime: totalTime.textContent,
+        activeSpeed: activeSpeed ? activeSpeed.textContent : 'none',
+        replayChildren: replay.children.length,
+        hasIframe: !!replay.querySelector('iframe')
+      };
+    });
+  };
+
+  // Initial state
+  results.initial = await getState();
+  console.log('INITIAL:', JSON.stringify(results.initial, null, 2));
+
+  // Test 1: Start recording
+  await page.click('#start-btn');
+  await new Promise(r => setTimeout(r, 1000));
+  results.afterStart = await getState();
+  console.log('AFTER START:', JSON.stringify(results.afterStart, null, 2));
+
+  // Test 2: Perform some 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));
+
+  // Test 3: Stop recording
+  await page.click('#stop-btn');
+  await new Promise(r => setTimeout(r, 2000));
+  results.afterStop = await getState();
+  console.log('AFTER STOP:', JSON.stringify(results.afterStop, null, 2));
+
+  // Test 4: Test play/pause
+  if (results.afterStop.playDisabled === false) {
+    await page.click('#play-toggle-btn');
+    await new Promise(r => setTimeout(r, 1000));
+    results.afterPlay = await getState();
+    console.log('AFTER PLAY:', JSON.stringify(results.afterPlay, null, 2));
+
+    await page.click('#play-toggle-btn');
+    await new Promise(r => setTimeout(r, 1000));
+    results.afterPause = await getState();
+    console.log('AFTER PAUSE:', JSON.stringify(results.afterPause, null, 2));
+  }
+
+  // Test 5: Test timeline seek
+  if (results.afterStop.timelineDisabled === false) {
+    await page.evaluate(() => {
+      const timeline = document.getElementById('timeline');
+      timeline.value = '50';
+      timeline.dispatchEvent(new Event('input'));
+      timeline.dispatchEvent(new Event('change'));
+    });
+    await new Promise(r => setTimeout(r, 1000));
+    results.afterSeek = await getState();
+    console.log('AFTER SEEK:', JSON.stringify(results.afterSeek, null, 2));
+  }
+
+  // Test 6: Test speed control
+  if (results.afterStop.timelineDisabled === false) {
+    const speedBtn = await page.$('.speed-controls button[data-speed="2"]');
+    if (speedBtn) {
+      await speedBtn.click();
+      await new Promise(r => setTimeout(r, 1000));
+      results.afterSpeed2 = await getState();
+      console.log('AFTER SPEED 2X:', JSON.stringify(results.afterSpeed2, null, 2));
+    }
+  }
+
+  // Test 7: Clear all
+  await page.click('button[onclick="clearAll()"]');
+  await new Promise(r => setTimeout(r, 1000));
+  results.afterClear = await getState();
+  console.log('AFTER CLEAR:', JSON.stringify(results.afterClear, null, 2));
+
+  await browser.close();
+  console.log('\n=== REGRESSION TEST RESULTS ===');
+  console.log('✓ Initial state loaded');
+  console.log('✓ Start recording works:', results.afterStart.status.includes('录制'));
+  console.log('✓ Stop recording works:', results.afterStop.status.includes('已录制'));
+  console.log('✓ Replay area populated:', results.afterStop.replayChildren > 0);
+  console.log('✓ Play/pause controls:', results.afterStop.playDisabled === false);
+  console.log('✓ Timeline control:', results.afterStop.timelineDisabled === false);
+  console.log('✓ Speed controls:', results.afterStop.activeSpeed !== 'none');
+  console.log('✓ Clear function works:', results.afterClear.status.includes('等待录制'));
+
+  // Check if all tests passed
+  const allPassed =
+    results.afterStart.status.includes('录制') &&
+    results.afterStop.status.includes('已录制') &&
+    results.afterStop.replayChildren > 0 &&
+    results.afterStop.playDisabled === false &&
+    results.afterStop.timelineDisabled === false &&
+    results.afterClear.status.includes('等待录制');
+
+  console.log('\n🎯 OVERALL RESULT:', allPassed ? 'PASS' : 'FAIL');
+
+})().catch(e => {
+  console.error(e);
+  process.exit(1);
+});