UI Recorder 功能详解

前言:

UI Recorder安装教程见:UI Recorder 安装教程(一)UI Recorder 安装教程(二)

本次着重介绍UI Recorder录制过程中的功能按钮:添加悬停,添加断言,使用变量,执行JS,添加延迟,脚本跳转,结束录制。如下图所示:



1、属性开关

进入录制页面后,属性开关全部为默认开启状态,因此在你点击任意DOM时,DomPath会自动选择属性并展示。如下图所示:

鼠标点击页面DOM“Email:”,DomPath展示为://td[text()="Email:”]

若将属性开关text关闭后,DomPath会自动选择其他属性并展示。(点击属性开关text,text置灰并关闭,再次点击点亮并开启)



2、属性黑名单

因为某些属性值是随机或不稳定,我们无法录制出稳定的CSS选择器路径,因此我们可以使用黑名单过滤这些属性值。

提示: 属性黑名单是一个正则表达式, 可以类似这样使用:/attr_\d+/

a)可以在UI Recorder初始化时,属性值黑名单正则设置时,输入黑名单正则表达式,如:/attr_\d+/

b)也可以在录制页面,属性黑名单处,输入黑名单正则表达式,如:/attr_\d+/



3、添加悬停

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

a)单次悬停,点击“添加悬停”按钮,鼠标变为绿色锁定元素,单击后结束悬停。

b)多次添加悬停,按下Ctrl键,点击添加悬停按钮,进入悬停模式,可释放Ctrl键;点击需要悬停的DOM控件(可多次添加悬停)。

按下Esc键 或 点击结束悬停按钮, 退出悬停模式。

悬停模式下,可对元素进行断言操作,点击添加断言按钮,点击需要断言的DOM控件。



4、添加断言

UI Recorder支持丰富的断言类型: 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,,根据自己的需要选择。

#断言结果,填写期望结果



5、使用变量

一、添加变量有2种方式,一种方式是在config.json文件中直接编辑添加,另一种方式是在录制页面,点击使用变量,选择创建变量。

提示: 所有变量字符串均支持JS语法的模板字符串,例如:{{productName}}, ${new Date().getTime()}

1)编辑config.json,设置变量。

如下图:此处设置了4个变量,分别为:username、password、test、dev

2)在录制页面,创建变量。

如下图所示,在录制页面,点击使用变量,弹出使用变量弹窗,使用方式选择为插入变量,变量名,点击添加变量,即可设置变量。

二、更新变量,在录制页面,点击使用变量,弹出使用变量弹窗,使用方式选择为更新变量。

选择想要更新的变量名username,选择取值方式(与断言方式一致,为12种类型),取值正则,即可更新已有变量。

三、使用变量,在录制页面,点击使用变量,鼠标定位需要插入变量的DOM,弹出使用变量弹窗,使用方式选择为插入变量

选择想要插入的已有变量名username,页面自动展示username相关信息。

鼠标定位需要插入变量的DOM为Email的输入框,点击使用变量框的确认按钮,变量添加成功。在输入框中插入该变量username

插入变量的DOM,若要添加断言,可使用变量字符串:{{username}}



6、执行JS

在录制页面,点击执行JS按钮,可输入一段js代码,并执行,例:document.title="test"

输入js代码后,点击确认,浏览器会立即执行该js代码,如下图,title更改为test。



7、添加延迟

在录制页面,点击添加延迟按钮,可在录制过程中添加延迟时间,在添加延迟弹框中,输入延迟时间,并执行,默认为1000ms。



8、脚本跳转

录制过程中,可录制一些公用脚本,例如登录脚本、固定流程脚本等等。

调用公共脚本方法:在开始页面的时候输入sample/test.login.js,或者在录制中间页面时点击脚本跳转,脚本跳转弹框中输入sample/test.login.js

当sample/test.login.js加载完成后,继续别的步骤的录制。



9、上传文件

UI Recorder仅支持Native文件上传, 不支持FLASH上传

直接点击“选择文件”按钮或点击“Upload file”, 占位按钮必需要用role或data-role标注为upload

上传的文件必需保存在/uploadfiles/文件夹中。


录制中禁止如下操作!

1、禁止直接手动修改地址栏中的URL

2、禁止使用TAB切换焦点

3、不要使用双击, WebDriver兼容性不好

4、不要使用鼠标选择部分文本, WebDriver兼容性不好

5、不要手动切换至背景窗口

6、不要点击非关键区域, 仅录制关键步骤




以上为本节内容,如有不全,后续使用过程中,继续补充~

时间: 2024-08-04 10:42:21

UI Recorder 功能详解的相关文章

zabbix专题:第九章 zabbix自动发现功能详解

zabbix自动发现功能详解 对Linux有兴趣的朋友加入QQ群:476794643 在线交流 本文防盗链:http://zhang789.blog.51cto.co zabbix自动发现功能详解 网络发现简介 有100台服务器,不想一台台主机去添加,能不能让zabbix自动添加主机呢,当然可以,网络发现便是这个功能,当然前提条件是所有服务器都已经安装了agent或者snmp(其实也可以不用,鉴于我们大部分功能都用agent,所以请安装上agent),server扫描配置好的ip段,自动添加ho

