前端自动化测试之UI Recorder

司格特

UI Recorder是一款零成本的整体自动化测试解决方案，一次自测等于多次测试，测一个浏览器等于测多个
浏览器！

自测 = 自动化测试：对于开发人员来讲，自测是开发流程中缺一不可的过程，我们要实现的目标就是自测
过程中即可同步的录制出自动化脚本，实现真正的零成本自动化
无干扰录制：所作操作均无需交互干扰，鼠标、键盘、alert弹框、文件上传，完全按照正常自测流程操作即
可(以下操作除外：悬停事件、断言、变量)
本地生成脚本：录制的脚本存储在用户本机，用户可以自行在录制的基础上进行修改定制，更自由更开放
丰富的断言：支持以下断言类型，val、text、displayed、enabled、selected、attr、css、url、title、cookie、
localStorage、sessionStorage
支持数据Mock：我们支持Faker变量功能，支持强大的数据Mock
支持公共用例: 用例之间允许相互引用，可以将某些公用的操作步骤录制为公用用例，以进一步提升录制效率
支持执行截图：每次执行后，允许生成截图日志，以方便出问题时排查诊断
简单来说就是把你每次自测的流程录制下来，而且是全可视化的，然后在各种浏览器上自动回放，大大简化
了每次手工测试的麻烦，更多介绍请观看视频教程

下面，就是到了本人最爱的动手环节

准备工作:

NodeJs环境
请自行先安装好nodejs环境，在命令行执行node -v命令成功说明已经安装成功
JAVA环境
UI Recorder
WebDriverServer
安装UI Recorder

npm install uirecorder -g

安装uirecorder全局命令

uirecorder init

一路回车，遇到WebDriver域名或IP的时候填写127.0.0.1，端口4444，浏览器列表根据自己需要填写，多个
浏览器用,隔开，默认chrome,ie 11



uirecorder start  

最后启动chorme浏览器开始脚本录制，录制的方法和技巧上面的优酷视频都有说明，就不再累述了，下面主
要介绍搭建WebDriverServer
搭建WebDriverServer

搭建webdriver server的方式可以是：Selenium standalone server、Selenium Grid、F2etest中的一种，这里只
介绍第一种单机的方式，F2etest的方式部署浏览器云请看前端自动化测试之多浏览器兼容测试平台F2etest(
带视频教程).
Selenium Server & IEDriverServer

ChromeDriver

↑↑↑打不开的可以看看自动更新Google Hosts和利用shadowsocks科学上网(提供免费帐号)两篇文章

Mac环境：

本文只介绍Chrome相关的测试，其他浏览器都是类似的，只要部署好server，不同的浏览器只是使用不同的
driver而已， Mac下面我们需要下载chromedriver、selenium-server-standalone.jar


启动服务器 java -jar selenium-server-standalone-2.53.1.jar

双击打开chromedriver
mac下我没有配置环境变量path所以直接打开的驱动，如果配置了驱动的路径访问server的时候会自动打开驱
动，具体可参考下面windows教程

最后在刚才录制脚本的目录执行:
npm install mocha -g
npm install jwebdriver expect.js mocha-generators faker --save-dev
mocha *.spec.js

我上面用的cnpm命令是淘宝提供的npm镜像，让npm安装模块包更快

Windows环境：


Windows下面的话selenium-server-standalone.jar这个是通用的，另外需要单独下载chrome和ie的windows版
的driver   然后把driver文件所在的目录配置到Path环境变量中，以便seleniumServer能通过文件名直接找到文
件启动对应的driver，验证有没有配置环境变量成功只需要在cmd命令中随便找个目录输入driver的文件名执
行下，看能否成功找到文件执行

启动服务器 java -jar selenium-server-standalone-2.53.1.jar


这时候不需要手动运行driver，selenium会自动根据请求启动对应的driver文件，所以上面必须配置环境变量

在刚才录制的脚本目录执行:
npm install mocha -g
npm install jwebdriver expect.js mocha-generators faker --save-dev
mocha *.spec.js


Windows下IE注意事项，否则IE可能无法启动：

针对windows vista和windows 7上的IE7或者更高的版本，必须在IE选项设置的安全页中，4个区域的启用保护
模式的勾选都去掉（或都勾上），即保持四个区域的保护模式是一致的。如下图所示：

针对IE10和更高的版本，必须在IE选项设置中的高级页中，取消增强保护模式。如下图所示：

针对IE11，需要修改注册表。如果是32位的windows，key值为

HKEYLOCALMACHINE\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BFCACHE

如果是64位的windows，key值为

HKEYLOCALMACHINE\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE
_BFCACHE

如果key值不存在，就添加。之后在key内部创建一个iexplorer.exe，DWORD类型，值为0，我的windows是64
位的，修改后的注册表如下图所示：