Uirecorder使用手册
- Install
- Install NodeJs (version >= v7.x)
sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share} (Mac, Linux)
- Install chrome
- Install UI Recorder
npm install uirecorder mocha -g
npm镜像源可以使用淘宝地址npm config set registry
PC record
- 初始化测试项目
创建一个项目目录,然后进入这个目录执行
uirecorder init
- 开始录制脚本
进入刚才的项目目录,执行
uirecorder sample/***.spec.js
- Start WebDriver Server
开启一个新窗口,本地启动方式为
npm run server(需要进入到项目目录执行)
webdriver server有多种启动方式,详见如下链接:
Selenium Grid:
F2etest:
- 运行测试用例
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 )
- 查看报告
在项目目录中会自动生成报告目录,报告有多种格式
./reports/index.html
./reports/index.xml (JUnit)
./reports/index.json
./screenshots/
录制脚本如果已经存在,系统会提示继续录制或者重新录制。如果继续录制会先执行一次上一次的录制过程,引导到最后一个录制的页面。
录制面板介绍:
- 属性开关:对于某些特殊场景,可以通过灵活的开启或关闭属性项,不同步骤选择不同的PATH生成策略,例如:某些控件不太适合用文本定位,就可以临时先关闭text属性项
- 属性值黑名单: 可以即时配置属性值黑名单,立即生效,用来解决随机属性值的问题,修改后记得按一下回车键,让变更立即生效,格式如下:/aaa_bbb_\d+/
- 执行JS: 可以用来在浏览器端执行一些扩展功能,例如:document.title=123;
- 添加延迟:某些操作后,会发起异步请求,异步请求的完成时间不太确定时,可以通过添加延迟时间提升稳定性,时间单位是毫秒
- 脚本跳转:用来跳到新的URL,或者跳到另外一个脚本,一般情况下用来引用公共脚本,例如登录操作。
断言类型:我们提供子丰富的断言类型,不同的控件类型要选择合适的断言类型,这里针对每个断言类型进行介绍
- val: 断言输入框的值
- text: 断言文本的内容
- displayed: 断言控件是否处于显示状态
expect:displayed,#add-plan-contiune,equal,true
- enabled: 断言当前控件是否可用(没有禁用)
expect:enabled,#add-plan-contiune,equal,true
- selected: 断言当前控件是否打勾选中了
- attr: 断言当前DOM的属性值
可以对name属性进行断言
- css: 断言当前DOM的CSS值
- url: 断言当前网页的URL地址
获取地址栏的url信息进行断言
- title: 断言当前网页的title标题
- cookie: 断言当前网页的cookie值
- localStorage: 断言当前网页的localStorage
- sessionStorage: 断言当前网页的sessionStorage
- alert: 断言弹出的alert窗口的提示文本
- jscode: 在浏览器端执行自定义的JS代码,断言JS代码的返回值
点击面板中的js代码后,将焦点放在日期输入框中,输入js代码document.getElementById("cp-end-date").value=”2019-01-01”
- count: 断言控件匹配的数量
- imgdiff: 断言当前控件的图片差异,可以自定义图片差异的百分比
图片对比需要安装GraphicsMagic,使用gm检查是否安装。
UIRecorder PC高级使用
如何解决属性值不稳定问题?
有很多开发会写一些随机的属性值,例如某些随机的id值,这种属性值会导致录制的脚本完全无法持续运行。
针对这个问题,我们提供了3套解决方案
属性值黑名单正则
: 可以编写正则表达式过滤掉那些不稳定的属性值,例如:/attr_value_\d+/
,如果需要过滤多种属性值,可以这么写:/attr_value1_\d+|attr_value2_\d+/
。这个值可以在uirecorder init
命令中进行配置,也可以在录制过程中的录制面板上即时修改。属性开关
:在录制面板上,可以通过临时切换不同属性项的开启和关闭,灵活组合出适合自己业务的PATH生成方案,例如某些场景下不适合用text
,就可以临时将text
属性项关闭掉。class
值黑名单正则
:对于某些不稳定的class值,我们同样提供了黑名单功能,此功能需要通过uirecorder init
命令进行配置。
变量功能怎么用?
编辑config.json
{
"recorder": {
...
},
"webdriver": {
...
},
"vars": {
"productId": "123456",
"productName": "mp3"
}
}
- 开始页面输入:
http://xxx.com/product?id={ {productId}}
- 录制界面中使用工具面创建新变量
- 录制界面中使用工具面更新旧变量的值
- 录制界面中使用工具面板跳转
- URL:
- 录制界面中使用工具面板插入变量字符串:
{ {productName}}
或aaa{ {productName}}bbb
- 断言中使用变量字符串:
{ {productName}}
或aaa{ {productName}}bbb
提示: 所有变量字符串均支持JS语法的模板字符串,例如:{ {productName}}, ${new Date().getTime()}, ${parseInt(testVars.a)+parseInt(testVars.b)}
怎么录制及使用公共脚本?
- 录制
commons/login.mod.js
- 录制
sample/test.spec.js
source run.sh sample/test.spec.js
( Linux|Mac ) 或run.bat sample/test.spec.js
( Windows )
-
- 在录制浏览器的开始页面时输入
login.mod.js
,或者在输入框的右端点击下拉小三角,选择需要的脚本 - 或者在录制中间页面点击:
脚本跳转
,随后同上 - 当
login.mod.js
加载完成后,继续别的步骤的录制
- 在录制浏览器的开始页面时输入
公共脚本一定要放在项目的commons目录中。
如何录制文件上传步骤?
- UI Recorder仅支持Native文件上传, 不支持FLASH上传
- 直接点击
<input type="file">
或点击<button role="upload">Upload file</button>
, 占位按钮必需要用role
或data-role
标注为upload
- 上传的文件必需保存在
uploadfiles/
文件夹中
如何断点调试生成的脚本?
- 安装 ,然后打开它
- 在vs code中打开项目根目录
- 打开测试脚本, 添加断点
- 按
F5
键执行脚本, 按F10
键执行下一行
如何断言浏览器eval js代码后的结果?
添加断言
, 选择类型:jscode
- 同步模式:
return document.title
- 函数模式:
- 异步模式:
4. function(){
5. var str = "aaa";
6. return str;
7. }
9. function(done){
10. setTimeout(function(){
11. done(123);
12. }, 100);
13. }
如何在断言前隐藏DOM结点?
uirecorder init
- 在初始化
断言前隐藏
选项时,输入需要隐藏的css选择器 uirecorder start
- UIRecorder会在断言前隐藏所有匹配的DOM结点,然后就可以断言那些隐藏在mask层后面的DOM
如何录制可选的点击?
某些步骤不是非常重要,但却偶尔会出现,这些步骤会总是断言为成功。
- 按下'Alt'键
- 点击目标DOM
如何使用图片对比功能?
- 安装GraphicsMagick
brew install graphicsmagick (Mac)
sudo apt-get install graphicsmagick (Linux)
(Windows)
- �添加图片对比断言
选择断言类型: imgdiff
选择目标控件
- 当业务变化时,我们可以通过以下命令更新基线图片
source run.sh sample/test.spec.js --rebuilddiff
(Mac | Linux)
run.bat sample/test.spec.js --rebuilddiff
(Windows)
如何导出原数据?
如果希望基于UIRecorder录制出来的步骤生成JAVA等别的语言自动化脚本,可以使用我们的原数据导出功能。
此功能可以在生成js语法的自动化脚本同时,也生成json格式的原数据。基于此json文件,我们就可以自由的翻译成任何语言的自动化脚本。
uirecorder start --raw
- 录制完后,就可以获得2个文件:
sample/test.spec.js
,sample/test.spec.json
如何接入Jenkins?
- 添加命令
- 添加报告
2. source ./install.sh
3. source ./run.sh
: reports/index.xml
: 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
如何失败时才生成截图?
- 编辑文件:
package.json
, 确保mochawesome-uirecorder
版本在1.5.22
及以上 - 在
--reporter mochawesome-uirecorder
后面添加:--reporter-options copyShotOnlyFail=true
Uirecorder使用手册
Install
- Install NodeJs (version >= v7.x)
sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share} (Mac, Linux)
- Install chrome
- Install UI Recorder
npm install uirecorder mocha -g
npm镜像源可以使用淘宝地址npm config set registry
PC record
1. 初始化测试项目
创建一个项目目录,然后进入这个目录执行
uirecorder init
2. 开始录制脚本
进入刚才的项目目录,执行
uirecorder sample/***.spec.js
3. Start WebDriver Server
开启一个新窗口,本地启动方式为
npm run server(需要进入到项目目录执行)
webdriver server有多种启动方式,详见如下链接:
Selenium Grid:
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/
录制脚本如果已经存在,系统会提示继续录制或者重新录制。如果继续录制会先执行一次上一次的录制过程,引导到最后一个录制的页面。
录制面板介绍:
- 属性开关:对于某些特殊场景,可以通过灵活的开启或关闭属性项,不同步骤选择不同的PATH生成策略,例如:某些控件不太适合用文本定位,就可以临时先关闭text属性项
- 属性值黑名单: 可以即时配置属性值黑名单,立即生效,用来解决随机属性值的问题,修改后记得按一下回车键,让变更立即生效,格式如下:/aaa_bbb_\d+/
- 执行JS: 可以用来在浏览器端执行一些扩展功能,例如:document.title=123;
- 添加延迟:某些操作后,会发起异步请求,异步请求的完成时间不太确定时,可以通过添加延迟时间提升稳定性,时间单位是毫秒
- 脚本跳转:用来跳到新的URL,或者跳到另外一个脚本,一般情况下用来引用公共脚本,例如登录操作。
断言类型:我们提供子丰富的断言类型,不同的控件类型要选择合适的断言类型,这里针对每个断言类型进行介绍
- val: 断言输入框的值
- text: 断言文本的内容
- displayed: 断言控件是否处于显示状态
expect:displayed,#add-plan-contiune,equal,true
- enabled: 断言当前控件是否可用(没有禁用)
expect:enabled,#add-plan-contiune,equal,true
- selected: 断言当前控件是否打勾选中了
- attr: 断言当前DOM的属性值
可以对name属性进行断言
- css: 断言当前DOM的CSS值
- url: 断言当前网页的URL地址
获取地址栏的url信息进行断言
- title: 断言当前网页的title标题
- cookie: 断言当前网页的cookie值
- localStorage: 断言当前网页的localStorage
- sessionStorage: 断言当前网页的sessionStorage
- alert: 断言弹出的alert窗口的提示文本
- jscode: 在浏览器端执行自定义的JS代码,断言JS代码的返回值
点击面板中的js代码后,将焦点放在日期输入框中,输入js代码document.getElementById("cp-end-date").value=”2019-01-01”
- count: 断言控件匹配的数量
- imgdiff: 断言当前控件的图片差异,可以自定义图片差异的百分比
图片对比需要安装GraphicsMagic,使用gm检查是否安装。
UIRecorder PC高级使用
如何解决属性值不稳定问题?
有很多开发会写一些随机的属性值,例如某些随机的id值,这种属性值会导致录制的脚本完全无法持续运行。
针对这个问题,我们提供了3套解决方案
属性值黑名单正则
: 可以编写正则表达式过滤掉那些不稳定的属性值,例如:/attr_value_\d+/
,如果需要过滤多种属性值,可以这么写:/attr_value1_\d+|attr_value2_\d+/
。这个值可以在uirecorder init
命令中进行配置,也可以在录制过程中的录制面板上即时修改。属性开关
:在录制面板上,可以通过临时切换不同属性项的开启和关闭,灵活组合出适合自己业务的PATH生成方案,例如某些场景下不适合用text
,就可以临时将text
属性项关闭掉。class
值黑名单正则
:对于某些不稳定的class值,我们同样提供了黑名单功能,此功能需要通过uirecorder init
命令进行配置。
变量功能怎么用?
编辑config.json
{
"recorder": {
...
},
"webdriver": {
...
},
"vars": {
"productId": "123456",
"productName": "mp3"
}
}
- 开始页面输入:
http://xxx.com/product?id={ {productId}}
- 录制界面中使用工具面创建新变量
- 录制界面中使用工具面更新旧变量的值
- 录制界面中使用工具面板跳转
- URL:
- 录制界面中使用工具面板插入变量字符串:
{ {productName}}
或aaa{ {productName}}bbb
- 断言中使用变量字符串:
{ {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
-
- 在录制浏览器的开始页面时输入
login.mod.js
,或者在输入框的右端点击下拉小三角,选择需要的脚本 - 或者在录制中间页面点击:
脚本跳转
,随后同上 - 当
login.mod.js
加载完成后,继续别的步骤的录制
- 在录制浏览器的开始页面时输入
3. source run.sh sample/test.spec.js
( Linux|Mac ) 或 run.bat sample/test.spec.js
( Windows )
公共脚本一定要放在项目的commons目录中。
如何录制文件上传步骤?
- UI Recorder仅支持Native文件上传, 不支持FLASH上传
- 直接点击
<input type="file">
或点击<button role="upload">Upload file</button>
, 占位按钮必需要用role
或data-role
标注为upload
- 上传的文件必需保存在
uploadfiles/
文件夹中
如何断点调试生成的脚本?
- 安装 ,然后打开它
- 在vs code中打开项目根目录
- 打开测试脚本, 添加断点
- 按
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结点?
uirecorder init
- 在初始化
断言前隐藏
选项时,输入需要隐藏的css选择器 uirecorder start
- UIRecorder会在断言前隐藏所有匹配的DOM结点,然后就可以断言那些隐藏在mask层后面的DOM
如何录制可选的点击?
某些步骤不是非常重要,但却偶尔会出现,这些步骤会总是断言为成功。
- 按下'Alt'键
- 点击目标DOM
如何使用图片对比功能?
1. 安装GraphicsMagick
brew install graphicsmagick (Mac)
sudo apt-get install graphicsmagick (Linux)
(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文件,我们就可以自由的翻译成任何语言的自动化脚本。
uirecorder start --raw
- 录制完后,就可以获得2个文件:
sample/test.spec.js
,sample/test.spec.json
如何接入Jenkins?
1. 添加命令
2. source ./install.sh
3. source ./run.sh
4. 添加报告
: reports/index.xml
: 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
如何失败时才生成截图?
- 编辑文件:
package.json
, 确保mochawesome-uirecorder
版本在1.5.22
及以上 - 在
--reporter mochawesome-uirecorder
后面添加:--reporter-options copyShotOnlyFail=true