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 Files\Java\jdk1.8.0_140

• 变量名：CLASSPATH

           变量值：.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;

• 变量名：Path

       变量值：%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

 

 

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}\AppData\Roaming\npm

    使用管理员权限 在 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}\AppData\Roaming\npm\node_modules\uirecorder\package.json

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

         

　　3) 

cd C:\Users\xxxxx\AppData\Roaming\npm\node_modules\uirecorder

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浏览器，一个用来校验的，一个用来录制脚本的

 

 

 

 

 

回放

1. 安装并启动 selenium-standalone 

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

　　

2. 运行回放

run.bat sample/test.spec.js

　　

 

查看回测报告

  reports\index.html

 

 

 

录制中禁止以下操做！

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

二、禁止使用TAB切换焦点

三、不要使用双击, WebDriver兼容性很差

四、不要使用鼠标选择部分文本, WebDriver兼容性很差

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

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

 

断言类型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：当前控件的图片差别，能够自定义图片差别的百分比