一、項目介紹
Recorder 是一款 UI錄製 和 迴歸測試 工具，用於錄製瀏覽器頁面 UI 的操作。通過 UIRecorder 的錄製功能，可以在自測的同時，完成測試過程的錄製，生成 JavaScript 測試腳本代碼。迴歸測試過程中，可以利用生成的 JavaScript 測試腳本代碼，使用 Mocha 對自測過程進行回放，以達到零成本做自動化迴歸測試的目的（
需要地址的朋友關注轉發後，私信回覆：UI）。二、整體架構
三、底層依賴
Chrome Extension：Chrome 拓展程序是一個用 Web 技術開發增強瀏覽器功能的軟件，由 HTML、CSS、JavaScript、圖片等靜態資源組成打包的一個 .crx 後綴的壓縮包。UIRecorder 主要利用了 Chrome Extension 實現事件驅動、DOM 捕捉的能力。
NodeJS：Node.js 是一個基於 Chrome V8 JavaScript 引擎實現的 JavaScript 運行時。UIRecorder 主要利用其 http 模塊實現 Websocket 通信能力、利用其 fs 模塊實現生成腳本能力。
Selenium：Selenium 是一款主流的 Web UI 測試框架，是一款用於運行端到端功能測試的工具，且得到了各大瀏覽器廠商的支持。UIRecorder 主要利用其 WebDriver 服務能力實現端到端功能測試，並且 Selenium 支持各大主流瀏覽器，因此可以利用 Selenium 進行多瀏覽器兼容測試。
Mocha ：Mocha 是一款主流的 JavaScript 測試框架，包括多種測試風格腳本模版、執行庫、報告器等測試場景通用能力。UIRecorder 主要利用其 BDD 風格設計腳本模版，利用其執行庫功能進行場景迴歸測試，且將回歸測試的結果通過報告器進行數據提煉、渲染，多維度直觀呈現迴歸結果。
四、核心能力
事件驅動：UIRecorder 錄製功能中，Chrome Extension 基於 JavaScript 的 事件機制 進行全局事件監聽，當觸發事件操作時（click、keyDown等），記錄事件類型及當前操作節點信息。
DOM 捕捉：錄製過程中記錄的元素信息，Chrome Extension 基於 JavaScript 的 DOM 實現，記錄的信息主要包括 DOM 節點的標籤（tag）、屬性（attribute）、文本內容（text）、值（value）等。
WebSocket 通信：WebSocket 是一種網絡傳輸協議，可在單個 TCP 連接上進行全雙工通信。UIRecorder 主要利用 WebSocket 實現 Chrome Extension 與 Node Process 的通信，Chrome Extension 將錄製過程的相關指令、數據（事件類型、節點信息）傳輸至 Node Process。
生成腳本：Node Process 利用 Chrome Extension 傳輸的相關指令、數據，結合配置好的錄製腳本模版，生成對應的測試用例腳本。
WebDriver：Selenium 提供的 WebDriver 服務能力，符合 W3C WebDriver Protocol 規範，UIRecorder 執行迴歸測試時，可通過 http 請求的形式，調用瀏覽器並進行操作，且 WebDriver 會返回對應響應信息。
多瀏覽器兼容：Selenium 的 WebDriver 服務支持各大主流瀏覽器，包括 Chrome、Firefox、IE 等，採用 Selenium 進行迴歸測試時，可同時測試多瀏覽器兼容性。
執行庫：UIRecorder 進行迴歸測試的執行庫基於 Mocha 實現，其功能主要是將測試用例腳本按照一定的規則處理、執行，返回對應的執行結果。
報告器：執行庫返回的執行結果，可經過報告器進行數據提煉，多維度展示。
閱讀更多 正經程序猿90 的文章
