元素定位大致可以分两类，绝对路径定位和相对路径定位，前者即使走投无路也不推荐使用，因为绝对路径经常会发生变化，后者比较常用的。但是相对路径定位方式有很多，需要选一种最有利于脚本兼容性的方式。
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/textarea2.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。
原文作者：zhangyj
点击查看原文
