UIRecorder入门

最新推荐文章于 2023-01-29 18:20:38 发布

weixin_33795806

最新推荐文章于 2023-01-29 18:20:38 发布

阅读量932

点赞数 1

文章标签： ui python java

原文链接：https://my.oschina.net/anxiaole/blog/1923326

版权

2019独角兽企业重金招聘Python工程师标准>>>

UI Recorder

UI Recorder 是一款零成本UI自动化录制工具，类似于Selenium IDE.

UI Recorder 要比Selenium IDE更加强大!

UI Recorder 非常简单易用.

官方网站: http://uirecorder.com/
语言切换: English, 中文
变更日志: CHANGE
视频教程：PC中文教程

功能

支持所有用户行为: 键盘事件, 鼠标事件, alert, 文件上传, 拖放, svg, shadow dom
支持无线native app(Android, iOS)录制, 基于macaca实现: https://macacajs.com/
无干扰录制: 和正常测试无任何区别，无需任何交互
录制用例存储在本地
支持丰富的断言类型: val,text,displayed,enabled,selected,attr,css,url,title,cookie,localStorage,sessionStorage
支持图片对比
支持强大的变量字符串
支持公共测试用例: 允许用例中动态调用另外一个
支持并发测试
支持多国语言: 英文, 简体中文, 繁体中文
支持单步截图
支持HTML报告和JUnit报告
全系统支持: Windows, Mac, Linux
基于Nodejs的测试用例: jWebDriver

安装uirecorder

说明：这里是基于win的安装。mac系统与之思路类似。

1、安装node.js（版本号 >= v7.x）

node官网：https://nodejs.org/en/download/

或者直接下载安装包：https://nodejs.org/dist/v8.11.3/node-v8.11.3-x64.msi

安装时一路next就行了。安装成功之后，验证一下安装是否成功：

打开cmd，输入node -v，然后回车

图片地址（看到版本号，就说明安装成功。这一步一般不会出问题。）

2、安装 chrome（谷歌浏览器）

chrome官网：https://www.google.com/chrome/ （访问此地址需要‘帆樯’）

或者直接下载百度云上chrome安装包：https://pan.baidu.com/s/1RU76eGWOBPJD2EHfE64Bsw

3、安装 UI Recorder

npm install uirecorder mocha -g

备注：如果下载不成功，很大可能是因为数据包下载不下来（原因你懂得）。使用淘宝的npm镜像下载：

使用cnpm命令代替npm：

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install uirecorder mocha -g

4、检查浏览器与driver版本是否对应

下载成功之后，需要查看一下chromedirver的版本和chrom版本是否对应，如果版本不对应，是无法驱动器浏览器进行录制和回放的。

selenium之 chromedriver与chrome版本映射表

a)查看chrome版本：chrome://settings/help

图片地址（我的chrome是68版本）

b)查看chromedierver的版本：npm ls chromedriver -g (在cmd中运行命令)

图片地址

可以看到uirecorder是2.5.42版本，uirecorder依赖的chromedriver是2.41.0版本

c)根据selenium之 chromedriver与chrome版本映射表，应该下载2.40.0版本的chromedriver：

备注：我自己的chrome是68版本的，所以要下载chromederiver@2.40.0版本的。在我自己的电脑上，68版本的chrome使用2.41.0版本的chromedriver，无法录制。换成2.40.0版本的chromedriver一切正常。

打开C:\Users\{userNmae}\AppData\Roaming\npm\node_modules\uirecorder\package.json (把{userName}替换成你的用户名，就能找到这个文件了。)

修改uirecorder依赖chromedriver的版本号：

图片地址

然后在cmd执行：

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

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

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

图片地址

5、到此，如果都没有报错，说明安装成功了。

上一步的安装指定版本的chromedriver特别重要，因为不同版本的chrome需要相应版本的chromedriver才能驱动起来。如果安装的版本不对应，录制或者回放的时候，一般都不会成功。

开始录制

1、初始化工程

mkdir project_name                         // 创建工作目录

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

uirecorder init                            // 初始化uirecorder

备注：如果运行uirecorder init时报出如下格式的错误：

C:\uirecorder_workspaces\project_name>uirecorder init
module.js:549
    throw err;
    ^

Error: Cannot find module 'co-thread'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\AnXiaole\AppData\Roaming\npm\node_modules\uirecorder\node_modules\_co-parallel@1.0.0@co-parallel\index.js:6:14)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)

就执行cnpm install co-thread -g 这是因为在运行uirecorder init时，缺少了uirecorder依赖的co-thread包，所以用cnpm安装（install）一下co-thread。

（编者注：如果运行此命令时报错说找不到cnpm命令，请看【3、安装 UI Recorder】小节）

安装完之后，再执行uirecorder init，此时有可能还报类似的错误，就继续使用cnpm install [包名] -g安装报错的那个依赖包。知道uirecorder init执行成功为止。

（编者注：我在新的电脑安装uirecorder，大于缺失了10几个包，如此循环了十几次，是很正常的。）

图片地址

2、开始录制测试用例

启动uirecorder录制，并且录制的脚本保存到工作目录下的sample/test.spec.js （我这里的工作目录就是project_name）

uirecorder start

图片地址

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

图片地址

我们去百度，搜索一下uirecorder。

1）在上面输入框中输入www.baidu.com,点击开始录制。

2）然后在百度上一顿操作，随便点。我请客。>_<，然后，不想玩了，就点击左下角的结束录制。

3）然后录制的浏览器会自动关闭，然后，cmd展示：

图片地址

4）具体如何录制，如何使用断言，这些，官方提供了视频教程：视频教程：PC中文教程

回放

回放，又叫运行测试用例。执行下面命令运行sample/test.spec.js测试用例（即回放刚才的一顿操作）

run.bat sample/test.spec.js

此时报错了：

图片地址

原因：回放的时候，需要运行selenium-standalone，所以重新打开一个cmd，运行：

说明：下面前两个命令为安装selenium-standalone的，如果已经安装过selenium-standalone，就不用再运行前两个命令了。

cnpm install selenium-standalone@latest -g
selenium-standalone install                    // 运行这个需要java，安装java自行百度。最低也要安装java8
selenium-standalone start

图片地址

安装好java8，看一下版本：图片地址

然后在运行之前的命令：selenium-standalone install，则报错：

图片地址

或者去百度云下载：百度云盘地址，下载之后，保存到指定位置。并且正确命名文件名称。

把文件下载下来，并放到指定的目录中，并重命名之后，执行selenium-standalone start ，入股看到下图，Selenium started，就说明启动成功了。

图片地址

如果报下面的错误，说明是下载的driver没有放到指定文件夹下，或者是文件命名不对。要该文件的名称的。

C:\Users\AnXiaole\AppData\Roaming\npm\node_modules\selenium-standalone\bin\selenium-standalone:79
        throw err;
        ^

Error: Missing C:\Users\AnXiaole\AppData\Roaming\npm\node_modules\selenium-standalone\.selenium\chromedriver\2.40-x64-chromedriver        // 备注：像这个，需要把zip中的driver解压并重命名为2.40-x64-chromedriver（不要带.exe）
    at C:\Users\AnXiaole\AppData\Roaming\npm\node_modules\selenium-standalone\lib\check-paths-existence.js:15:20
    at FSReqWrap.cb [as oncomplete] (fs.js:312:19)

启动了selenium-standalone，在工作目录下运行：run.bat sample/test.spec.js

图片地址