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 )
    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)

  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

    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

 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Dream--/p/10681785.html