Web 自动化神器 TestCafe(二)—元素定位篇

今天主要给大家介绍一下testcafe这个框架元素定位的方法。

一、CSS 选择器定位

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

• 点击 id 为 su 的元素

  前段时间写了一篇关于web自动化测试框架TestCafe的安装和入门文档，有部分小伙伴表示对这个框架比较感兴趣，后续有时间会陆续写几篇关于TestCasfe使用的文章。今天主要给大家介绍一下testcafe这个框架元素定位的方法。

• 点类类属性为 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的使用案例。

  // 定位包含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 的其他属性参考如下：

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