元素定位是Web GUI自动化测试的核心问题之一,也是最难的问题之一,难点主要在于如何能稳定描述元素路径,本文主要总结下常用的xpath定位方法和我的一些经验。
元素定位大致可以分两类,绝对路径定位和相对路径定位,前者即使走投无路也不推荐使用,因为绝对路径经常会发生变化,后者比较常用的。但是相对路径定位方式有很多,需要选一种最有利于脚本兼容性的方式。
1.绝对路径定位
逐层输出元素的位置,如:
//*[@id="app"]/div/div[2]/section/div/div/div[1]/div/div/button/span
绝对路径可直接从浏览器调试窗口获取,但此方式最不可取的,代码结构稍做调整就会不适用,因此即使找不到定位的方式,也不建议使用。
2.相对路径定位
相对路径定位,需要找到确定元素唯一性的特征,定位元素位置。在此分享10种方法,可依次尝试定位。
2.1 id属性定位
最理想的方式,就是使用id属性定位,id一般在当前界面具有唯一性。
图 2-1
图2-1中代码id在当前界面唯一,因此我们最优先选择的定位方式是使用id,只需寻找id=“table-1”的元素即可,因此xpath代码可写为:
//div[@id="tab-1"]
//*[@id="tab-1"]
//表示相对路径,@后跟属性,*表示任何匹配任何节点
2.2 name属性定位
当name属性唯一时,也可用来定位。
图 2-2
如图2-2中name也具有唯一性,也可以通过name来定位元素的位置:
//input[@name="wd"]
2.3 class属性定位
适用于class属性在当前界面具有唯一性的场景。
图 2-3
class属性是比较常用的定位元素方式,图2-3中class具有唯一性,xpath定位如下:
//span[@class="el-pagination__total"]
2.4 标签名定位
有时元素自身标签也可实现定位,常见如button、input、textarea等。
图 2-4
如图2-4当前界面只有一个标签textarea,此时元素可以通过标签名定位。
//div/textarea
2.5 其他属性定位
当以上属性都无法精准定位时,可以考虑placeholder、type、for属性定位,但方式不一定最优。
图 2-5
如图2-5,定位某个标签的位置,for属性具体唯一性,但是class不唯一,此时就可以用for属性定位元素。
//label[@for="name"]
图 2-6
如图2-6定位上传文件的位置,type可以精准定位到元素,路径可以写成:
//input[@type="file"]
图2-7
placeholder也可以定位,但是不一定最优,若信息稍有变化就不适用,图2-7可使用placeholder定位。
//input[@placeholder="如1.0.1"]
此外还有href、title、value等不常用的属性,此处就不一一详细说明了,总之只要具有唯一性的属性都可以用来定位元素,但是需要衡量是否是最优方式。但是注意有些属性值是动态生成的,此类属性不可用于定位。
2.6 使用逻辑运算定位
当单一属性无法满足精准定位的需求时,xpath支持逻辑运算支持与(and)、或(or),这个功能还是比较强大的,最常用的是and,即多个属性确定结合定位元素。
图 2-8
如登陆界面有好几处入口,单一属性都无法精准定位,此时可以herf和class属性结合,实现定位需求,此功能在脚本中比较常用。
//*[@href="#/login" and @class="router-link-active"]
2.7 通过上级节点定位
当现实没那么理想,元素找不到任何可精准定位的属性时,可以先定位父级的位置,再进行元素定位。
图 2-9
图2-9中,父级元素class属性唯一,因此先定位到父级,再实现自身定位。图中父级有3个class类,可选取一种用于定位,也可使用多个class类同时定位。
//div[@class="product-name"]/input
//div[@class="productCopy product-name"]/input
或者通过先定位祖辈(更上层的元素),实现元素定位。
图 2-10
图2-10是定位的一个提交按键位置,元素以及父级属性都很大众,此时可以寻找更上级的元素属性,先定位祖辈位置,再结合元素自身class,唯一确认元素位置。
//div[@class="el-dialog__wrapper delete-dialog"]//button[@class="el-button el-button--primary"]
2.8 通过子节点定位
既然可以通过上层节点定位到子节点,那么也可以通过子节点实现父节点定位,parent就是比较常用的方式。
图 2-11
图2-11中,子节点class属性当前界面唯一,因此可以先定位到i节点,再找寻它的父节点 。此时有两种方法可以选择,“parent::节点名称”或直接..到上一层级节点,具体表达如下:
//i[@class="icon-plus el-icon"]/parent::span
//i[@class="icon-plus el-icon"]/..
2.9 通过相邻目录定位
当无法通过层级关系定位元素时,观察元素的兄弟姐妹们(相邻层级的元素)或者家族长辈(上级的相邻层级元素)的特征,实现元素定位。
图 2-12
图2-12相邻元素很相似,此时可以通过标签下标定位,当然方式也不一定最优,与其他代码不同,下标从1开始,如定位第一个元素“账号信息”位置:
//ul/li[1]
另一种场景是先找寻上层元素的相邻元素,结合自身元素属性,实现定位。
图2-13
图2-13中,元素自身和相邻元素,甚至上级元素都没有无法精准定位,但是再上层label节点可以精准定位,此时通过与label节点结合,再结合自身input,就可以唯一找到元素位置。
//label[@for="name"]/..//input
..表示上一层级节点
2.10 contain/text方法定位
若是以上方法都不能满足你的需求,有一个非常强大的功能就可以使用,模糊匹配关键字。有多种模糊匹配方式,如:匹配开头,中间、结尾字段等,使用比较多的是contains(包含),很多场景可以通过模糊匹配定位。
图2-14
图2-14中元素class属性,以及上级button属性都无法精准定位,此时可以通过匹配文本进行定位。
//span[contains(text(),'绑定设备')]
3.总结
元素定位思路与形容某个人很相似:
- 元素单一属性定位:介绍个人特点,如:他有羽毛扇。
- 元素多属性组合:单个属性不唯一,多个属性组合可唯一确定,如:他谋略超群,且生性多疑。
- 通过上级节点定位:长辈有独特特征,或者与长辈组合可以确定唯一性,如:他是中山靖王之后,汉景帝玄孙。
- 通过子节点定位:子孙中有特殊人物,如:生子当如孙仲谋
- 通过相邻元素定位:找寻家族有特征人物,如:他是刘备的结义兄弟,且有文化。
- 模糊匹配:匹配元素的文本内容,如:他的名字里有个“龙”字。
- 当以上都无法满足定位条件时,给亲的建议是,找亲爱的开发同学,给所需要定位的元素补充上id。
文章来源:芯片开放社区
文章链接:
https://occ.t-head.cn/community/post/detail?spm=a2cl5.14300636.0.0.1b87180flWxVN5&id=658631906446802944