Macaca Macaca 录制器实现原理

达峰的夏天 · 2017年06月04日 · 最后由天晓回复于 2018年04月02日 · 3275 次阅读

Macaca 提供多端录制回放工具 UIRecorder，录制回放工具无疑是最受用户欢迎的工具。录制是生产用例最低成本的方式，测试用例在这个过程中已经变成了 “中间产物”。

跨多端设计

UIRecorder 支持 PC 和移动端，能够支持所有平台是因为 UIRecorder 在操作层和 Webdriver 服务端做了良好的解耦设计。UIRecorder 在 PC 端重度依赖 Chrome Extension 的事件拦截，移动端直接则与 Macaca Server 通信。

运行原理

启动 Macaca Server，提供 Webdriver 服务
UIRecorder 在启动时会启动 ChromeDriver 服务
并加载内置的 Chrome 扩展程序

事件处理

用户端事件相对复杂的是 drag 手势，当操作左侧截图图片时，会执行如下的事件处理。

screenshot.addEventListener('click', function(event) {
  var upX = event.offsetX, upY = event.offsetY;
  var clickDuration = new Date().getTime() - downTime;
  if (Math.abs(downX - upX) < 20 && Math.abs(downY - upY) < 20) {
    var cmdData = getNodeInfo(Math.floor(upX * scaleX), Math.floor(upY * scaleY));
    if (isSelectorMode) {
      if (cmdData.path) {
        showExpectDailog(cmdData.path);
      }
    } else {
      var pressTime = new Date().getTime() - downTime;
      cmdData.duration = (pressTime / 1000).toFixed(2);
      saveCommand(clickDuration> 500 ? 'press' : 'click', cmdData);
    }
    downTime = 0;
  }
});
screenshot.addEventListener('mousedown', function(event) {
  downX = event.offsetX;
  downY = event.offsetY;
  downTime = new Date().getTime();
  event.stopPropagation();
  event.preventDefault();
});
screenshot.addEventListener('mouseup', function(event) {
  var upX = event.offsetX, upY = event.offsetY;
  if (downX >=0 && downY >= 0 &&
    upX >= 0 && upY >= 0 &&
    (Math.abs(downX - upX) >= 20 || Math.abs(downY - upY) >= 20)) {
    var dragTime = new Date().getTime() - downTime;
    saveCommand('drag', {
      fromX: Math.floor(downX * scaleX),
      fromY: Math.floor(downY * scaleY),
      toX: Math.floor(upX * scaleX),
      toY: Math.floor(upY * scaleY),
      duration: (dragTime / 1000).toFixed(2)
    });
    downTime = 0;
  }
  event.stopPropagation();
  event.preventDefault();
});
document.addEventListener('mouseup', function(event) {
  if (downTime !== 0) {
    var upX = event.clientX < screenshot.offsetLeft ? 0 : screenshot.width -1;
    var upY = event.clientY;
    var dragTime = new Date().getTime() - downTime;
    saveCommand('drag', {
      fromX: Math.floor(downX * scaleX),
      fromY: Math.floor(downY * scaleY),
      toX: Math.floor(upX * scaleX),
      toY: Math.floor(upY * scaleY),
      duration: (dragTime / 1000).toFixed(2)
    });
    downTime = 0;
  }
});
screenshot.addEventListener('mousemove', function(event) {
  var bestNodeInfo = {
    node: null,
    boundSize: 0
  };
  var x = Math.floor(event.offsetX * scaleX);
  var y = Math.floor(event.offsetY * scaleY);
  getBestNode(appTree, x, y, bestNodeInfo);
  var node = bestNodeInfo.node;
  if (node) {
    var offsetLeft = screenshot.offsetLeft;
    var offsetTop = screenshot.offsetTop;

    var left = node.startX / scaleX;
    var top = node.startY / scaleY;
    var width = node.endX / scaleX - left;
    var height = node.endY / scaleY - top;

    showLine(left + offsetLeft, top + offsetTop, width, height);
  } else {
    hideLine();
  }
});
document.addEventListener('keypress', function(event) {
  if(!isLoading && !isShowDialog){
    showTextDailog(event.key);
    event.stopPropagation();
    event.preventDefault();
  }
});