Skip to content

元素定位

Chris edited this page Aug 19, 2021 · 2 revisions

元素定位

元素定位问题可以说是 UI 自动化测试中最重要的组成部分,也是脚本书写中最难最耗时的一个部分,定位方式选取的好坏直接决定了脚本的稳定性。

KoolTest 提供五种元素定位方式,文本定位位置定位DOM定位图片定位(暂不支持)、OCR定位(暂不支持),位置定位分为绝对位置和相对位置方式,比较简单此处不详说明。

文本定位

文本定位可以说是最直观的一种定位方式,他可以对屏幕上出现的任何文字进行定位。文本定位可以结合以下几种特殊用法达到更强大的作用。

1,index 指定元素

当用于定位的文字在屏幕上存在多个对应元素时,我们可以通过在元素后指定 index 的方式进行选择。

* tap "登录"/0  # 点击屏幕上第0个"登录"
* tap "登录"/-1 # 点击屏幕上最后一个元素ko
* tap "登录"/span # 点击 dom 标签为 span 的 "登录",可以为任意 dom 标签

小技巧:由于弹窗是覆盖在其他元素上的,所以弹窗上的元素查找顺序都排在后面,所以结合 index 使用会很方便

如下为 SAAS 的回收站列表,想测试恢复功能,需要先点击列表中某个元素的恢复按钮,弹出确认弹窗,然后再点击弹窗上的恢复。我们就可以简单实现为:

* tap "恢复"/0
* tap "恢复"/-1

2,或操作

可以通过 “|” 来同时操作多种文本,此种方式也可以用在支持多语言上。

* tap "登录|Login"

3,包含匹配

* tap "*登录*"

用 * 包含文本,表示只要包含"登录"这个词就可以,比如有个元素叫 "登录酷家乐",如果不加 * 是定位不到的。

4,结合 assert_exists 来判断数量

* assert_exists "登录"/2

assert_exists 在文本匹配时默认为包含模式,后面可以接一个 /n,表示判断 "登录" 这个词在当前屏幕上是否出现了 n 次。

DOM 定位

有时候一些元素并没有明显的文本标志,所以我们需要采用 DOM 元素的定位方式,KoolTest 支持 5 种 DOM 元素定位方式(xpath,cssSelector, className, id, accessibilitId(移动端测试专用))。我们推荐使用 xpath,结合 KoolTest 内置的 SelectorsHub 我们可以更快速的找到合适的元素 xpath。

此处我们以点击一个弹窗上的 X 按钮为例

首先在你想要获取 xpath 的元素上点击右键,拷贝 xpath,然后可以通过以下两种方式使用

1,可以在 config 目录中创建 elements.csv 文件,把 xpath 张贴到对应位置,建议可以使用 Excel 等能打开 csv 的工具编辑

"name","xpath"
"关闭","//div[@class='modals-close_b81b6']//*[local-name()='svg']"

然后在使用处使用 element://关闭 就可以定位到该元素,其中 name 为该元素的命名

2,也可以直接在脚本中表述,以下 element://xpath/ 为固定标示

element://xpath///div[@class='modals-close_b81b6']//*[local-name()='svg']

调试 xpath

有时候你需要确认下这个 xpath 是否正确,还是如上图所示,一样右键打开浏览器的 Inspect(检查),在 Elements(元素)栏目下的子栏目中有个 SelectorsHub 的 Tab,点击后把刚刚拷贝的 Xpath 填入其中,回车后屏幕上则会看到匹配了几个元素,并且会把匹配的元素框选上。此时你也可以优化下这个 xpath。目前酷家乐网站上的 class 后面往往带了些看着随机的数字,我们可以把这个 xpath 优化为如下表示:

//div[starts-with(@class,'modals-close')]

在 SelectorsHub 中查看,发现一样只有那个关闭按钮匹配上了。明显这个 xpath 的稳定性就比刚刚直接获得的 xpath 要好很多。

几个实用的 xpath 技巧

表达式 描述 举例
@ 选取属性。 //*[@class='xxx'] 选取所有有class 属性,并且为 xxx 的元素
// 从匹配选择的当前节点选择文档中的节点,而不考虑它们的位置。 //*[@class='xxx']/div
//*[@class='xxx']//div
一个斜杆表示选择直接的子元素,而两个斜杆可以选择这个元素下的所有为 div 的子元素和孙子元素,而不止直接子元素
| 可以选取若干个路径 //div |//span 选取文档中的所有 div 和 span 元素。
* 匹配任何元素节点。
contains/starts-with/ends-with/matches 匹配的方式,matches 支持正则 如上例子使用了 starts-with 表示所有 class 属性开头为 'modal-close' 的 div 元素
.. 选取当前节点的父节点。 这个在列表类元素选取的时候特别有用

更多可参考 XPath教程