浏览器兼容性测试——UIRecorder的配置及使用

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

支持所有用户行为: 键盘事件, 鼠标事件, alert, 文件上传, 拖放, svg, shadow dom
支持无线native app录制, 基于macaca实现: https://macacajs.com/
无干扰录制: 和正常测试无任何区别，无需任何交互
录制用例存储在本地
支持丰富的断言类型: val,text,displayed,enabled,selected,attr,css,url,title,cookie,localStorage,sessionStorage
支持数据mock: fake.js
支持公共测试用例: 允许用例中动态调用另外一个
支持并发测试
支持多国语言: 英文, 简体中文, 繁体中文
支持HTML报告和JUnit报告
全系统支持: windows, mac, linux
支持多运行时测试, 例如：开发测试、预发测试
基于Nodejs的测试用例: jWebDriver

二、测试环境搭建
说明：UIRecorder的安装教程有很多，但在实际安装过程中教程并不适用，遇到问题很多，因此整理一份成功安装的详细步骤

1、安装Nodejs
版本7.0以上

2、安装Chrome浏览器
请勿安装破解版。为避免稍后UIrecorder的版本可能和chrome版本不符合，两者都安装最新版，或者调整UIRecorder版本

3、初始化配置
1) 在Nodejs安装目录下新建项目文件夹：test，用来存放测试项目

         2) 由于npm被墙，使用镜像cnpm，安装cnpm，输入：npm install cnpm -g –registry=https://registry.npm.taobao.org

         3) 从淘宝镜像安装uirecorder全局命令，输入：cnpm install uirecorder mocha -g –registry=https://registry.npm.taobao.org

         4) 安装服务Selenium standalone server，命令行窗口输入：cnpm install selenium-standalone -g

         5) 安装Mocha 单元测试框架，依次在命令行窗口输入：cnpm install mocha -g、npm install jwebdriver expect.js mocha-generators faker --save-dev、npm install jwebdriver   chai faker --save-dev    

         6) 进入Nodejs安装目录下，找到\npm_modules\uirecorder\bin\uirecorder文件，将第23行语句var nocolor = string.replace(/(\[\d+[mdc]|\[K)/gi, '');改为var nocolor =string.toString().replace(/(\[\d+[mdc]|\[K)/gi, '');

         4) 进行初始化配置UI Recorder，输入：uirecorder init

         5) 第一次试用可一直回车，IP默认为127.0.0.1，端口默认为4444，浏览器默认为Chrome，ie 11。结束后可在UI Recorder安装目录下查看config.json，根据测试浏览器，可编辑config.json，每次更改结束需要重新初始化uirecorder

         6) 安装依赖文件：cnpm install

4、录制脚本
1) 打开命令行窗口，输入：uirecorder start sample/test.spec.js （测试脚本为sample目录下的test.spec.js文件）

          2) 录制开始，提示输入脚本的所在目录和文件名，提示是否打开浏览器，提示是否把浏览器最大化 ，一直回车均为默认值（开始录制时将开启两个浏览器，分别用于录制和校验）

          3)  输入和汽官网URL，回车

          4) 随后进入和汽官网首页的录制页面，开始录制的步骤，基于测试点执行测试，可看到页面提示执行是否成功。完成一个流程后，点击结束录制

          5) 录制过程中，命令行窗口可查看相关录制步骤和结果。录制结束后，可在文件夹sample中看到测试脚本，并可对其进行修改

5、部署webdriver服务
1)另外开一个命令行窗口启动server，进入之前创建的文件夹test，命令行窗口输入：cnpm run installdriver

           2)  命令行窗口输入：cnpm run server，出现Selenium started 表示启动成功，请勿关闭窗口

6、执行测试用例（回放脚本）
1) 如果运行所有脚本，UI Recorder根目录下打开命令窗口，输入：run.bat

           2)  如果运行单个脚本，UI Recorder目录下打开命令窗口，输入：run.bat sample/test.spec.js ，可在命令行窗口查看运行脚本的步骤、执行时间、执行结果等

7、查看测试报告和单步截图
1) 运行脚本后将自动保存测试报告，可依次查看./reports/index.xml，./reports/index.html，./reports/index.json

           2) 打开 ./screenshots/

浏览器兼容性测试——UIRecorder的配置及使用

猜你喜欢