MACACA脚本录制功能（PC）

Posted 2022-01-02 dreamhighqiu

macaca使用UI Recorder进行脚本录制

官方开源地址：https://github.com/alibaba/uirecorder

本文基于chrome浏览器进行录制

UI Recorder简介：

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

UI Recorder 要比Selenium IDE更加强大!

UI Recorder 非常简单易用.

功能：

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

安装UI Recorder

1. 安装Node.js（>=v7.x）
   在环境搭建的时候已经安装过了
   
   
2. 安装chrome浏览器
   
   
3. 安装UI Rcorder
   npm install uirecorder mocha -g
   
   坑：
   *报色彩斑斓的错误
   
   重装node-gyp，命令npm install node-gyp -g
   
   *还会报error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”。要解决此问题，1) 安装 .NET Framework 2.0 SDK；2) 安装 Microsoft Visual Stu dio 2005；或 3) 如果将该组件安装到了其他位置，请将其位置添加到系统路径中。 
   npm error MSB4019: 未找到 导入的项目“D:\Microsoft.Cpp.Default.props”。之类的问题，我调着调着就变成上述的色彩斑斓错误了，具体情况具体解决吧
   
   
4. 安装服务Selenium standalone server
   npm install selenium-standalone -g
   
   
   *报Error: Missing C:\Users\b\node_modules\selenium-standalone\.selenium\chromedriver\2.31-x64-chromedriver 之类的错误（可能有IEdriver等也缺失）
   
   下载webdriver
   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

1. 安装Mocha 单元测试框架
    

   依次执行命令：

    

   npm install mocha -g

    

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

    

   npm install jwebdriver chai faker --save-dev -g

    

2. 初始化配置UI Recorder

切换到新建的存放项目的目录

执行cmd命令：uirecorder init

初始化配置，可以一直回车，IP默认为127.0.0.1，端口默认为4444，浏览器选择chrome，

执行相关默认操作之后,在目录下生成对应的文件

 

开始录制（chrome）

切换到自己所需的目录下

输入命令：uirecorder start

具体参数可以自己配置

完成后会自动打开两个chrome窗口。
第一个窗口，是录制窗口；第二个是校验窗口，是个空白页面，录制的时候忽略该窗口即可

这个窗口

然后输入要测试的地址或者脚本就可以开始录制了

开始录制后每一步都会有"执行成功"的提示，录制完毕点结束录制

录制的脚本存放在sample文件夹下

 

脚本回放

1. 启动server
   

   selenium-standalone start

   

2. 回放脚本
   mocha sample/test.1.js（不生成报告）
   
   可以看到回放的步骤，执行时间，结果等
   
   
3. 执行测试用例
   

   a) 运行所有脚本:run（run.bat是寻找sample文件夹下 **.spec.js 文件，用例文件名应该以.spec.js为后缀）

   b) 运行单个脚本:run sample/test.1.js
   c) run会在遇到error或者断言失败的时候停止，跳过后续的步骤，使用mocha --reporter mochawesome-uirecorder XX.spec.js可以生成报告同时不跳过

查看测试报告

执行用例后在reports文件夹下会生成测试报告

 

在screenshots文件夹下可以获取每个单步的截图情况

设置仅在失败时截图：
在package.json的 --reporter mochawesome-uirecorder 后面添加：--reporter-options copyShotOnlyFail=true (试了下发现没作用)