利用UIRecorder做页面元素巡检

关于巡检，之前发过一篇《浅谈质量保障手段之巡检技术》，介绍了使用Python的eyeD3库进行MP3属性信息获取并做音频损坏的判断，可以理解为从服务端层面出发提出的解决方

本文是从前端的角度出发，介绍通过UIRecorder对页面元素比较固定的页面做特定元素巡检。

1.环境搭建

1.1 NodeJS根据电脑操作系统，选择对应的安装包，下载链接：https://nodejs.org/en/

1.2 NPMNPM 是 NodeJS 自带的包管理器，可以批量下载指定包的指定版本。由于 npm 是国外网络环境，可能被墙或下载速度较慢，可以使用 cnpm , 下载速度更快。运行以下命令安装 cnpm：

代码语言：javascript复制

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

1.3 Java安装 Java JDK 注：Windows 系统部分版本安装 Java 后，可能不会将 Java 添加到环境变量，需要手动添加。

1.4 UIRecorder运行以下命令安装 UIRecorder 及其相关依赖：

cnpm install uirecorder mocha macaca-reporter -g

可以使用以下命令检查安装情况：

cnpm list uirecorder -g cnpm list mocha -g cnpm list macaca-reporter -g

1.5 查看环境搭建是否OK

/usr/local/lib └── uirecorder@3.5.3 /usr/local/lib ├─┬ macaca-reporter@1.5.1 │ └── mocha@5.2.0 -> /usr/local/lib/node_modules/macaca-reporter/node_modules/_mocha@5.2.0@mocha └── mocha@9.1.4 /usr/local/lib └── macaca-reporter@1.5.1

2.用例录制

2.1 初始化工程

打开 terminal，新建一个工程目录：

// for example cd ~/Documents mkdir uirecorder_test cd uirecorder_test

初始化 UIRecorder 工程：

uirecorder init // 默认设置的话，一路回车就可以

2.2 工具栏介绍

UIRecorder 录制过程中，可以通过辅助工具栏优化录制效果，目前支持功能有：添加悬停、添加断言、使用变量、执行 js、添加延迟、脚本跳转、结束录制，如下图所示：

(1)添加悬停

当页面中存在二级目录等类似情况时，需要鼠标悬停操作，UIRecorder 就提供了添加悬停操作，可单次悬停或多次添加悬停。依据需求可自行选择实现方式。效果如图：

单次悬停：点击“添加悬停”按钮，鼠标变为绿色锁定元素，单击后结束悬停。
多次添加悬停：按住 command 键（Windows ctrl 键），点击添加悬停按钮，进入悬停模式，可释放 command 键，点击需要悬停的 DOM 控件，添加完成后，按下 esc 键或点击“结束悬停”按钮，退出悬停模式。

(2)添加断言

UIRecorder 支持丰富的断言类型：val、text、displayed、enabled、selected、attr、css、url、title、cookie、localStorage、SessionStorage。

步骤：点击“添加断言”按钮，点击需要断言的 DOM 节点，页面会弹出添加断言的窗口，在弹窗中输入相关信息，点击确认，添加断言成功。

延迟时间：默认为 300ms
断言类型：支持以上列出的 12 种类型
断言 DOM：显示鼠标定位的元素
比较方式：支持 7 种类型（equal、notEqual、contain、notContain、above、below、match、notMatch）
断言结果：填写期望结果

(3) 使用变量

添加变量有 2 种方式。一种方式是在 config.json 文件中直接编辑添加；另一种方式是在录制页面，点击使用变量，选择创建变量。其中，所有变量字符串均支持 js 语法的模版字符串，如：{{productName}} ${new Date().getTime()} 。

编辑 config.json ，设置变量：

在录制页面创建变量：

点击工具栏“使用变量”按钮，点击页面对应 DOM 节点，弹出弹窗，输入信息。

在页面更新变量

(4)执行 JS

在录制页面，点击"执行JS"按钮，可输入一段 JS 代码并执行，如：

同时，也支持 jquery 语法，如下：

(5)添加延迟

在录制页面，点击“添加延迟”按钮，可在录制过程中添加延迟时间，在添加延迟弹窗中，输入延迟时间，并执行，默认为 1000ms，如下：

(6) 脚本跳转

录制过程中，可录制一些公用脚本，例如：登录脚本( common/test.login.js )、固定流程等。调用公共脚本的方法：在开始页面的时候输入 common/test.login.js，或者在录制中间页面时，点击脚本跳转，脚本跳转弹窗中输入 common/test.login.js。当 common/test.login.js 加载完成后，继续下面的录制步骤，效果如下：

2.3 开始录制

咱们就录制一个非常简单的用例：打开壹心理网站，并检查“发布文章”这几个字的文案是否正常。

新建测试用例录制：

代码语言：javascript复制

uirecorder start

效果如图：

其中，一个脚本文件对应一个录制的测试用例，新建测试用例注意脚本文件名不要跟已有文件名冲突。

录制浏览器会自动打开，注意本地 hosts 配置 127.0.0.1 localhost。进入页面输入 url 则可以开始录制。默认会打开同步校验浏览器，该浏览器的作用是在录制的同时做回归测试校验，如果提示执行失败，则说明回归测试过程很大几率也会执行失败，需要对录制过程进行优化（比如借助工具栏辅助功能）。

打开页面后，点击“添加断言”，将鼠标放置“发布文章”，会弹框断言内容，下图是断言text为“发布文章”。

点击结束录制，即录制完毕。

代码语言：javascript复制

------------------------------------------------------------------

录制浏览器已开启
  url: https://www.xinli001.com/
   ✓ 执行成功
  waitBody:
   ✓ 执行成功
  expect: text, //span[text()="发布文章"], equal, 发布文章
   ✓ 执行成功
------------------------------------------------------------------
共录制3个步骤，其中校验通过: 3个，校验失败: 0个
录制脚本已保存: page_test_001.spec.js

录制服务器已关闭
录制浏览器已关闭
校验浏览器已关闭