UIRecorder的安装及使用踩坑

一、UIRecorder 是什么

UIRecorder 是一款 UI录制 和 回归测试工具，用于录制浏览器页面 UI 的操作。通过 UIRecorder 的录制功能，可以在自测的同时，完成测试过程的录制，生成 JavaScript 测试脚本代码。回归测试过程中，可以利用生成的 JavaScript 测试脚本代码，使用 Mocha 对自测过程进行回放，以达到零成本做自动化回归测试的目的。

二、UIRecorder 的优点

• 零成本的自动化解决方案：完全无干扰录制，让开发在自测过程中就能同步录制出自动化。

• 测试报告直观：测试结果会生产 HTML 格式的报告文件，且每一个核心步骤都会自动截图，便于通过截图直观地分析报错原因。

• 测试多浏览器兼容性：通过 Chrome 浏览器一端录制生成的测试用例脚本，可以在 Firefox、IE、Opera 等浏览器多端运行回归测试。

CSDN安装教程
官方文档
GitHub地址

三、环境搭建

3.1、NodeJS

推荐node 12.x以上版本

3.2、Chrome浏览器和WebDriver

chrome默认安装路径C:\Program Files (x86)\Google\Chrome\Application
点击安装chromeDriver
注意：
1.chromeDriver版本需要和chrome浏览器版本一致或者大版本保持一致
2.解压后chromeDriver.exe包可以放到任何位置，建议和chrome浏览器安装路径保持一致
3.配置chromeDriver的环境变量Path路径

3.3、NPM

由于 npm 是国外网络环境，可能被墙或下载速度较慢，可以使用 cnpm , 下载速度更快。运行以下命令安装 cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org

3.4、JDK

JDK安装教程

3.5、UIRecorder

安装 UIRecorder、mocha、macaca-reporter
cnpm install uirecorder mocha macaca-reporter -g
检查安装情况

cnpm list uirecorder -g
cnpm list mocha -g
cnpm list macaca-reporter -g

3.6 安装web测试工具selenium及其依赖

cnpm install selenium-standalone@latest -g   #安装selenium-standalone
selenium-standalone install  #安装selenium-standalone依赖

四、录制脚本

4.1、初始化工程

mkdir uirecorder_test
cd uirecorder_test
uirecorder init // 默认设置的话，一路回车就可以

image.png

4.2、开始录制。

新建测试用例录制：

uirecorder start

录制浏览器会自动打开，注意本地 hosts 配置 127.0.0.1 localhost

image.png

4.3 启动遇到的问题

4.3.1 install_util.cc找不到MachineLevelUserCloudPolicyEnrollmentToken

需要修改注册表，点击查看教程

4.3.2 Message: unknown error: Chrome failed to start: crashed

注意：chrome文件夹删除后相关书签等会一并删除，建议备份或者删除后可以正常启动后再从回收站还原

image.png

踩坑记录：
1.node版本不匹配问题，建议升级到node.js 10以上，第一次用node-v10安装出错，升级到node-v12成功
2.初始化项目uirecorder start在cmd窗口无法执行，配置结束最后无法自动调起浏览器，建议打开gitbash窗口执行
3.运行单个脚本run.bat sample/test.spec.js直接跳过并未执行回放，且只能在cmd窗口下执行，gitbash下执行找不到该命令
4.运行所有脚本run.bat只能在cmd窗口下执行，gitbash下找不到该命令
5. 安装WebDriverselenium-standalone install需要翻墙否则有些包无法下载导致出错。

总结

环境准备：
    安装Nodejs（version>=12）
    安装chrome+chromeDriver（两者版本一致）
    安装UIRecorder
PC录制：
    1.初始化工程  uirecorder init（需在git Bash下执行）
    2.开始录制 uirecorder start
    3.启动WebDriver服务
        cnpm install selenium-standalone@latest -g   #安装selenium-standalone
        selenium-standalone install  #安装selenium-standalone依赖
        selenium-standalone start  #启动selenium-standalone
        mocha sample/test.spec.js   #新开终端使用mocha回放（失败）
        uirecorder start sample/test.spec.js    #使用uirecorder回放并继续录制（成功）
    4.运行测试用例/录制的脚本(需在CMD窗口下执行)（需要先启动webDriver服务 selenium-standalone start）
        运行所有脚本: source run.sh ( Linux|Mac ) 或 run.bat ( Windows )
        运行单个脚本: source run.sh sample/test.spec.js ( Linux|Mac ) 或 run.bat sample/test.spec.js ( Windows )
    5.获得测试报告和单步截图

        ./reports/index.html

        ./reports/index.xml (JUnit)

        ./reports/index.json

        ./screenshots/