iOS自动化录屏添加触摸反馈：LambdaTest+Appium+Node.js方案问询

方案1：基于操作日志的视频后期处理（推荐，无应用侵入） #

这个思路是先记录所有自动化操作的时间戳和坐标，再用视频处理工具给录屏批量添加高亮特效，完全不需要修改被测应用，也不依赖WebView。

步骤： #

1. 在测试代码中记录操作日志：
   每次执行tap、swipe等操作时，把操作类型、坐标（x,y）、当前时间戳（相对于测试启动时间）存到一个数组里。示例代码：

   const operationLogs = [];
   let testStartTime;
   
   // 测试启动时初始化时间戳
   async function startTest() {
     testStartTime = Date.now();
     // 其他初始化逻辑...
   }
   
   // 封装自定义的tap方法，同时记录日志
   async function tapWithLog(element) {
     const rect = await element.getRect();
     const tapX = rect.x + rect.width / 2;
     const tapY = rect.y + rect.height / 2;
     const timestamp = Date.now() - testStartTime;
   
     await element.tap();
     operationLogs.push({
       type: 'tap',
       x: tapX,
       y: tapY,
       time: timestamp / 1000 // 转成秒，方便视频处理工具识别
     });
   }
   
   // 测试结束后导出日志
   async function endTest() {
     require('fs').writeFileSync('./operation-logs.json', JSON.stringify(operationLogs));
     // 其他收尾逻辑...
   }
   

2. 用FFmpeg给视频添加高亮特效：
   使用Node.js的fluent-ffmpeg库，遍历日志中的每个操作，给对应时间点的坐标添加圆形闪烁效果。示例代码：

   const ffmpeg = require('fluent-ffmpeg');
   const fs = require('fs');
   
   const logs = JSON.parse(fs.readFileSync('./operation-logs.json', 'utf8'));
   const inputVideo = './lambda-test-recording.mp4';
   const outputVideo = './recording-with-highlights.mp4';
   
   let ffmpegCommand = ffmpeg(inputVideo);
   
   // 给每个操作添加滤镜
   logs.forEach(log => {
     const start = log.time;
     const end = start + 0.5; // 高亮持续0.5秒
     // 画红色半透明圆形高亮
     const filter = `drawbox=x=${log.x-20}:y=${log.y-20}:w=40:h=40:color=red@0.5:t=fill:enable='between(t,${start},${end})'`;
     ffmpegCommand = ffmpegCommand.addFilter(filter);
   });
   
   // 输出处理后的视频
   ffmpegCommand.save(outputVideo)
     .on('end', () => console.log('视频处理完成'))
     .on('error', err => console.error('处理失败:', err));
   

   注意：需要确保环境中安装了FFmpeg，fluent-ffmpeg依赖该工具运行。

方案2：测试运行时动态添加临时覆盖层（无应用修改） #

这个思路是通过Appium的XCUITest驱动调用iOS系统API，在应用上方创建透明悬浮层，操作时在对应位置显示高亮，不需要修改被测应用代码。

实现代码（Node.js）： #

// 初始化悬浮层（测试开始时调用一次）
async function initHighlightOverlay(driver) {
  await driver.executeScript('mobile: executeScript', [{
    script: `
      const overlayWindow = UIWindow.alloc().initWithFrame(UIScreen.mainScreen.bounds);
      overlayWindow.windowLevel = UIWindowLevelAlert + 1;
      overlayWindow.backgroundColor = UIColor.clearColor;
      overlayWindow.hidden = false;
      // 将悬浮层绑定到全局对象，方便后续调用
      objc_setAssociatedObject(UIAutomation, "highlightOverlay", overlayWindow, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
      return true;
    `,
    args: []
  }]);
}

// 显示点击高亮
async function showTapHighlight(driver, x, y) {
  await driver.executeScript('mobile: executeScript', [{
    script: `
      const overlayWindow = objc_getAssociatedObject(UIAutomation, "highlightOverlay");
      // 移除之前的高亮视图
      overlayWindow.subviews.forEach(view => view.removeFromSuperview());
      // 创建高亮圆
      const highlightView = UIView.alloc().initWithFrame(CGRectMake(${x-20}, ${y-20}, 40, 40));
      highlightView.layer.cornerRadius = 20;
      highlightView.backgroundColor = UIColor.redColor.colorWithAlphaComponent(0.5);
      overlayWindow.addSubview(highlightView);
      // 0.5秒后自动隐藏
      dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 0.5 * NSEC_PER_SEC), dispatch_get_main_queue(), ^{
        highlightView.removeFromSuperview();
      });
    `,
    args: []
  }]);
}

// 使用示例：点击元素前先显示高亮
async function tapWithHighlight(driver, element) {
  const rect = await element.getRect();
  const tapX = rect.x + rect.width / 2;
  const tapY = rect.y + rect.height / 2;
  await showTapHighlight(driver, tapX, tapY);
  await element.tap();
}

注意事项： #

• 该方法依赖XCUITest的mobile: executeScript能力，需确保LambdaTest的Appium环境开启XCUITest驱动支持。
• 部分iOS版本或Appium版本可能对私有API调用有限制，需要实际测试验证兼容性。

内容的提问来源于stack exchange，提问作者Shailesh Chaudhari