Macaca UI Recoder

Macaca 提供多端錄制回放工具 UIRecorder，錄制回放工具無疑是最受使用者歡迎的工具。錄制是生産用例最低成本的方式，測試用例在這個過程中已經變成了“中間産物”。

跨多端設計

UIRecorder 支援 PC 和移動端，能夠支援所有平台是因為 UIRecorder 在操作層和 Webdriver 服務端做了良好的解耦設計。UIRecorder 在 PC 端重度依賴 Chrome Extension 的事件攔截，移動端直接則與 Macaca Server 通信。

運作原理

https://testerhome.com/uploads/photo/2017/b11155d0-0b63-4121-a3d0-7536ba910549.png!large

1. 啟動 Macaca Server，提供 Webdriver 服務
2. UIRecorder 在啟動時會啟動 ChromeDriver 服務
3. 并加載内置的 Chrome 擴充程式

https://testerhome.com/uploads/photo/2017/c04e0b7f-fe22-4016-99a8-1e1303d17b83.png!large

事件處理

使用者端事件相對複雜的是 

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();
  }
});
           

錄制是雙刃劍

錄制工具可以量産用例，将測試用例的生産成本降到最低，但從實質上看産生的測試用例可維護性也降低了，同時無法子產品化，二次維護成本卻提高了，隻能重新錄制。對于功能固化，不需要頻繁維護的場景可以适當使用錄制。

• https://github.com/alibaba/uirecorder