Web UI自动化中XPath的使用
XPath 是XML Path的简称，是一门在xml文档中查找信息的语言。由于HTML文档本身就是一个标准的XML页面。selenium支持八大定位方式，其中xpath是非常强大的元素查找方式，特别是在以文本方式查找元素，父级，兄弟级节点元素查找中。
在Chrome中检查xpath是否正确
在说xpath使用之前，先说一个在chrome中检查xpath是否正确的方法
在chrome浏览器中，用F12打开devtools
进入到Console tab
然后输入$x("xpath")
当xpath正确并在页面中有符合的元素时，就会显示出页面上的元素，如下图
当页面不包含此xpath的元素，显示为[]，如下图
当写入的xpath错误时，就报xpath不正确错误
例如如下图报错：“is not a valid XPath expression”
$x("path")结果解析
如上图 xpath为.//a 即查找当前页面所有的a标签
红箭头指向个数14, 说明此页面检查出满足此.//a xpath的元素有14个
点击前面的三角箭头，如下图所示，显示出所有的满足xpath标签的元素，并且当鼠标移动到对应的结果后，页面的元素会有一个蓝色的背景，说明此时鼠标执行的元素对应页面上的此元素。（当鼠标移动到对应元素后，在页面看不到对应的元素的显示，说明此时这个元素是在页面不可见的）
双击对应的元素后，会跳转到对应的DOM页面中
在web UI自动化中常用到的Xpath
以文本查找元素
text()
例如查找如上图中span的文本为“发行申请”的元素
.//span[text()='发行申请']
从截图结果看 查找到了两个span元素，是因为页面中还有一个span元素的为不可见
注意text()查找元素的时候，只能查找到当前标签中包含了文本信息的控件
例如如上图，我们查找div中文本为“发行申请”的元素
.//div[text()='发行申请']
如上图所示，可见符合要求的元素为空，是因为没有div中文本为发行申请的标签，只有span中文本为发行申请的标签，那么如果我们还是需要找到文本为发行申请的div呢？
string()
当要查找不是标签中直接文本的控件此时需要用string()函数
如下查找包含文本为首页发行申请的div
查找包含某个文本的控件
contains()
例如查找文本包含“发行”的label控件
.//label[contains(text(),'市场')]
查找不包含某个文本的控件
not(contains())
例如查找不包含“市场”的label控件
.//label[not(contains(text(),'市场'))]
去掉文本两边的空格和回车
normalize-space()
例如，如上图要找到button下文字为“新增”的span标签
如果直接用：.//button[text()='新增']这个进行查找呢
如下图所示可以看到查找结果为空，这是因为DOM结构中的新增的末尾带有空格和回车
.//button//span[normalize-space(text())='新增']
XPath轴
下面例子都以百度首页为例
XPath轴的使用
XPath提供了如下的轴对称节点
以下主要从我在UI自动化中经常使用到的节点做一些具体说明
parent - 父级元素
查找“百度热搜”的父级a标签
ancestor - 祖先元素
查找“百度热搜”的所有祖先元素
.//div[@aria-label='百度热搜']//ancestor::*
查找“百度热搜”的class为s-hotsearch-title的祖先级div元素
.//div[@aria-label='百度热搜']//ancestor::div[@class='s-hotsearch-title']
下面的例子以下面DOM结构为例（百度首页的DOM片段）
following-sibling - 当前元素节点标签之后的所有兄弟节点
例如查找id为s-hotsearch-wrapper的向下兄弟textarea节点
.//div[@id='s-hotsearch-wrapper']//following-sibling::textarea
preceding-sibling - 当前元素节点标签之前的所有兄弟节点
例如查找id为s-hotsearch-wrapper的向上兄弟form节点
.//div[@id='s-hotsearch-wrapper']//preceding-sibling::form
preceding - 当前元素节点标签之前的所有节点
例如查找id为s-hotsearch-wrapper的div标签，之前的id为lm-new的标签
.//div[@id='s-hotsearch-wrapper']//preceding::*[@id='lm-new']
following - 当前元素节点标签之后的所有节点
例如查找id为m的标签之后的class为hot-title的标签
.//div[@id='m']//following::*[@class='hot-title']
根据多个条件查找
and - 与条件
.//div[@aria-label='百度热搜' and contains(@class,'title-text')]
or - 或条件
例如查找class为hot-title 或者class包含title-text的标签
.//*[@class='hot-title' or contains(@class,'title-text')]
查找多个控件 - 使用“|”连接
当需要一次性查找多个不同xpath的元素时，可以使用"|" 对xpath路径进行相连
例如查找id为u和id为u1的控件
.//*[@id='u'] | .//*[@id='u1']
starts-with 查找以XX开头的元素
例如查找class为head开头的div
.//div[starts-with(@class,'head')]
在用Selenium做Web UI自动化时，对元素的定位是最基础的需要，在八中定位方式中Xpath是最强大的一种定位方式，但是有些同学在使用XPath时，会直接通过浏览器复制出DOM中的xpath,这个是不可取的，直接复制出来的xpath稳定性不高（当开发只是删除或新增以个div这个小小的改动，就需要更改xpath），所以在实际的使用中需要我们写出稳定性相对比较高的XPath. 以上是我在做UI自动化时常用的XPath，所以分享给大家，希望可以帮助到大家。
