目录

• 一、背景
• 二、实现原理
• • 1.UIRecorder的checkBrowser原理
  • 2.1主+3从原理

一、背景

之前浏览器适配测试的需求比较多，想着有没有一种方式执行一次就能完成多个浏览器类型的适配。UIRecorder的checkBrowser概念给了我灵感，既然一个checkBrowser可以，那多个不同类型的浏览器应该也是可以实现的，遂着手实践一把试试看。

二、实现原理

1.UIRecorder的checkBrowser原理

不知说的对不对，通过看源码感觉是这样的……

1. chrome插件crx的background.js通过websocket与UIRecorder的本地服务建立连接
2. UIRecorder在建立连接时发送config初始化信息对crx和录制浏览器进行一些基本信息的初始化，并启动checkBrowser检查浏览器
3. crx将前端捕捉到的页面操作传递给UIRecorder
4. UIRecorder将页面操作进行解析、合并等处理，转化为webdriver支持的协议，通过chromedriver驱动检查浏览器执行与录制浏览器相同的操作

2.1主+3从原理

根据UIRecorder的检查浏览器机制，尝试改出了1主+3从的适配测试模式，即1个录制浏览器+3个同步浏览器，支持不同浏览器类型，从而达到主浏览器执行一遍，即完成另外3中浏览器适配的测试效果。

1. 若要支持多浏览器类型，仅用chromedriver驱动就不够了，比如firefox、IE、edge，需要使用不同的driver驱动
2. 编写本地服务程序，管理不同浏览器类型的driver、启停与事件操作；与UIRecorder进行通信，接收UIRecorder的启动、页面操作指令等消息，并转化为webdriver支持的命令，分发给从浏览器进行命令执行
3. 修改UIRecorder的start.js文件，在saveCmd中将命令转发给本地服务程序（这样并不是有什么特殊原因，二是我的JS很渣，这样对js文件改动最小……而我的本地服务程序是Java写的，更熟悉一些，折腾起来更顺手）
   现在已经部署到搭建的F2etest平台上了，免去了本地环境的部署及依赖，在线就能使用，大致就这些吧，很多细的点想不起来了，等想起来再补充……
   下面是实现后的效果（上左为chrome、上右为IE、下左为edge、下右为Firefox），压缩后显示效果有点渣，凑活看吧，大概是这个意思，IE有很多膈应人的问题，后续再看看修吧，最近是没时间整了……
   
   最后，感谢UIRecorder的各位大神，下面是大神的连接，膜拜~

UIRecorder传送门