UIRecorder安装与使用

继vue单元测试，将进行vue的e2e测试学习。

学习点：

• 安装uirecorder
• 用工具（UI Recorder）录制测试脚本
• 测试脚本的回放

本文意在安装UI Recorder，而且利用该工具进行测试脚本（.js）的录制与回放。

 

1、安装

安装NodeJS（已安装）、Chrome（已安装）、UI Recorder、mocha。

解决权限问题：

   在虚拟机Linux操做系统下，会涉及到另外一种安装失败的状况：权限不足（permission denied）。故在install uirecorder以前，先配置权限：

#sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share} 

• 以上命令表示为当前用户设置npm相关安装目录的权限
• chown全称为change owner，授予权限命令
• -R 表示递归，对指定目录下全部的子目录和文件采起同种操做
• $(whoami) 表示获取当前用户名，即为当前用户设置权限【也能够直接写用户名】
• $(npm config get prefix) 表示获取 npm 全局安装默认目录　　

 安装uirecorder和mocha：

#npm install uirecorder mocha -g

  如果安装失败（在安装到chrome相关包时可能会失败），则试试用cnpm命令，#cnpm install uirecorder mocha -g

 【安装cnpm：#npm install -g cnpm --registry-https://registry.npm.taobao.org】

检查版本与创建软连接：

   检查uirecorder安装成功与否，能够用查看版本的命令检查【Linux】：

#uirecorder --version　

   若是报错：bash： uirecorder： 未找到命令... 则须要创建软连接，才能使用uirecorder命令。

   转到 root 权限，创建软连接：

#sudo ln -s /opt/tools/node-v9.2.0-linux-x64/bin/uirecorder /usr/local/bin/uirecorder

  【ln -s 源文件 目标文件】

  【 /usr/local/bin  目录是给用户放置本身的可执行程序的地方（Linux），避免系统升级而覆盖同名文件】

   再检查版本：

#uirecorder --version

　

　成功！接下来就能够在具体的项目中进行测试脚本的录制啦！

 

2、PC录制

  1. 初始化测试工程

• 转到项目根目录： #cd 项目根目录
• 初始化uirecorder配置：  #uirecorder init

     一路回车便可，在选择浏览器列表那里根据本身的需求输入相应的浏览器，默认会出现两项（chrome，ie11），我虚拟机没有ie，故而只输入了chrome。

     

     

     TODO：解释建立的各文件做用。

 

• 安装相关依赖

#npm install jwebdriver expect.js mocha-generators faker --save-dev
#npm install jwebdriver chai faker --save-dev　

 

• 后话：在初始化 uirecorder 配置时，也许不该该直接在项目根目录下进行该操做，这样不便于管理。好的作法应该是为uirecorder专门创建一个目录，uirecorder init生成的各类配置文件都在次目录下，项目结构友好。下图的绿色点就是新生成的文件及文件夹，能够看出来，很散乱。
  

 

 

   2. 开始录制测试用例

• 修改hosts文件：

          config.json内容以下，根据须要修改，能够不修改：

{
    "webdriver": {
        "host": "127.0.0.1",
        "port": "4444",
        "browsers": "chrome"
    },
    "vars": {},
    "recorder": {
        "pathAttrs": "data-id,data-name,type,data-type,role,data-role,data-value",
        "attrValueBlack": "",
        "classValueBlack": "",
        "hideBeforeExpect": ""
    }
}

• uirecorder sample/test.spec.js

 

   3. 启动WebDriver服务器

• 安装服务Selenium standalone server：

         #npm install selenium-standalone -g

• 创建软连接：

        #sudo ln -s 

#sudo ln -s /opt/tools/node-v9.2.0-linux-x64/bin/selenium-standalone /usr/local/bin/selenium-standalone

#sudo ln -s /opt/tools/node-v9.2.0-linux-x64/bin/start-selenium /usr/local/bin/start-selenium

selenium-standalone install

selenium-standalone start

或者 java -jar selenium-server-standalone-3.7.1.jar

 

  4. 运行测试用例

• 运行全部脚本：#source run.sh ( Linux|Mac ) 或者# run.bat ( Windows )【官网写的，可是运行不起来，会报错说丢失脚本：

  npm ERR! missing script: singletest

  】
• 运行单个脚本：#source run.sh sample/test.spec.js ( Linux|Mac ) 或 run.bat sample/test.spec.js ( Windows )

   用mocha（摩卡）命令来回放：

#mocha sample/test.spec.js

 

  5. 得到测试报告和单步截图

 mochawesome

 

  6. 总结

   安装uirecorder 

 

资料：

1. UI Recorder官方中文教程

2. 自动化测试工具UIRecorder安装教程

3. UI自动化录制工具----UI Recorder

4. 基于录制的前端测试工具UI Recorder