zn-ai/src/electron/automation/recording-automation.js

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

// 录制配置
const recordingConfig = {
  outputFile: 'recorded-steps.json',
  headless: false, // 显示浏览器窗口
  slowMo: 100, // 减慢操作速度，便于观察
  viewport: { width: 1280, height: 720 }
};

// 存储录制的步骤
let recordedSteps = [];
let recordingStartTime = Date.now();
let isRecording = true;

// 生成时间戳
function getTimestamp() {
  return Date.now() - recordingStartTime;
}

// 记录步骤
function recordStep(step) {
  const stepWithTimestamp = {
    ...step,
    timestamp: getTimestamp()
  };
  recordedSteps.push(stepWithTimestamp);
  console.log(`📹 录制步骤: ${step.type} - ${step.description}`);
}

// 保存录制的步骤到文件
function saveRecordedSteps() {
  const outputPath = path.join(__dirname, recordingConfig.outputFile);
  const data = {
    steps: recordedSteps,
    metadata: {
      totalSteps: recordedSteps.length,
      duration: getTimestamp(),
      recordedAt: new Date().toISOString()
    }
  };
  
  fs.writeFileSync(outputPath, JSON.stringify(data, null, 2));
  console.log(`\n✅ 录制完成！共录制 ${recordedSteps.length} 个步骤`);
  console.log(`📁 录制文件已保存到: ${outputPath}`);
}

// 监听页面事件
async function setupPageListeners(page) {
  // 监听点击事件
  await page.exposeFunction('__recordClick', (selector, coordinates) => {
    if (!isRecording) return;
    
    recordStep({
      type: 'click',
      description: `点击元素: ${selector || '未知元素'}`,
      selector: selector || '',
      coordinates: coordinates || {}
    });
  });

  // 监听输入事件
  await page.exposeFunction('__recordInput', (selector, text) => {
    if (!isRecording) return;
    
    recordStep({
      type: 'type',
      description: `输入文本: "${text || ''}"`,
      selector: selector || '',
      text: text || ''
    });
  });

  // 注入脚本监听用户操作
  await page.addInitScript(() => {
    // 监听点击事件
    document.addEventListener('click', (event) => {
      const target = event.target;
      const selector = generateSelector(target);
      const coordinates = { x: event.clientX, y: event.clientY };
      
      if (window.__recordClick) {
        window.__recordClick(selector, coordinates);
      }
    }, true);

    // 监听输入事件
    document.addEventListener('input', (event) => {
      const target = event.target;
      const selector = generateSelector(target);
      const text = target.value || target.textContent || '';
      
      if (window.__recordInput) {
        window.__recordInput(selector, text);
      }
    }, true);

    // 生成元素选择器
    function generateSelector(element) {
      if (!element) return '';
      
      // 优先使用 ID
      if (element.id) {
        return `#${element.id}`;
      }
      
      // 使用 class 和标签名
      const tagName = element.tagName.toLowerCase();
      if (element.className) {
        const classes = element.className.split(' ').filter(c => c.trim());
        if (classes.length > 0) {
          return `${tagName}.${classes.join('.')}`;
        }
      }
      
      // 使用属性
      const attributes = ['name', 'placeholder', 'type'];
      for (const attr of attributes) {
        if (element.getAttribute(attr)) {
          return `${tagName}[${attr}="${element.getAttribute(attr)}"]`;
        }
      }
      
      // 使用路径
      return getElementPath(element);
    }

    function getElementPath(element) {
      const path = [];
      while (element && element.nodeType === Node.ELEMENT_NODE) {
        let selector = element.nodeName.toLowerCase();
        if (element.id) {
          selector += `#${element.id}`;
          path.unshift(selector);
          break;
        } else {
          let sibling = element;
          let nth = 1;
          while (sibling = sibling.previousElementSibling) {
            if (sibling.nodeName.toLowerCase() === selector) nth++;
          }
          if (nth !== 1) selector += `:nth-of-type(${nth})`;
        }
        path.unshift(selector);
        element = element.parentNode;
      }
      return path.join(' > ');
    }
  });
}

// 主录制函数
async function startRecording() {
  console.log('🎬 开始自动化录制...');
  console.log('请在浏览器中进行操作，系统会自动记录您的操作步骤');
  console.log('按 Ctrl+C 停止录制并保存结果\n');

  let browser;
  let page;

  try {
    // 启动浏览器
    browser = await chromium.launch({
      headless: recordingConfig.headless,
      slowMo: recordingConfig.slowMo
    });

    // 创建新页面
    page = await browser.newPage({
      viewport: recordingConfig.viewport
    });

    // 设置页面监听器
    await setupPageListeners(page);

    // 监听页面导航
    page.on('framenavigated', async (frame) => {
      if (frame === page.mainFrame() && isRecording) {
        recordStep({
          type: 'navigate',
          description: `导航到: ${frame.url()}`,
          url: frame.url()
        });
        
        // 重新设置监听器
        await setupPageListeners(page);
      }
    });

    // 导航到百度首页作为起始页面
    console.log('🌐 正在打开百度首页...');
    await page.goto('https://www.baidu.com');
    
    recordStep({
      type: 'navigate',
      description: '打开百度首页',
      url: 'https://www.baidu.com'
    });

    console.log('✅ 录制已启动！请在浏览器中进行操作...');
    console.log('💡 您可以：');
    console.log('   - 点击页面元素');
    console.log('   - 在输入框中输入文本');
    console.log('   - 导航到其他页面');
    console.log('   - 按回车键或其他键盘操作');
    console.log('');
    console.log('⚠️  按 Ctrl+C 停止录制并保存结果');

    // 保持浏览器打开，直到用户手动停止
    await new Promise((resolve) => {
      process.on('SIGINT', () => {
        console.log('\n🛑 用户停止录制');
        isRecording = false;
        resolve();
      });
    });

  } catch (error) {
    console.error('❌ 录制过程中发生错误:', error);
  } finally {
    if (browser) {
      // 保存录制的步骤
      saveRecordedSteps();
      await browser.close();
    }
  }
}

// 处理程序终止
process.on('SIGINT', () => {
  console.log('\n🛑 用户停止录制');
  saveRecordedSteps();
  process.exit(0);
});

process.on('SIGTERM', () => {
  console.log('\n🛑 程序终止');
  saveRecordedSteps();
  process.exit(0);
});

// 启动录制
(async () => {
  await startRecording();
})();