#前言 　　

　　前段时间，我写了一篇关于web自动化测试框架TestCafe的安装和介绍的文档。很多小伙伴对这个框架表示了兴趣，有时间会陆续写几篇关于Testcafe使用的文章。 　　

　　查看详情。 　　

　　网络自动化工件测试咖啡馆(一)——安装和介绍 　　

　　网络自动化工件测试-基本页面操作 　　

　　今天，我将主要介绍在testcafe框架中定位元素的方法。 　　

　　# 1.CSS选择器的定位 　　

　　使用testcafe操作元素时，我们可以通过CSS选择器直接指定要操作的元素，例如点击元素，输入文本内容如下： 　　

　　*点击id为su的元素 　　

　　前段时间，我写了一篇关于web自动化测试框架TestCafe的安装和介绍的文档。我的一些朋友表达了对这个框架的兴趣，有时间我会陆续写几篇关于Testcafe使用的文章。今天，我将主要介绍在testcafe框架中定位元素的方法。 　　

　　*点类属性为btn的元素 　　

　　等待t.click('。BTN’)； 　　

　　上面的基于CSS的元素定位方法使用起来非常方便，但是对于更复杂的元素定位，CSS选择器会变得更长，并且很难编写和维护，而CSS 　　

　　选择器无法定位父元素，在CSS选择器的实际应用中仍然会有很多不便。这里我就不做过多的解释了。 　　

　　# 2.选择器选择元素 　　

　　因为CSS Selector定位元素不是特别方便，所以在testCafe中提供了一个名为Selector元素定位器的函数，接下来会介绍给大家。 　　

　　选择器的使用。 　　

　　# 1、选择器的基本用法 　　

　　在使用选择器之前，我们需要导入它，然后使用选择器的构造函数创建一个选择器对象。对于一些简单的元素定位，可以直接使用CSS 　　

　　当创建对象时选择表达式作为参数传入时，js代码如下： 　　

　　从“testcafe”导入{ Selector }；//找到id为su ('# su ')的元素const su=选择器；//定位元素常量kw=选择器('。kw’)，其类别属性为kw； 　　

　　# 2.按文本定位 　　

　　上面传入的css定位表达式不支持文本定位。对于文本定位元素，选择器对象提供相应的方法：通过文本内容匹配或通过文本包含匹配。 　　

　　* 1.文本内容匹配：没有从“test cafe”导入精确文本{ selector }；//定位文本是百度元素Const Baidu=selector()。WithExactText('百度') 　　

　　* 2.文本包含匹配项：来自“test cafe”的with text import { selector }；//定位文本包含跨度标签Const Baidu=selector ('span ')。带文本('百度') 　　

　　# 3.按属性定位 　　

　　关于元素属性匹配和选择器定位器，也提供了相应的方法(带属性)。让我们演示withAttribute的用例。 　　

　　参数 　　

　　解释 　　

　　- | - 　　

　　attrName 　　

　　属性名(可传递字符串|正则表达式) 　　

　　属性值(不需要) 　　

　　属性值(可传递字符串|正则表达式) 　　

　　//定位div元素选择器(' div ')。withattribute ('myAttr ')包含myAttr属性；//找到a标记选择器(' a ')。带有属性(' herf '，' http://www.baidu，com ')，herf属性为http://； 　　

　　# 4.节点关系定位 　　

　　* 1.下一个同级元素：下一个元素的同级元素//定位下一个同级元素选择器(' a ')。A标记的下一个同级()； 　　

　　* 2.Prevsibiling:上一个元素的同级元素//定位上一个同级元素选择器(' p ')。预初始化() 　　

　　* 3.parent:获取父元素//父元素选择器(' #u ')。定位id为u的标记的父级() 　　

　　* 4，同级：所有同级元素//定位所有同级元素选择器(' li ')。兄弟姐妹() 　　

　　* 5.子元素：获取所有子元素。//定位ul标签选择器(' ul ')的所有子标签。儿童() 　　

　　# 5.过滤方法 　　

　　当我们通过selector获取一个元素或者一组元素时，我们需要过滤掉我们想要操作的元素，然后我们就可以使用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

元素的名称。

看到这里的朋友不妨点个赞，码字不易，谢谢大家。

成长的路上少不了各种资源的“助力”都给你准备好了，如下图软件测试大礼包！

有需要的朋友可以关注并私信我关键词“资料”即可免费领取哟

qvj2lq49k0/51bc926d581d414f92066f4b1d9e67c3'>