UI Recorder

Posted 2021-03-18 wyl-520

UI Recorder

 

macaca手机脚本录制介绍：https://www.jianshu.com/p/c9b4914a6946

UI recorder部署在Git hub上：https://github.com/alibaba/uirecorder

UI recorder功能详解：https://www.cnblogs.com/xiaoxi-3-/p/7501288.html

UI Recorder + Selenium standalone server 环境搭建：

https://www.jianshu.com/p/f7b11da864fa

https://www.yuque.com/artist/uirecorder/zslbnp

 

 

一、前言：

UI Recorder 是一款零成本UI自动化录制工具，类似于Selenium IDE.

UI Recorder 要比Selenium IDE更加强大！

UI Recorder 非常简单易用.

二、作用：
1、要解决的问题：
自测需要在多个浏览器下重复进行回归
需求变更时，需要多次进行回归大量的功能点
传统自动化脚本编写成本太高
2、UI Recorder的特点：
零成本的自动化解决方案：完全无干扰录制，让开发在自测过程中就能同步录制出自动化
本地脚本生成，便于二次修改及定制
丰富的断言功能
支持数据Mock
支持公共用例
支持执行截图

三、安装

步骤一：安装NodeJs---手动安装

https://nodejs.org/dist/latest-v8.x/    

注意：(version >= v7.x)

 

 

 

步骤二：安装chrome

请勿安装破解版，如已安装，请跳过此步骤。

 

步骤三：安装npm

NPM 是 NodeJS 自带的包管理器，可以批量下载指定包的指定版本。

npm -v

 

由于 npm 是国外网络环境，可能被墙或下载速度较慢，可以使用 cnpm , 下载速度更快。运行以下命令安装 cnpm：

淘宝镜像命令：npm install -g cnpm --registry=https://registry.npm.taobao.org（正常情况下也可不用）

 

注：更多 npm 指令可参考 https://www.runoob.com/nodejs/nodejs-npm.html

步骤四：安装java- --jdk环境

 

 

步骤五：安装UI Recorder及其相关依赖

cnpm install uirecorder mocha -g

 

cnpm install jwebdriver expect.js mocha-generators faker chai --save-dev

 

npm ls uirecorder -g

 

步骤六：安装服务Selenium standalone server

npm install selenium-standalone -g

 

步骤七：安装Mocha 单元测试框架（发音"摩卡"）

依次执行cmd命令：

npm install mocha -g

 

npm install jwebdriver expect.js mocha-generators faker --save-dev

 

npm install jwebdriver chai faker --save-dev

 

步骤八：初始化配置UI Recorder

执行cmd命令：uirecorder init

初始化配置,第一次试用，可一直回车，IP默认为127.0.0.1，端口默认为4444，浏览器我选择了chrome。

 

 

 

 

 

步骤九：录制脚本

执行cmd命令：uirecorder start

开始录制脚本，根据需要自行填写，其他选项为一直回车均为默认值。

 

这时候会同时打开校验浏览器和录制浏览器

 

 

接下来对需要录制的项目进行操作开始录制：https://www.tmall.com/

 

每一次录制都会提示：执行成功

 

 

 

结束录制后，可在文件夹./sample/目录下看到刚才录制的脚本。

 

步骤十：回放脚本

1、启动server（这里需要下载selenium-server-standalone的jar包：https://selenium-release.storage.googleapis.com/index.html）：java -jar .selenium-server-standalone-3.9.1.jar

 

 

2、回放脚本

执行cmd命令：mocha sample/test.spec.js

 

提示没有Jquery模块，需要安装：npm install jquery

 

再次执行：mocha sample/test.spec.js

 

即可在cmd窗口中查看回放脚本的步骤，执行时间，执行结果等。

 

步骤十一：运行测试用例

1、运行所有脚本:run.bat

2、运行单个脚本:run.bat sample/test.spec.js

即可在cmd窗口中查看运行脚本的步骤，执行时间，执行结果等。

 

 

步骤十二：查看测试报告

运行脚本后，会自动保存测试报告，在目录reports下index.html、index.xml、index.json

 

 

如何搭建webdriver+selenium+nodejs自动化测试框架

1、安装nodejs程序包

2、打开nodejs

　从开始程序中选择Node.js--->Node.js command prompt

3、在命令窗口输入以下命令

 一、npm install webdreverio -g

 二、npm install selenium-standalone@latest -g

4、安装selenium服务，在命令窗口输入以及下命令

selenium-standalone install

此时会报错，告诉你IE和谷歌驱动安排不成功

解决方法：新此目录下的C:UserssaberAppDataRoaming pm ode_modulesselenium-standalone.selenium的chromedriver和iedriver文件夹替换掉

5、配置环境变量

　编辑用户变量：变量名：PATH

　变量值：C:UserssaberAppDataRoaming pm

　新建系统变量：变量名：node_path

　变量值：C:UserssaberAppDataRoaming pm ode_modules

6、开启selenium服务，在命令窗口输入以下命令

　selenium-standalone start

7、打开cmd窗口，输入脚本的位置

8、运行自动化测试脚本

 

npm未能加载Visual C++组件

如果报：MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”。

错误原因：缺少windows构建插件

以管理员身份运行：Windows PowerShell

解决方法：npm install --global --production windows-build-tools  （全局安装windows构建工具）

npm install -g node-gyp