前段时间写了一篇《web自动化框架TestCafe：听说用过的人都爱上了它 》，有部分小伙伴表示对这个框架比较感兴趣，后续有时间会陆续写几篇关于 TestCasfe 使用的文章。今天主要给大家介绍一下 testcafe 这个框架元素定位的方法。

CSS 选择器定位

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

• 点击 id 为 su 的元素

• 点类类属性为 btn 的元素
• 
  

上面这种基于 CSS 的元素定位方式用起来虽然很便捷， 但是对于更复杂的元素定位，CSS 选择器会变得更长且难以编写和维护。

另外 CSS 选择器无法定位父元素，在实际的应用中 CSS 选择器还是会有诸多不便。这边就不做过多的讲解了。

Selector 选择器

由于 CSS 选择器定位元素不是特别方便，因此 testCafe 中提供了一个叫做 Selector 元素定位器函数，接下来就给大家介绍一下 Selector 的使用。

1、选择器基本使用

在使用 Selector 之前我们需要将它导入，然后使用 Selector 的构造函数创建出来一个选择器对象，对于一些简单的元素定位可以直接将 CSS 选择表达式在创建对象时，当如参数传入，js 代码如下：

2、通过文本定位

上面传入 CSS 定位表达式这种方式不支持文本定位，对于文本定位元素，Selector 对象提供了对应的方法：既可以通过文本内容匹配，也可以通过文本包含匹配。

• 文本内容匹配 ：withExactText

• 文本包含匹配：withText

3、通过属性定位

关于通过元素属性匹配，Selector 定位器，同样也提供了对应的方法(withAttribute)，下面我们来演示 withAttribute 的使用案例。

4、节点关系定位

• nextSibling：下一个元素同级元素

• prevSibling：上一个元素同级元素

• parent：获取父级元素

• sibling：所有的兄弟元素

• child：获取所有的子元素。

5、过滤方法

当我们通过选择器获取到某个元素或者元素集合的时候，需要过滤出我们想要的元素进行操作时，那么我们就可以通过Selector提供的相关方法来进行过滤操作定位。

• nth：通过下标选择

• find: 查找匹配节点的后代节点
• 查找匹配集中所有节点的后代节点，并使用 CSS 选择器对其进行过滤。

• filter:过滤符合条件的元素。

• filterHidden：仅选择隐藏的元素
• 具有 display: none 或 visibility: hidden CSS 属性或宽度或高度为零的元素被视为隐藏。

• filterVisibl：仅定位显示的元素
• 不具有 CSS 属性 display: none 或元素的 visibility: hidden 宽度和高度不为零的元素被视为可见。

6、设置等待时间

在定位元素的时候，我们如果需要等到定位的元素出现，在使用Selector时，可以设置一个等待超时的时间，直到等待的元素超时为止，使用如下:

Seletor 选择器的操作

上面我们讲了创建一个 seletor 对象选择元素，接下来咱们一起来看看 seletor 对象的操作。

1、常用的属性

• exists：判断元素是否存在

• count：获取匹配到的元素数量

• textContent ：获取元素中包含的文本(包含子元素的文本)

• visible :元素是否可见

• tagName :元素名称

2、更多的属性

除了上述常用属性，Selector 的其他属性参考如下：

本文作者：柠檬班软件测试（lemonban）——专注于最新最前沿的软件测试技术，解决你的测试技术烦恼，对软件测试感兴趣的朋友赶快关注我们吧！