UIRecorder 学习了解

UIRecorder 学习了解
Uirecorder使用手册
- Install
1. Install NodeJs (version >= v7.x)
https://nodejs.org/

https://nodejs.org/download/release/v8.9.3/

sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share} (Mac, Linux)
1. Install chrome
https://www.google.com/chrome/
1. Install UI Recorder
npm install uirecorder mocha -g

npm镜像源可以使用淘宝地址npm config set registry http://registry.npm.taobao.org

PC record
1. 初始化测试项目
创建一个项目目录，然后进入这个目录执行

uirecorder init
1. 开始录制脚本
进入刚才的项目目录，执行

uirecorder sample/***.spec.js
1. Start WebDriver Server
开启一个新窗口，本地启动方式为

npm run server(需要进入到项目目录执行)

webdriver server有多种启动方式，详见如下链接：

Selenium Grid: https://github.com/SeleniumHQ/selenium/wiki/Grid2

F2etest: https://github.com/alibaba/f2etest
1. 运行测试用例
Run all case: source run.sh ( Linux|Mac ) or run.bat ( Windows )

Run single case: source run.sh sample/test.spec.js ( Linux|Mac ) or run.bat sample/test.spec.js ( Windows )
1. 查看报告
在项目目录中会自动生成报告目录，报告有多种格式

./reports/index.html

./reports/index.xml (JUnit)

./reports/index.json

./screenshots/

录制脚本如果已经存在，系统会提示继续录制或者重新录制。如果继续录制会先执行一次上一次的录制过程，引导到最后一个录制的页面。

录制面板介绍：
1. 属性开关：对于某些特殊场景，可以通过灵活的开启或关闭属性项，不同步骤选择不同的PATH生成策略，例如：某些控件不太适合用文本定位，就可以临时先关闭text属性项
2. 属性值黑名单: 可以即时配置属性值黑名单，立即生效，用来解决随机属性值的问题，修改后记得按一下回车键，让变更立即生效，格式如下：/aaa_bbb_d+/
3. 执行JS: 可以用来在浏览器端执行一些扩展功能，例如：document.title=123;
4. 添加延迟：某些操作后，会发起异步请求，异步请求的完成时间不太确定时，可以通过添加延迟时间提升稳定性，时间单位是毫秒
5. 脚本跳转：用来跳到新的URL，或者跳到另外一个脚本，一般情况下用来引用公共脚本，例如登录操作。
断言类型：我们提供子丰富的断言类型，不同的控件类型要选择合适的断言类型，这里针对每个断言类型进行介绍
1. val: 断言输入框的值
1. text: 断言文本的内容
1. displayed: 断言控件是否处于显示状态
expect:displayed,#add-plan-contiune,equal,true
1. enabled: 断言当前控件是否可用(没有禁用)
expect:enabled,#add-plan-contiune,equal,true
1. selected: 断言当前控件是否打勾选中了
1. attr: 断言当前DOM的属性值
可以对name属性进行断言
1. css: 断言当前DOM的CSS值
1. url: 断言当前网页的URL地址
获取地址栏的url信息进行断言
1. title: 断言当前网页的title标题
1. cookie: 断言当前网页的cookie值
1. localStorage: 断言当前网页的localStorage
2. sessionStorage: 断言当前网页的sessionStorage
3. alert: 断言弹出的alert窗口的提示文本
4. jscode: 在浏览器端执行自定义的JS代码，断言JS代码的返回值
点击面板中的js代码后，将焦点放在日期输入框中，输入js代码document.getElementById("cp-end-date").value=”2019-01-01”
1. count: 断言控件匹配的数量
2. imgdiff: 断言当前控件的图片差异，可以自定义图片差异的百分比
图片对比需要安装GraphicsMagic，使用gm检查是否安装。

UIRecorder PC高级使用

如何解决属性值不稳定问题？

有很多开发会写一些随机的属性值，例如某些随机的id值，这种属性值会导致录制的脚本完全无法持续运行。

针对这个问题，我们提供了3套解决方案
1. 属性值黑名单正则: 可以编写正则表达式过滤掉那些不稳定的属性值，例如：/attr_value_d+/，如果需要过滤多种属性值，可以这么写：/attr_value1_d+|attr_value2_d+/。这个值可以在uirecorder init命令中进行配置，也可以在录制过程中的录制面板上即时修改。
2. 属性开关：在录制面板上，可以通过临时切换不同属性项的开启和关闭，灵活组合出适合自己业务的PATH生成方案，例如某些场景下不适合用text，就可以临时将text属性项关闭掉。
3. class值黑名单正则：对于某些不稳定的class值，我们同样提供了黑名单功能，此功能需要通过uirecorder init命令进行配置。
变量功能怎么用？

编辑config.json
```
{
```
```
    "recorder": {
```
```
        ...
```
```
    },
```
```
    "webdriver": {
```
```
        ...
```
```
    },
```
```
    "vars": {
```
```
        "productId": "123456",
```
```
        "productName": "mp3"
```
```
    }
```
```
}
```
1. 开始页面输入: http://xxx.com/product?id={{productId}}
2. 录制界面中使用工具面创建新变量
1. 录制界面中使用工具面更新旧变量的值
2. 录制界面中使用工具面板跳转
3. URL: http://xxx.com/product?id={{productId}}
1. 录制界面中使用工具面板插入变量字符串: {{productName}} 或 aaa{{productName}}bbb
2. 断言中使用变量字符串: {{productName}} 或 aaa{{productName}}bbb
提示: 所有变量字符串均支持JS语法的模板字符串，例如：{{productName}}, ${new Date().getTime()}, ${parseInt(testVars.a)+parseInt(testVars.b)}

怎么录制及使用公共脚本？
1. 录制 commons/login.mod.js
2. 录制 sample/test.spec.js
3. source run.sh sample/test.spec.js ( Linux|Mac ) 或 run.bat sample/test.spec.js ( Windows )
公共脚本一定要放在项目的commons目录中。

如何录制文件上传步骤？
1. UI Recorder仅支持Native文件上传, 不支持FLASH上传
2. 直接点击<input type="file"> 或点击 <button role="upload">Upload file</button>, 占位按钮必需要用role或data-role标注为upload
3. 上传的文件必需保存在uploadfiles/文件夹中
如何断点调试生成的脚本？
1. 安装 Visual Studio Code ，然后打开它
2. 在vs code中打开项目根目录
3. 打开测试脚本, 添加断点
4. 按 F5 键执行脚本, 按 F10 键执行下一行
如何断言浏览器eval js代码后的结果？
1. 添加断言, 选择类型： jscode
2. 同步模式: return document.title
3. 函数模式:
4. 异步模式:
```
4.   function(){
```
```
5.       var str = "aaa";
```
```
6.       return str;
```
```
7.   }
```
```
9.   function(done){
```
```
10.      setTimeout(function(){
```
```
11.          done(123);
```
```
12.      }, 100);
```
```
13.  }
```
如何在断言前隐藏DOM结点?
1. uirecorder init
2. 在初始化断言前隐藏选项时，输入需要隐藏的css选择器
3. uirecorder start
4. UIRecorder会在断言前隐藏所有匹配的DOM结点，然后就可以断言那些隐藏在mask层后面的DOM
如何录制可选的点击?

某些步骤不是非常重要，但却偶尔会出现，这些步骤会总是断言为成功。
1. 按下'Alt'键
2. 点击目标DOM
如何使用图片对比功能?
1. 安装GraphicsMagick
brew install graphicsmagick (Mac)

sudo apt-get install graphicsmagick (Linux)

http://www.graphicsmagick.org/download.html (Windows)
1. �添加图片对比断言
选择断言类型: imgdiff

选择目标控件
1. 当业务变化时，我们可以通过以下命令更新基线图片
source run.sh sample/test.spec.js --rebuilddiff (Mac | Linux)

run.bat sample/test.spec.js --rebuilddiff (Windows)

如何导出原数据?

如果希望基于UIRecorder录制出来的步骤生成JAVA等别的语言自动化脚本，可以使用我们的原数据导出功能。

此功能可以在生成js语法的自动化脚本同时，也生成json格式的原数据。基于此json文件，我们就可以自由的翻译成任何语言的自动化脚本。
1. uirecorder start --raw
2. 录制完后，就可以获得2个文件: sample/test.spec.js, sample/test.spec.json
如何接入Jenkins？
1. 添加命令
2. 添加报告
```
2.   source ./install.sh
```
```
3.   source ./run.sh
```
JUnit: reports/index.xml

HTML: reports/index.html

国内用户可以通过oschina和cnpm提升部署效率，修改install.sh如下：
```
ls ~/nvm || git clone https://git.oschina.net/yaniswang/nvm.git ~/nvm
```
```
source ~/nvm/nvm.sh
```
```
export NVM_NODEJS_ORG_MIRROR="http://npm.taobao.org/mirrors/node"
```
```
nvm install v7.10.0
```
```
npm install --registry=https://registry.npm.taobao.org
```
如何失败时才生成截图？
1. 编辑文件：package.json, 确保mochawesome-uirecorder版本在1.5.22及以上
2. 在--reporter mochawesome-uirecorder后面添加： --reporter-options copyShotOnlyFail=true
Uirecorder使用手册

Install
1. Install NodeJs (version >= v7.x)
https://nodejs.org/

sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share} (Mac, Linux)
1. Install chrome
https://www.google.com/chrome/
1. Install UI Recorder
npm install uirecorder mocha -g

npm镜像源可以使用淘宝地址npm config set registry http://registry.npm.taobao.org

PC record

1.    初始化测试项目

创建一个项目目录，然后进入这个目录执行

uirecorder init

2.    开始录制脚本

进入刚才的项目目录，执行

uirecorder sample/***.spec.js

3.    Start WebDriver Server

开启一个新窗口，本地启动方式为

npm run server(需要进入到项目目录执行)

webdriver server有多种启动方式，详见如下链接：

Selenium Grid: https://github.com/SeleniumHQ/selenium/wiki/Grid2

F2etest: https://github.com/alibaba/f2etest

4.    运行测试用例

Run all case: source run.sh ( Linux|Mac ) or run.bat ( Windows )

Run single case: source run.sh sample/test.spec.js ( Linux|Mac ) or run.bat sample/test.spec.js ( Windows )

5.    查看报告

在项目目录中会自动生成报告目录，报告有多种格式

./reports/index.html

./reports/index.xml (JUnit)

./reports/index.json

./screenshots/

录制脚本如果已经存在，系统会提示继续录制或者重新录制。如果继续录制会先执行一次上一次的录制过程，引导到最后一个录制的页面。

录制面板介绍：
1. 属性开关：对于某些特殊场景，可以通过灵活的开启或关闭属性项，不同步骤选择不同的PATH生成策略，例如：某些控件不太适合用文本定位，就可以临时先关闭text属性项
2. 属性值黑名单: 可以即时配置属性值黑名单，立即生效，用来解决随机属性值的问题，修改后记得按一下回车键，让变更立即生效，格式如下：/aaa_bbb_d+/
3. 执行JS: 可以用来在浏览器端执行一些扩展功能，例如：document.title=123;
4. 添加延迟：某些操作后，会发起异步请求，异步请求的完成时间不太确定时，可以通过添加延迟时间提升稳定性，时间单位是毫秒
5. 脚本跳转：用来跳到新的URL，或者跳到另外一个脚本，一般情况下用来引用公共脚本，例如登录操作。
断言类型：我们提供子丰富的断言类型，不同的控件类型要选择合适的断言类型，这里针对每个断言类型进行介绍
1. val: 断言输入框的值
1. text: 断言文本的内容
1. displayed: 断言控件是否处于显示状态
expect:displayed,#add-plan-contiune,equal,true
1. enabled: 断言当前控件是否可用(没有禁用)
expect:enabled,#add-plan-contiune,equal,true
1. selected: 断言当前控件是否打勾选中了
1. attr: 断言当前DOM的属性值
可以对name属性进行断言
1. css: 断言当前DOM的CSS值
1. url: 断言当前网页的URL地址
获取地址栏的url信息进行断言
1. title: 断言当前网页的title标题
1. cookie: 断言当前网页的cookie值
1. localStorage: 断言当前网页的localStorage
2. sessionStorage: 断言当前网页的sessionStorage
3. alert: 断言弹出的alert窗口的提示文本
4. jscode: 在浏览器端执行自定义的JS代码，断言JS代码的返回值
点击面板中的js代码后，将焦点放在日期输入框中，输入js代码document.getElementById("cp-end-date").value=”2019-01-01”
1. count: 断言控件匹配的数量
2. imgdiff: 断言当前控件的图片差异，可以自定义图片差异的百分比
图片对比需要安装GraphicsMagic，使用gm检查是否安装。

UIRecorder PC高级使用

如何解决属性值不稳定问题？

有很多开发会写一些随机的属性值，例如某些随机的id值，这种属性值会导致录制的脚本完全无法持续运行。

针对这个问题，我们提供了3套解决方案
1. 属性值黑名单正则: 可以编写正则表达式过滤掉那些不稳定的属性值，例如：/attr_value_d+/，如果需要过滤多种属性值，可以这么写：/attr_value1_d+|attr_value2_d+/。这个值可以在uirecorder init命令中进行配置，也可以在录制过程中的录制面板上即时修改。
2. 属性开关：在录制面板上，可以通过临时切换不同属性项的开启和关闭，灵活组合出适合自己业务的PATH生成方案，例如某些场景下不适合用text，就可以临时将text属性项关闭掉。
3. class值黑名单正则：对于某些不稳定的class值，我们同样提供了黑名单功能，此功能需要通过uirecorder init命令进行配置。
变量功能怎么用？

编辑config.json
```
{
```
```
    "recorder": {
```
```
        ...
```
```
    },
```
```
    "webdriver": {
```
```
        ...
```
```
    },
```
```
    "vars": {
```
```
        "productId": "123456",
```
```
        "productName": "mp3"
```
```
    }
```
```
}
```
1. 开始页面输入: http://xxx.com/product?id={{productId}}
2. 录制界面中使用工具面创建新变量
1. 录制界面中使用工具面更新旧变量的值
2. 录制界面中使用工具面板跳转
3. URL: http://xxx.com/product?id={{productId}}
1. 录制界面中使用工具面板插入变量字符串: {{productName}} 或 aaa{{productName}}bbb
2. 断言中使用变量字符串: {{productName}} 或 aaa{{productName}}bbb
提示: 所有变量字符串均支持JS语法的模板字符串，例如：{{productName}}, ${new Date().getTime()}, ${parseInt(testVars.a)+parseInt(testVars.b)}

怎么录制及使用公共脚本？

1. 录制 commons/login.mod.js

2. 录制 sample/test.spec.js
3. source run.sh sample/test.spec.js ( Linux|Mac ) 或 run.bat sample/test.spec.js ( Windows )

公共脚本一定要放在项目的commons目录中。

如何录制文件上传步骤？
1. UI Recorder仅支持Native文件上传, 不支持FLASH上传
2. 直接点击<input type="file"> 或点击 <button role="upload">Upload file</button>, 占位按钮必需要用role或data-role标注为upload
3. 上传的文件必需保存在uploadfiles/文件夹中
如何断点调试生成的脚本？
1. 安装 Visual Studio Code ，然后打开它
2. 在vs code中打开项目根目录
3. 打开测试脚本, 添加断点
4. 按 F5 键执行脚本, 按 F10 键执行下一行
如何断言浏览器eval js代码后的结果？

1.    添加断言, 选择类型： jscode

2.    同步模式: return document.title

3.    函数模式:
```
4.   function(){
```
```
5.       var str = "aaa";
```
```
6.       return str;
```
```
7.   }
```
8. 异步模式:
```
9.   function(done){
```
```
10.     setTimeout(function(){
```
```
11.         done(123);
```
```
12.     }, 100);
```
```
13. }
```
如何在断言前隐藏DOM结点?
1. uirecorder init
2. 在初始化断言前隐藏选项时，输入需要隐藏的css选择器
3. uirecorder start
4. UIRecorder会在断言前隐藏所有匹配的DOM结点，然后就可以断言那些隐藏在mask层后面的DOM
如何录制可选的点击?

某些步骤不是非常重要，但却偶尔会出现，这些步骤会总是断言为成功。
1. 按下'Alt'键
2. 点击目标DOM
如何使用图片对比功能?

1.    安装GraphicsMagick

brew install graphicsmagick (Mac)

sudo apt-get install graphicsmagick (Linux)

http://www.graphicsmagick.org/download.html (Windows)

2.    �添加图片对比断言

选择断言类型: imgdiff

选择目标控件

3.    当业务变化时，我们可以通过以下命令更新基线图片

source run.sh sample/test.spec.js --rebuilddiff (Mac | Linux)

run.bat sample/test.spec.js --rebuilddiff (Windows)

如何导出原数据?

如果希望基于UIRecorder录制出来的步骤生成JAVA等别的语言自动化脚本，可以使用我们的原数据导出功能。

此功能可以在生成js语法的自动化脚本同时，也生成json格式的原数据。基于此json文件，我们就可以自由的翻译成任何语言的自动化脚本。
1. uirecorder start --raw
2. 录制完后，就可以获得2个文件: sample/test.spec.js, sample/test.spec.json
如何接入Jenkins？

1. 添加命令
```
2.   source ./install.sh
```
```
3.   source ./run.sh
```
4. 添加报告

JUnit: reports/index.xml

HTML: reports/index.html

国内用户可以通过oschina和cnpm提升部署效率，修改install.sh如下：
```
ls ~/nvm || git clone https://git.oschina.net/yaniswang/nvm.git ~/nvm
```
```
source ~/nvm/nvm.sh
```
```
export NVM_NODEJS_ORG_MIRROR="http://npm.taobao.org/mirrors/node"
```
```
nvm install v7.10.0
```
```
npm install --registry=https://registry.npm.taobao.org
```
如何失败时才生成截图？
1. 编辑文件：package.json, 确保mochawesome-uirecorder版本在1.5.22及以上
2. 在--reporter mochawesome-uirecorder后面添加： --reporter-options copyShotOnlyFail=true
相关阅读:
hadoop-2.7.3安装kafka_2.11-2.1.0
HBase数据快速导入之ImportTsv&Bulkload
hbase shell 基本操作
 SQLplus命令中删除键和翻页键不能用的问题
 SQL*Loader 的使用sqlldr和sqluldr2方法详解
 python连接oracle导出数据文件
 python零碎知识点一
 用Python输出一个Fibonacci数列
 问题总结——window平台下gruntower安装后无法运行的问题
 JavaScript学习笔记——浅拷贝、深拷贝
原文地址：https://www.cnblogs.com/Dream--/p/10681785.html

UIRecorder 学习了解

PC record

UIRecorder PC高级使用

如何解决属性值不稳定问题？

变量功能怎么用？

怎么录制及使用公共脚本？

如何录制文件上传步骤？

如何断点调试生成的脚本？

如何断言浏览器eval js代码后的结果？

如何在断言前隐藏DOM结点?

如何录制可选的点击?

如何使用图片对比功能?

如何导出原数据?

如何接入Jenkins？

如何失败时才生成截图？

PC record

UIRecorder PC高级使用

如何解决属性值不稳定问题？

变量功能怎么用？

怎么录制及使用公共脚本？

如何录制文件上传步骤？

如何断点调试生成的脚本？

如何断言浏览器eval js代码后的结果？

如何在断言前隐藏DOM结点?

如何录制可选的点击?

如何使用图片对比功能?

如何导出原数据?

如何接入Jenkins？

如何失败时才生成截图？