UI Recorder + Selenium standalone server 环境搭建

系统平台：win10 x64
官方网站：http://uirecorder.com/
Github：https://github.com/alibaba/uirecorder
使用手册：https://github.com/alibaba/uirecorder/blob/master/doc/zh-cn/readme.md
UI Recorder Version :2.5.45

UI Recorder 是一款零成本UI自动化录制工具，类似于Selenium IDE，但UI Recorder 要比Selenium IDE更加强大。我用来录制GUI脚本，并集成到CI中进行回归测试。

踩坑

1. 一定注意安装的Nodejs版本，按照我下面给出的地址下载；
2. 在UI Recorder Version @2.5.45中，去掉了maximize() 这个 api（据说是因为和selenium-standalone有兼容问题），如果想要全屏回放脚本，可以手动修改此处：

 try {
               self.driver = driver.session(sessionConfig).maximize().config({
                    pageloadTimeout: 30000, // page onload timeout
                    scriptTimeout: 5000, // sync script timeout
                    asyncScriptTimeout: 10000 // async script timeout
                    });
                } catch (e) {
                    console.log(e);
                }

3. UI Recorder 在录制时，不支持浏览器回退操作；
4. 可以使用无头浏览器回放脚本，需要修改录制的脚本，在args处加上headless参数，不会影响截图等功能，如下：

let driver;
            before(function(){
                let self = this;
                let driver = new JWebDriver({
                    'host': host,
                    'port': port
                });
                let sessionConfig = Object.assign({}, webdriverConfig, {
                    'browserName': browserName,
                    'version': browserVersion,
                    'ie.ensureCleanSession': true,
                    'chromeOptions': {
                        'args': ['--enable-automation','--incognito','headless']
                    }
                });

5. UI Recorder 在录制时，只支持固定的sleep时间，不支持智能等待功能；
6. 如果想要在脚本回放时才生成截图，可以修改package.json 文件，在–reporter mochawesome-uirecorder后面添加： --reporter-options copyShotOnlyFail=true （要注意有三处需要修改！）

 "scripts": {
    "installdriver": "./node_modules/.bin/selenium-standalone install --drivers.firefox.baseURL=http://npm.taobao.org/mirrors/geckodriver --baseURL=http://npm.taobao.org/mirrors/selenium --drivers.chrome.baseURL=http://npm.taobao.org/mirrors/chromedriver --drivers.ie.baseURL=http://npm.taobao.org/mirrors/selenium",
    "server": "./node_modules/.bin/selenium-standalone start",
    "test": "./node_modules/.bin/mocha \"!(node_modules)/**/*.spec.js\" --reporter mochawesome-uirecorder --reporter-options copyShotOnlyFail=true --bail",
    "singletest": "./node_modules/.bin/mocha --reporter mochawesome-uirecorder --reporter-options copyShotOnlyFail=true --bail",
    "paralleltest": "./node_modules/.bin/mocha-parallel-tests \"!(node_modules)/**/*.spec.js\" --reporter mochawesome-uirecorder --reporter-options copyShotOnlyFail=true --max-parallel 5 --bail"
  },

安装

1. 环境准备

• Java 环境
• Nodejs 环境
  注意，目前Nodejs官网上发布的最新版本为v10.14.2，但是使用最新版本的Nodejs时，UI Recorder在初始化时会有问题（在Start Install project dependencies步骤卡住），所以需要下载我给出的Nodejs版本。
  

2. 安装Chrome浏览器，不要安装绿色版。

3. 使用管理员权限打开命令行窗口，安装cnpm ,查看cnpm介绍

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

4. 安装UI Recorder以及依赖项（注意使用管理员权限）

> cnpm install uirecorder mocha -g
> cnpm install jwebdriver expect.js mocha-generators faker chai --save-dev
# 查看版本
> npm ls uirecorder -g
[email protected]

5. 新建一个项目目录，并cd到该目录下，执行初始化命令： uirecorder init , 根据项目具体情况输入相关参数后回车即可。参数介绍见UIRecorder PC标准入门 , 这里我设置的需要同时测试的浏览器列表仅为chrome.

6. 开始录制脚本： uirecord start ,参数根据需要自行填写，建议开启同步校验浏览器，点击查看uirecorder录制视频教程
   
   ​ 结束录制后，可在文件夹./sample/目录下看到刚才录制的脚本。

7. 回放刚才录制的脚本，需要搭建WebDriverServer，支持：Selenium standalone server, Selenium Grid 和 F2etest 三种，下面只介绍第一种单机方式。

   下载selenium-standalone和Chromedriver：

• 下载chromedriver

  淘宝镜像：https://npm.taobao.org/mirrors/chromedriver

  Chrome官方：https://chromedriver.storage.googleapis.com/index.html

  下载完后，将chromedriver.exe放到系统环境变量路径下，以便SeleniumServer能通过文件名直接找到文件启动对应的driver。注意一定要对照好Chrome和Chromedriver版本，不然回放脚本时会出现各种奇怪的错误。

• Selenium Server

  选择最新版本下载即可。

8. 启动Selenium server: java -jar .\selenium-server-standalone-3.9.1.jar , 不要关闭该窗口。
   

9. 运行（回放）测试用例

• mocha ./sample/test.spec.js
• 运行所有脚本并生成报告: run.bat --report
• 运行单个脚本并生成报告:run.bat sample/test.2.js --report
  
  使用--report 参数运行脚本后，会生成测试报告，具体请查看./reports/下index.html、index.xml、index.json文件。