分享程序员开发的那些事...
更新时间：2021-09-08 20:20:18
元素定位是Web GUI自动化测试的核心问题之一，也是最难的问题之一，难点主要在于如何能稳定描述元素路径，本文主要总结下常用的xpath定位方法和我的一些经验。
元素定位大致可以分两类，绝对路径定位和相对路径定位，前者即使走投无路也不推荐使用，因为绝对路径经常会发生变化，后者比较常用的。但是相对路径定位方式有很多，需要选一种最有利于脚本兼容性的方式。
逐层输出元素的位置，如：
//*[@id="app"]/div/div[2]/section/div/div/div[1]/div/div/button/span
绝对路径可直接从浏览器调试窗口获取，但此方式最不可取的，代码结构稍做调整就会不适用，因此即使找不到定位的方式，也不建议使用。
相对路径定位，需要找到确定元素唯一性的特征，定位元素位置。在此分享10种方法，可依次尝试定位。
最理想的方式，就是使用id属性定位，id一般在当前界面具有唯一性。
图 2-1
图2-1中代码id在当前界面唯一，因此我们最优先选择的定位方式是使用id，只需寻找id=“table-1”的元素即可，因此xpath代码可写为：
//div[@id="tab-1"]
//*[@id="tab-1"]
//表示相对路径，@后跟属性，*表示任何匹配任何节点
当name属性唯一时，也可用来定位。
图 2-2
如图2-2中name也具有唯一性，也可以通过name来定位元素的位置：
//input[@name="wd"]适用于class属性在当前界面具有唯一性的场景。
图 2-3
class属性是比较常用的定位元素方式，图2-3中class具有唯一性，xpath定位如下：
//span[@class="el-pagination__total"]
有时元素自身标签也可实现定位，常见如button、input、textarea等。
图 2-4
如图2-4当前界面只有一个标签textarea，此时元素可以通过标签名定位。
//div/textarea
当以上属性都无法精准定位时，可以考虑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等不常用的属性，此处就不一一详细说明了，总之只要具有唯一性的属性都可以用来定位元素，但是需要衡量是否是最优方式。但是注意有些属性值是动态生成的，此类属性不可用于定位。
当单一属性无法满足精准定位的需求时，xpath支持逻辑运算支持与（and）、或（or），这个功能还是比较强大的，最常用的是and，即多个属性确定结合定位元素。
图 2-8
如登陆界面有好几处入口，单一属性都无法精准定位，此时可以herf和class属性结合，实现定位需求，此功能在脚本中比较常用。
//*[@href="#/login" and @class="router-link-active"]
当现实没那么理想，元素找不到任何可精准定位的属性时，可以先定位父级的位置，再进行元素定位。
图 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"]
既然可以通过上层节点定位到子节点，那么也可以通过子节点实现父节点定位，parent就是比较常用的方式。
图 2-11
图2-11中，子节点class属性当前界面唯一，因此可以先定位到i节点，再找寻它的父节点 。此时有两种方法可以选择，“parent::节点名称”或直接..到上一层级节点，具体表达如下：
//i[@class="icon-plus el-icon"]/parent::span
//i[@class="icon-plus el-icon"]/..
当无法通过层级关系定位元素时，观察元素的兄弟姐妹们（相邻层级的元素)或者家族长辈（上级的相邻层级元素）的特征，实现元素定位。
图 2-12
图2-12相邻元素很相似，此时可以通过标签下标定位，当然方式也不一定最优，与其他代码不同，下标从1开始，如定位第一个元素“账号信息”位置：
//ul/li[1]
另一种场景是先找寻上层元素的相邻元素，结合自身元素属性，实现定位。
图2-13
图2-13中，元素自身和相邻元素，甚至上级元素都没有无法精准定位，但是再上层label节点可以精准定位，此时通过与label节点结合，再结合自身input，就可以唯一找到元素位置。
//label[@for="name"]/..//input
..表示上一层级节点
若是以上方法都不能满足你的需求，有一个非常强大的功能就可以使用，模糊匹配关键字。有多种模糊匹配方式，如：匹配开头，中间、结尾字段等，使用比较多的是contains（包含），很多场景可以通过模糊匹配定位。
图2-14
图2-14中元素class属性，以及上级button属性都无法精准定位，此时可以通过匹配文本进行定位。
//span[contains(text(),'绑定设备')]
元素定位思路与形容某个人很相似：
文章来源：芯片开放社区
文章链接：https://occ.t-head.cn/community/post/detail?spm=a2cl5.14300636.0.0.1b87180flWxVN5&id=658631906446802944