UI 自动化测试： UIRecorder + Selenium standalone server 搭建 Web UI 自动化测试

相关文档链接：

1. 操作： https://www.jianshu.com/p/f7b11da864fa

   官方网站：http://uirecorder.com/
   Github：https://github.com/alibaba/uirecorder
   使用手册：https://github.com/alibaba/uirecorder/blob/master/doc/zh-cn/readme.md
　录制视频：https://v.youku.com/v_show/id_XMTY4NTk5NjI4MA==.html

安装

1. 安装 Java JDK 并配置环境变量

  新建系统变量JAVA_HOME 和CLASSPATH

• 变量名：JAVA_HOME

           变量值：C:Program FilesJavajdk1.8.0_140

• 变量名：CLASSPATH

           变量值：.;%JAVA_HOME%libdt.jar;%JAVA_HOME%lib ools.jar;

• 变量名：Path

       变量值：%JAVA_HOME%in;%JAVA_HOME%jrein;

2. 安装 nodejs 

   注意，目前Nodejs官网上发布的最新版本为v10.14.2，但是使用最新版本的Nodejs时，UI Recorder在初始化时会有问题（在Start Install project dependencies步骤卡住）

  可用版本下载链接： https://nodejs.org/dist/v8.11.3/node-v8.11.3-x64.msi

  安装完成后使用 "node -v" 查看

node -v

3. 安装 chrome 浏览器

4. 安装 UIRecorder

    配置环境变量： %PATH%，加入 C:Users{username}AppDataRoaming pm

    使用管理员权限 在 cmd 窗口： 　　

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install uirecorder mocha -g
cnpm install jwebdriver expect.js mocha-generators faker --save-dev // 安装相关依赖库

　　

5.  检查浏览器与driver版本是否对应

     1）selenium之 chromedriver与chrome版本映射表（https://blog.csdn.net/huilan_same/article/details/51896672）

           Note: 最新： https://blog.csdn.net/yoyocat915/article/details/80580066

     2） C:Users{username}AppDataRoaming pm ode_modulesuirecorderpackage.json

           将chromedriver 改成 浏览器对应的 driver 版本，如本机安装的chrome 为 72.0，则对应的 driver 为 2.45.0

         

　　3) 

cd C:UsersxxxxxAppDataRoaming
pm
ode_modulesuirecorder

cnpm install                  // 更新uirecorder依赖的chromedriver为2.45.0版本

npm ls chromedriver -g        // 查看chromedriver的版本

　　

开始录制

1. 初始化工程

E:

mkdir project_name                         // 创建工作目录

cd project_name                            // 进入到工作目录中,以下的命令都是在此工作目录中执行

uirecorder init                            // 初始化uirecorder

　　

  * 一路回车，浏览器的地方选择 "Chrome"

2. 开始录制测试用例

     启动uirecorder录制，并且录制的脚本保存到工作目录下的sample/test.spec.js 

uirecorder start

　　此时会打开两个chrome浏览器，一个用来校验的，一个用来录制脚本的

 上传文件：

 UI Recorder仅支持Native文件上传, 不支持FLASH上传

直接点击“选择文件”按钮或点击“Upload file”, 占位按钮必需要用role或data-role标注为upload

上传的文件必需保存在 /uploadfiles/ 中。

回放

1. 安装并启动 selenium-standalone 

cnpm install selenium-standalone@latest -g
selenium-standalone install                    // 运行这个需要java　　　　　　　　　　　　

　启动

selenium-standalone start

2. 运行回放

run.bat sample/test.spec.js

　　

查看回测报告

  reportsindex.html

录制中禁止如下操作！

1、禁止直接手动修改地址栏中的URL

2、禁止使用TAB切换焦点

3、不要使用双击, WebDriver兼容性不好

4、不要使用鼠标选择部分文本, WebDriver兼容性不好

5、不要手动切换至背景窗口

6、不要点击非关键区域, 仅录制关键步骤

断言类型
1）val：输入框的值
2）text：文本的内容
3）displayed：控件是否处于显示状态
4）enabled：当前控件是否可用（没有禁用）
5）selected：当前控件是否打勾选中了
6）attr：当前DOM的属性值
7）css：当前DOM的CSS值
8）url：当前网页的URL地址
9）title：当前网页的title标题
10）cookie：当前网页的cookie值
11）localStorage：当前网页的localStorage
12）sessionStorage：当前网页的sessionStorage
13）alert：弹出的alert窗口的提示文本
14）jscode：浏览器端执行自定义的JS代码，断言JS代码的返回值
15）count：控件匹配的数量
16）imgdiff：当前控件的图片差异，可以自定义图片差异的百分比