-
Notifications
You must be signed in to change notification settings - Fork 9
元素定位
元素定位问题可以说是 UI 自动化测试中最重要的组成部分,也是脚本书写中最难最耗时的一个部分,定位方式选取的好坏直接决定了脚本的稳定性。
KoolTest 提供五种元素定位方式,文本定位、位置定位、DOM定位、图片定位(暂不支持)、OCR定位(暂不支持),位置定位分为绝对位置和相对位置方式,比较简单此处不详说明。
文本定位可以说是最直观的一种定位方式,他可以对屏幕上出现的任何文字进行定位。文本定位可以结合以下几种特殊用法达到更强大的作用。
当用于定位的文字在屏幕上存在多个对应元素时,我们可以通过在元素后指定 index 的方式进行选择。
* tap "登录"/0 # 点击屏幕上第0个"登录"
* tap "登录"/-1 # 点击屏幕上最后一个元素ko
* tap "登录"/span # 点击 dom 标签为 span 的 "登录",可以为任意 dom 标签
小技巧:由于弹窗是覆盖在其他元素上的,所以弹窗上的元素查找顺序都排在后面,所以结合 index 使用会很方便
如下为 SAAS 的回收站列表,想测试恢复功能,需要先点击列表中某个元素的恢复
按钮,弹出确认弹窗,然后再点击弹窗上的恢复
。我们就可以简单实现为:
* tap "恢复"/0
* tap "恢复"/-1
可以通过 “|” 来同时操作多种文本,此种方式也可以用在支持多语言上。
* tap "登录|Login"
* tap "*登录*"
用 * 包含文本,表示只要包含"登录"这个词就可以,比如有个元素叫 "登录酷家乐",如果不加 * 是定位不到的。
* assert_exists "登录"/2
assert_exists 在文本匹配时默认为包含模式,后面可以接一个 /n
,表示判断 "登录" 这个词在当前屏幕上是否出现了 n 次。
有时候一些元素并没有明显的文本标志,所以我们需要采用 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 是否正确,还是如上图所示,一样右键打开浏览器的 Inspect(检查),在 Elements(元素)栏目下的子栏目中有个 SelectorsHub 的 Tab,点击后把刚刚拷贝的 Xpath 填入其中,回车后屏幕上则会看到匹配了几个元素,并且会把匹配的元素框选上。此时你也可以优化下这个 xpath。目前酷家乐网站上的 class 后面往往带了些看着随机的数字,我们可以把这个 xpath 优化为如下表示:
//div[starts-with(@class,'modals-close')]
在 SelectorsHub 中查看,发现一样只有那个关闭按钮匹配上了。明显这个 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教程