一、整体架构

1.1 底层依赖

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 风格设计脚本模版，利用其执行库功能进行场景回归测试，且将回归测试的结果通过报告器进行数据提炼、渲染，多维度直观呈现回归结果。

1.2 核心能力

事件驱动：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 实现，其功能主要是将测试用例脚本按照一定的规则处理、执行，返回对应的执行结果。

报告器：执行库返回的执行结果，可经过报告器进行数据提炼，多维度展示。

1.3 应用层

录制功能：通过无干扰的形式，进行业务场景测试的同时，将测试的操作行为录制下来，生成测试用例，供回归测试使用。

回归功能：执行回归测试脚本，输出对应的执行报告。

数据可视化：提取多个报告数据，从时间、业务等维度度量产品质量。

二、更多参考

Chrome-plugin-develop：https://www.yuque.com/artist/aori6e/brhggm
NodeJs：https://nodejs.org/en/
Selenium：https://www.seleniumhq.org/
Mocha：https://mochajs.org/
如何实现一个简易版的 Mocha：https://www.yuque.com/artist/aori6e/vt4171
WebSocket：https://en.wikipedia.org/wiki/WebSocket
macaca-reporter：https://macacajs.github.io/macaca-reporter/zh/guide/