PHP5.2至5.6的新增功能详解

截至目前(2014.2), PHP 的最新稳定版本是 PHP5.5, 但有差不多一半的用户仍在使用已经不在维护 [注] 的 PHP5.2, 其余的一半用户在使用 PHP5.3 [注].因为 PHP 那"集百家之长"的蛋疼语法,加上社区氛围不好,很多人对新版本,新特征并无兴趣.本文将会介绍自 PHP5.2 起,直至 PHP5.6 中增加的新特征. PHP5.2 以前:autoload, PDO 和 MySQLi, 类型约束 PHP5.2:JSON 支持 PHP5.3:弃用的功能,匿名函数

jmeter 基础功能详解

jmeter 基础功能详解 thread group:包含一组线程,每个线程独立地执行测试计划. sampler:采样器,有多种不同的sample实现,用来发起各种请求,如http请求,jdbc请求,javaTest请求等等. logic controller:逻辑控制器有多种不同的实现,可以决定每个sample的执行顺序. listener:有多种不同的实现,主要用于统计测试接话运行中的数据并展示,如可以进行图形化方式展示响应时间. timer:定时器,有多种不同的实现,可用作每个请求见的停顿

ServletContext作用功能详解

ServletContext作用功能详解 ServletContext,是一个全局的储存信息的空间,服务器开始, 其就存在,服务器关闭,其才释放.request,一个用户可有多个:session,一个用户一个:而servletContext,所有用户共用一 个.所以,为了节省空间,提高效率,ServletContext中,要放必须的.重要的.所有用户需要共享的线程又是安全的一些信息. 换一种方式说吧,运行在JAVA虚拟机中的每一个Web应用程序都有一个与之相关的Servlet上下文.Servle

【转】 /etc/fstab功能详解

[转] /etc/fstab功能详解 最近去客户现场时,遇到 了一个关于挂载文件/etc/fstab文件的问题,就写了一下/etc/fstab文件的作用一个文件中各个参数的含义.供大家参考有不正确的地方敬请指正. 一./etc/fstab文件的作用 磁盘被手动挂载之后都必须把挂载信息写入/etc/fstab这个文件中,否则下次开机启动时仍然需要重新挂载. 系统开机时会主动读取/etc/fstab这个文件中的内容,根据文件里面的配置挂载磁盘.这样我们只需要将磁盘的挂载信息写入这个文件中我们就不需要

Dynamics CRM2013 1:N关系 sub-grid中的“添加现有项”和“添加新建项”功能详解

CRM2013中sub-grid的样式和2011中有了较大的变化,2013和2011界面对比如下 在2011的时候按钮是在ribbon区,1:N的父子关系实体直接点击添加新纪录就可以,但2013就不行了点加号首先会有个下拉框把现有的子实体数据列出来,你可以选择现有的也可以新建 既然你的关系实体是1:N的父子实体,那子的存在肯定是依赖于与父实体的,所以这个地方就压根不存在关联现有实体一旦关联就会报错,所以纯碎新建的话这边的步骤就繁琐了,同时也会给用户带来迷惑 所以这个地方这种情况下完全没必要添加现

使用【百度云推送】第三方SDK实现推送功能详解

之前介绍过如何使用shareSDK实现新浪微博分享功能,今天介绍如何使用百度云推送SDK实现Android手机后台推送功能. 运行效果如下 第一步,如果使用百度的SDK,当然要先成为百度的开发者啦,这个就不详述了.成为开发者之后,我们要建立一个应用,如下图所示 第二步,创建好应用之后,我们点击开方者服务管理,进入工程管理页面,然后点击左侧云推送,进入云推送功能页面,具体如下图 进入云推送详细页面之后,我们点击推送设置,设置好我们的应用的包名,然后点击快速实例,将系统给我们产生的示例代码下载下来

html5开发手机打电话发短信功能,html5的高级开发,html5开发大全,html手机电话短信功能详解

在很多的手机网站上,有打电话和发短信的功能,对于这些功能是如何实现的呢.其实不难,今天我们就用html5来实现他们.简单的让你大开眼界. HTML5 很容易写,但创建网页时,您经常需要重复做同样的任务,如创建表单.在这...有 HTML5 启动模板.空白图片.打电话和发短信.自动完成等等,帮助你提高开发效率的同时,还带来了更炫的功能.好了,我们今天就来做一做看看效果吧!! 看代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitio

.NET源码保护控件VMProtect免费下载及使用教程脱壳等功能详解

原文来自VMProtect龙博方案网www.fanganwang.com VMProtect是一款全新的软件保护工具.与其它大部分的保护程序不同,VMProtect可修改程序的源代码.VMProtect可将被保护文件中的部分代码转化到在虚拟机(以下称作VM)上运行的程序(以下称作bytecode)中.您同样可把VM想象为具备命令系统的虚拟处理器,该命令系统与Intel 8086处理器所使用的完全不同.例如,VM没有负责比较2个操作数的命令,也没有有条件与无条件的移转等.就象您现在看到的,黑客必须