前言
前段时间写了一篇关于web自动化测试框架TestCafe的安装和入门文档,有部分小伙伴表示对这个框架比较感兴趣,后续有时间会陆续写几篇关于TestCasfe使用的文章。今天主要给大家介绍一下testcafe这个框架元素定位的方法。
一、css选择器定位
使用testcafe对元素进行操作的时候,我们可以直接通过css选择器指定要操作的元素,比如,点击元素,input输入文本内容,如下:
- 点击id为su的元素
await t.click('#su');
- 点类类属性为btn的元素
await t.click('.btn');
上面这种基于css的元素定位方式用起来虽然很便捷, 但是对于更复杂的元素定位,CSS选择器会变得更长且难以编写和维护,另外css选择器无法定位父元素,在实际的应用种css选择器还是会有诸多不便。这边就不做过多的讲解了。
二、Selector选择元素
由于css选择器定位元素不是特别方便,因此testCafe中提供了一个叫做Selector元素定位器函数,接下来就给大家介绍一下Selector的使用。
1、选择器基本使用
在使用Selector之前我们需要将它导入,然后使用Selector的构造函数创建出来一个选择器对象,对于一些简单的元素定位可以直接将css选择表达式在创建对象时当如参数传入,js代码如下:
import { Selector } from 'testcafe';
// 定位id为su的元素
const su = Selector('#su');
// 定位class属性为kw的元素
const kw = Selector('.kw');
2、通过文本定位
上面传入css定位表达式这种方式不支持文本定位,对于文本定位元素,Selector对象提供了对应的方法:既可以通过文本内容匹配,也可以通过文本包含匹配。
-
1、文本内容匹配 :withExactText
import { Selector } from 'testcafe'; // 定位 文本为百度的元素 const baidu = Selector().withExactText('百度')
-
2、文本包含匹配:withText
import { Selector } from 'testcafe'; // 定位 文本包含百度的span标签 const baidu = Selector('span').withText('百度')
3、通过属性定位
关于通过元素属性匹配,Selector定位器,同样也提供了对应的方法(withAttribute),下面我们来演示withAttribute的使用案例。
参数 | 说明 |
---|---|
attrName | 属性名(可传字符串|正则表达式) |
attrValue(非必填) | 属性值(可传字符串|正则表达式) |
// 定位包含myAttr属性的div元素
Selector('div').withAttribute('myAttr');
// 定位herf属性为http://www.baidu,com的a标签
Selector('a').withAttribute('herf', 'http://www.baidu,com');
4、节点关系定位
-
1、nextSibling:下一个元素同级元素
// 定位a标签的下一个兄弟元素 Selector('a').nextSibling();
-
2、prevSibling:上一个元素同级元素
// 定位p标签的上一个兄弟元素 Selector('p').prevSibling()
-
3、parent:获取父级元素
// 定位id为u的标签的父元素 Selector('#u').parent()
-
4、sibling:所有的兄弟元素
// 定位li标签所有的兄弟元素 Selector('li').sibling()
-
5、child:获取所有的子元素。
// 定位ul标签所有的子标签 Selector('ul').child()
5、过滤方法
当我们通过选择器获取到某个元素或者元素集合的时候,需要过滤出我们想要的元素进行操作时,那么我们就可以通过Selector提供的相关方法来进行过滤操作定位。
-
1、nth:通过下标选择
// 选择第一个div元素 Selector('div').nth(0)
-
2、find: 查找匹配节点的后代节点
查找匹配集中所有节点的后代节点,并使用CSS选择器对其进行过滤。
Selector().find(cssSelector) // cssSelector:用于过滤子元素的CSS选择器字符串。
-
2、filter:过滤符合条件的元素。
Selector().filter(cssSelector) // cssSelector:用于过滤元素的CSS选择器字符串。
-
3、filterHidden:仅选择隐藏的元素
具有
display: none
或visibility: hidden
CSS属性或宽度或高度为零的元素被视为隐藏。// 定位隐藏的div元素 Selector('div').filterHidden()
-
4、filterVisibl:仅定位显示的元素
不具有CSS属性
display: none
或元素的visibility: hidden
宽度和高度不为零的元素被视为可见。// 定位处于显示状态class为box的元素 Selector('.box').filterVisible();
6、设置等待时间
在定位元素的时候,我们如果需要等到定位的元素出现,在使用Selector时,可以设置一个等待超时的时间,直到等待的元素超时为止,使用如下:
Selector('#elementId', { timeout: 500 })
三、Seletor选择器的操作
上面我们讲了创建一个seletor对象选择元素,接下来咱们一起来看看seletor对象的操作。
1、常用的属性
-
exists:判断元素是否存在
// 判断元素是否存在,返回值布尔值 const res = Selector('#submit-button').exists;
-
count:获取匹配到的元素数量
// 获取匹配到的数量 const num = Selector('.column.col-2 label').count;
-
textContent :获取元素中包含的文本(包含子元素的文本)
const text = Selector('.column.col-2 label').textContent;
-
visible :元素是否可见
const num = Selector('.column.col-2 label').count;
-
tagName :元素名称
const num = Selector('.column.col-2 label').tagName;
2、更多的属性
除了上述常用属性,Selector的其他属性参考如下:
属性 | 描述 |
---|---|
attributes |
元素的属性为{ name: value, ... } 。您也可以使用该getAttribute 方法访问属性值。 |
boundingClientRect |
元素的大小及其相对于视口的位置。包含left ,right ,bottom ,top ,width 和height 属性。 |
checked |
对于复选框和单选输入元素,其当前状态。对于其他元素,undefined 。 |
classNames |
元素类的列表。 |
clientHeight |
元素的内部高度,包括填充,但不包括水平滚动条的高度,边框或边距。 |
clientLeft |
元素左边框的宽度。 |
clientTop |
元素顶部边框的宽度。 |
clientWidth |
元素的内部宽度,包括填充,但不包括垂直滚动条的宽度,边框或边距。 |
focused |
true 如果该元素已聚焦。 |
id |
元素的标识符。 |
innerText |
元素的文本内容“呈现”。 |
namespaceURI |
元素的名称空间URI。如果元素没有命名空间,则此属性设置为null |
offsetHeight |
元素的高度,包括垂直填充和边框。 |
offsetLeft |
元素左上角在offsetParent 节点内向左偏移的像素数。 |
offsetTop |
元素左上角在offsetParent 节点内偏移到顶部的像素数。 |
offsetWidth |
元素的宽度,包括垂直填充和边框。 |
selected |
表示``当前已选择元素。对于其他元素,undefined |
scrollHeight |
元素内容的高度,包括由于溢出而在屏幕上不可见的内容。 |
scrollLeft |
元素内容向左滚动的像素数。 |
scrollTop |
元素内容向上滚动的像素数。 |
scrollWidth |
元素内容的像素宽度或元素本身的宽度,以较大者为准。 |
tagName |
元素的名称。 |