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

安装

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" 查看

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版本

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. 初始化工程

E:

mkdir project_name                         // 创建工作目录

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

uirecorder init                            // 初始化uirecorder

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

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

2. 开始录制测试用例

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

uirecorder start

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

上传文件：

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

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

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

回放

1. 启动 selenium-standalone

selenium-standalone start

2. 运行回放

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

posted on 2019-10-22 15:28 bruce_he 阅读(1357) 评论(0) 编辑收藏举报