前言

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

WEB 自动化神器 TestCafe(一) —安装和入门篇https://mp.csdn.net/mp_blog/creation/editor/121563718

Web 自动化神器 TestCafe — 页面基本操作篇https://mp.csdn.net/mp_blog/creation/editor/121563718

今天主要给大家介绍一下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	元素的名称。

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

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

有需要的朋友可以点击即可免费领取哟

【测试架构师】系统初级测试工程师-测试架构师学习之路

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

web自动化笔记一：元素定位的八种方式
一.元素定位优先使用id定位,超链接使用link和paryial_link 二.自动化测试流程(先定位后操作) 1.自动化测试方案->2.自动化脚本编写(定位元素.操作元素.验证操作.记录测试 ...
Appium+python自动化（十）- 元素定位秘籍助你打通任督二脉 - 上卷（超详解
简介你有道灵光从天灵盖喷出来你知道吗,年纪轻轻就有一身横练的筋骨,简直百年一见的练武奇才啊,如果有一天让你打通任督二脉,那还不飞龙上天啊.正所谓我不入地狱谁入地狱,警恶惩奸维护世界和平这个任务就交个 ...
Appium+python自动化（十）- 元素定位秘籍助你打通任督二脉 - 上卷（超详解）
简介你有道灵光从天灵盖喷出来你知道吗,年纪轻轻就有一身横练的筋骨,简直百年一见的练武奇才啊,如果有一天让你打通任督二脉,那还不飞龙上天啊.正所谓我不入地狱谁入地狱,警恶惩奸维护世界和平这个任务就交个 ...
Web 自动化神器，批量下载美图，可直接导入使用
‍ ‍ 作者 | 小碗汤来源 | 进击云原生今天为大家分享一款前端自动化操作神器: Automa. Automa介绍它是一款 Chrome 插件,即使你不会写代码,也能按照自己的需求,完成一系列 ...
python自动定位_自动化的8种元素定位分享助：Python自动
分享助:Python自动化测试页面table列表元素定位页面中有一个通过table列表开关属性和span标签背景替换样式做出来的单选不要去看那个伤口,它有一天会结疤的,疤痕不褪,可它不会再痛. 自动 ...
Web自动化神器，批量下载小姐姐美图，可直接导入使用
大家好,我是小碗汤,今天为大家分享一款前端自动化操作神器: Automa 文末有流程图获取方式,可自行导入享用. Automa介绍它是一款 Chrome 插件,即使你不会写代码,也能按照自己的需求, ...
web自动化测试之Selenium基础 — XPath定位大全
1.什么是 XPath? XPath (XML Path Language) 是一门在 XML 文档中查找信息的语言.XPath 用于在 XML 文档中通过元素和属性进行导航. XPath 包含一个标 ...
aardio 谷歌浏览器自动化 (二) 元素定位
查找元素使用的函数有三个: getEle 查找并返回单个元素对象 getEles 查找并返回元素对象数组 waitEle 循环查找元素对象虽然只有三个函数,但是定位使用了8种元素策略: 由于aard ...
曲鸟全栈UI自动化教学(三)：Selenium页面操作原理及如何高效的进行元素定位
一.前言上篇文章中我们成功编写并启动了第一个selenium脚本.那Selenium是怎样知道我们想要操作哪个元素的呢? 这篇文章将为你讲解Selenium的页面操作原理和高效的元素定位方法. 文章 ...
web页面-元素定位
web自动化测试核心内容: 元素定位网页操作等待 pytest + selenium 项目实战 1.为什么要元素定位元素定位是为了操作浏览器,如输入内容,点击按钮等,就是手工做的,自动化都可以 ...

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

前言