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

目录

• 相关文档链接
• 安装
• 1. 安装 Java JDK 并配置环境变量
• 2. 安装 nodejs 
• 3. 安装 chrome 浏览器
• 4. 安装 UIRecorder
• 5. 检查浏览器与driver版本是否对应
• 开始录制
• 1. 初始化工程
• 2. 开始录制测试用例
• 回放
• 1. 启动 selenium-standalone
•  2. 运行回放
• 查看回测报告

返回目录

相关文档链接

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
   参考链接： https://blog.csdn.net/weixin_38208401/article/details/79512791

    chromedriver 版本下载：https://npm.taobao.org/mirrors/chromedriver/

    chrome浏览器与 chromedriver的早期对应关系：https://blog.csdn.net/yoyocat915/article/details/80580066 　　

　　

返回目录

安装

返回目录

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 

   注意，当前实测 可用版本为 V12.20 （实测：V13.14 uirecoder init 时失败，V8.11.3 安装 selenium-standalone时无匹配版本）

  可用版本下载链接： https://npm.taobao.org/mirrors/node/latest-v12.x/node-v12.20.0-x64.msi （全部版本：https://npm.taobao.org/mirrors/node/）

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

?

1

node -v

 

返回目录

3. 安装 chrome 浏览器

 打开浏览器，输入“chrome://version”，查看 浏览器版本。

返回目录

4. 安装 UIRecorder

1）进入 C:\Users\xxxx\AppData\Roaming\，手动删掉 npm 及 npm-cache 文件夹，然后重新，然后重新创建 npm

2）配置环境变量： %PATH%，加入 C:\Users\{username}\AppData\Roaming\npm，并通过 “npm -v” 查看是否生效

 

==== 以下步骤使用管理员权限 在 cmd 窗口操作

3）安装 UIRecorder：

cnpm install uirecorder mocha -g

4）安装 Selenium standalone server：

cnpm install selenium-standalone -g　

5）安装 webdriver：

selenium-standalone install

　 查看是否安装完成。

　　（1）某些 driver 可能下载失败，可以尝试再次执行安装

　　（2）Firefox geckodriver 可以通过 https://github.com/mozilla/geckodriver/releases/ 下载　

　　（3）selenium driver 的文件存放在 C:\Users\xxxx\AppData\Roaming\npm\node_modules\selenium-standalone\.selenium，手动放置后，可以 运行 查看是否正常启动

?

selenium-standalone start

          

6） 安装Mocha单元测试框架

?

cnpm install mocha -g

cnpm install jwebdriver expect.js mocha-generators faker --save-dev

cnpm install jwebdriver chai 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 为 89.0，则对应的 driver 为 89.0

         

　　3) 确定chromedriver版本

?

1 2 3 4 5

cd C:\Users\xxxxx\AppData\Roaming\npm\node_modules\uirecorder   cnpm install                  // 更新uirecorder依赖的chromedriver为2.45.0版本   npm ls chromedriver -g        // 查看chromedriver的版本

 完成后，进入 C:\Users\xxxx\AppData\Roaming\npm\node_modules\uirecorder\node_modules\chromedriver\lib\chromedriver，双击 chromedriver.exe，查看版本是否与 chrome浏览器的版本对应。

 

 

返回目录

开始录制

返回目录

1. 初始化工程

?

1 2 3 4 5 6 7

E:   mkdir project_name                         // 创建工作目录   cd project_name                            // 进入到工作目录中,以下的命令都是在此工作目录中执行   uirecorder init                            // 初始化uirecorder

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

如果卡在 start install dependencies，可能是版本不匹配的原因

返回目录

2. 开始录制测试用例

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

?

1	uirecorder start

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

 

 上传文件：

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

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

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

 

返回目录

回放

返回目录

1. 启动 selenium-standalone

selenium-standalone start

返回目录

 2. 运行回放

?

1	run.bat sample/test.spec.js

　　

返回目录

查看回测报告

  reports\index.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：当前控件的图片差异，可以自定义图片差异的百分比