錄制原理
一、原理流程圖
錄制功能主要由 Chrome Extension 和 Node Process 兩部分組成：
Chrome Extension 會對當前瀏覽器進行全局事件監聽，當觸發某個事件（比如 click）時，即獲取當前操作元素的節點信息，同時通過 WebSocket 發送指令（開始錄制、錄制、結束錄制）、數據（事件類型、節點信息）至 Node Process。
Node Process 接收到 Chrome Extension 的請求指令、數據，將其記錄在一個數組中，當 Chrome Extension 發起結束錄制指令時，結合記錄隊列和配置的腳本模版，生成測試用例腳本至指定目錄（如 sample/test.spec.js ）。
1.1 事件驅動
UIRecorder 的錄制功能基於事件驅動，默認觸發某個事件的操作行為，都作為有效操作記錄下來。記錄一系列的操作行為，即記錄一系列的事件行為。
1.2 捕獲元素
UIRecorder 事件操作的元素信息，基於 DOM 進行定位，UIRecorder 主要選擇 CSS Selector 的方式進行定位，捕獲元素信息主要包括標簽（tag）、屬性（attribute）、文本內容（text）、值（value）。
1.3 Websocket 通信
WebSocket 是一種網絡傳輸協議，可在單個 TCP 連接上進行全雙工通信。UIRecorder 主要利用 WebSocket 實現 Chrome Extension 與 Node Process 的通信，Chrome Extension 將錄制過程的相關指令、數據（事件類型、節點信息）傳輸至 Node Process。
1.4 生成腳本
Chrome Extension 會向 Node Process 發送指令、數據。指令主要包括開始錄制、錄制、結束錄制：開始錄制時，Node Process 會初始化一個數組；錄制過程中，將數據（事件類型、元素信息）push 至數組中；結束錄制時，將數組與定義好的腳本模版結合，生成測試用例腳本。
其中，不同事件類型會配置不同腳本模版，結合元素信息及腳本模版，即可生成該操作行為對應的回歸腳本代碼。
二、更多參考
Node.js http 模塊：http://nodejs.cn/api/http.html Node.js fs 模塊：http://nodejs.cn/api/fs.html DOM：https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduction