UIRecorder 学习了解

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)

2. Install chrome

https://www.google.com/chrome/

3. 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: 断言输入框的值

 

2. text: 断言文本的内容

 

3. displayed: 断言控件是否处于显示状态

expect:displayed,#add-plan-contiune,equal,true

4. enabled: 断言当前控件是否可用(没有禁用)

expect:enabled,#add-plan-contiune,equal,true

5. selected: 断言当前控件是否打勾选中了

 

6. attr: 断言当前DOM的属性值

可以对name属性进行断言

7. css: 断言当前DOM的CSS值

 

 

8. url: 断言当前网页的URL地址

获取地址栏的url信息进行断言

9. title: 断言当前网页的title标题

 

10. cookie: 断言当前网页的cookie值

 

 

11. localStorage: 断言当前网页的localStorage
12. sessionStorage: 断言当前网页的sessionStorage
13. alert: 断言弹出的alert窗口的提示文本
14. jscode: 在浏览器端执行自定义的JS代码，断言JS代码的返回值

点击面板中的js代码后，将焦点放在日期输入框中，输入js代码document.getElementById("cp-end-date").value=”2019-01-01”

15. count: 断言控件匹配的数量
16. 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. 录制界面中使用工具面创建新变量

 

3. 录制界面中使用工具面更新旧变量的值
4. 录制界面中使用工具面板跳转
5. URL: http://xxx.com/product?id={{productId}}

 

6. 录制界面中使用工具面板插入变量字符串: {{productName}} 或 aaa{{productName}}bbb
7. 断言中使用变量字符串: {{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 )

2. 1. 在录制浏览器的开始页面时输入 login.mod.js，或者在输入框的右端点击下拉小三角，选择需要的脚本
   2. 或者在录制中间页面点击：脚本跳转，随后同上
   3. 当login.mod.js加载完成后，继续别的步骤的录制

 

公共脚本一定要放在项目的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)

2. Install chrome

https://www.google.com/chrome/

3. 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: 断言输入框的值

2. text: 断言文本的内容

3. displayed: 断言控件是否处于显示状态

expect:displayed,#add-plan-contiune,equal,true

4. enabled: 断言当前控件是否可用(没有禁用)

expect:enabled,#add-plan-contiune,equal,true

5. selected: 断言当前控件是否打勾选中了

6. attr: 断言当前DOM的属性值

可以对name属性进行断言

7. css: 断言当前DOM的CSS值

8. url: 断言当前网页的URL地址

获取地址栏的url信息进行断言

9. title: 断言当前网页的title标题

10. cookie: 断言当前网页的cookie值

11. localStorage: 断言当前网页的localStorage
12. sessionStorage: 断言当前网页的sessionStorage
13. alert: 断言弹出的alert窗口的提示文本
14. jscode: 在浏览器端执行自定义的JS代码，断言JS代码的返回值

点击面板中的js代码后，将焦点放在日期输入框中，输入js代码document.getElementById("cp-end-date").value=”2019-01-01”

15. count: 断言控件匹配的数量
16. 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. 录制界面中使用工具面创建新变量

3. 录制界面中使用工具面更新旧变量的值
4. 录制界面中使用工具面板跳转
5. URL: http://xxx.com/product?id={{productId}}

6. 录制界面中使用工具面板插入变量字符串: {{productName}} 或 aaa{{productName}}bbb
7. 断言中使用变量字符串: {{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

2. 1. 在录制浏览器的开始页面时输入 login.mod.js，或者在输入框的右端点击下拉小三角，选择需要的脚本
   2. 或者在录制中间页面点击：脚本跳转，随后同上
   3. 当login.mod.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