[Java版]Selenium系列：学会XPATH高级定位，还怕定位不到页面元素？-一一网

前言：在使用selenium2框架做UI自动化测试时，在8种定位页面元素的方法中，是有一个效率排名的：id>name>css>xpath；那么还有其它4种定位元素方法的速度如何呢：tagName\className\linkText\partialLinkText？姑且不论速度，它们也是有固定使用场景的，譬如LinkText两个都只对a标签有效，而那些tagName/className也是跟id/name差不多，必须得唯一啊，哪个开发没事会给你写那么多唯一的元素让你定位去做UI自动化？开发得提高代码复用率啊~~~

职说测试

职说测试

奋斗在职场一线、进阶路上的老长工，CSDN博客专家，职场现身说测试，不懈努力的分享测试技术、框架源码、运维&开发等精品原创文章！欢迎订阅～

15篇原创内容

公众号

本章主旨：介绍xpath定位元素的高级用法：关键字：contains/starts-with、上下级查找、条件组合and/or等元素定位场景。

先来一道练习题：定位页面表格内容的几种方式？HTML源码如下：

<html>
<title></title>
<body>
<div id="ck">
<table border="1" width="500" bordercolor="#ddd">
<tbody>
<tr width="35" >
<th>银行名称</th>
<th>银行限额</th>
</tr>
<tr width="35"  >
<td>招商银行</td>
<td>日限额30万，月累计300万</td>
</tr>

<tr width="35"  >
<td class="xxxtext">中国银行</td>
<td>日限额10万，月累计100万</td>

</tr>
<tr width="35"  >
<td>工商银行</td>
<td>日限额20万，月累计200万</td>
</tr>

</tbody>
</table>
</div>
</body>
</html>
复制代码

页面效果如下：

要求：找到中国银行的限额，通常做法是打开浏览器F12直接找到定位内容复制xpath表达式：//*[@id=”ck”]/table/tbody/tr[2]/td[2]，这种方法呢，一时是没错的，但如果中国银行与其他银行调换了位置呢，那么这个表达式就一定不是中国银行的限额，调整页面元素效果如下：

蓝色即为xpath表达式选中部分，如果继续按照第一次copy的xpath表达式：//*[@id=”ck”]/table/tbody/tr[2]/td[2]，查找元素，找到的会是招商银行的限额；

所以预期不正确，那么要怎么写这个xpath呢？首先我们要找到限额元素的上级Parent，通过上级找到它的下级Children，最后是同级查找Sibling：

先找到中国银行，修改上面的xpath表达式如下

<text()>：//div[@id=”ck”]//td[text()=”中国银行”]

再者发现中国银行的标签与之对应的元素标签是同级的：sibling，那么使用follow-sibling关键字查找同级标签的下级标签

属性：//div[@id=”ck”]//td[text()=”中国银行”]//following-sibling::td

你以为这样就结束了吗？上面的表达式指的是，找到中国银行所在行的同级标签的下一个，那么如果出现多列的时候，需要查找银行描述信息呢？效果如下：

这样这个表达式找到就是中国银行后面两列标签的值，所以xpath的高级用法中还是支持索引取值，从1开始：//div[@id=”ck”]//td[text()=”中国银行”]//following-sibling::td[1]

思考：//div[@id=”ck”]//td[text()=”中国银行”]//following-sibling::td 和 //td[text()=”中国银行”]//following-sibling::td，有什么区别：

xpath从dom中查找元素，所以建议是前者的写法，因为id查找比较快，先找到id所在的父节点，然后再往后查找。

测试的HTML源码如下：

<html>
<title></title>
<body>
<div id="ck">
<table border="1" width="500" bordercolor="#ddd">
<tbody>
<tr width="35" >
<th>银行名称</th>
<th>银行限额</th>
<th>描述信息</th>
</tr>
<tr width="35"  >
<td>招商银行</td>
<td>日限额30万，月累计300万</td>
</tr>

<tr width="35"  >
<td class="xxxtext">中国银行</td>
<td>日限额10万，月累计100万</td>
<td>这是一家很大的银行</td>
</tr>
<tr width="35"  >
<td>工商银行</td>
<td>日限额20万，月累计200万</td>
</tr>

</tbody>
</table>
</div>
</body>
</html>
复制代码

友情扩展：

xpath其他关键字的用法：//div[@id=”ck”]//td[starts-with(text(),”中国银行”)]、//div[@id=”ck”]//td[contains(text(),”中国银行”)]，关键字还有ends-with查找某个元素的属性值以xxx结尾

xpath高级应用，关键字:contains，配合条件查找元素：and、or；

dom元素示例：

<span class="btn_wr s_btn_wr bg" id="s_btn_wr">
    <input type="submit" value="百度一下" id="su" class="btn self-btn bg s_btn">
    <input type="submit" value="百度一下就知道" id="su1" class="s_btn">
</span>
复制代码

在上面介绍的xpath用法，我们知道了starts-with\contains\ends-with等关键字用法；但有可能找到的元素不是唯一的，可能需要配合条件and、or查找；例如：

匹配的元素就不是唯一：//input[@type="submit"] 
那么可以这样写：//input[@type="submit" and @id='su'] 
还可以这样写：//input[@type="submit" and contains(@class,'self-btn')]
复制代码

如果能确定某一个是唯一，写法就比较多了：

如：//input[starts-with(@value,'百度一下') and @id='su']
还能这样：//input[@value='百度一下' or @id='su']
复制代码

以上示例只是为了演示xpath的关键字用法，实际百度的搜索按钮使用id就可以准确找到该元素。

xpath的语法关键字：ends-with找不到元素的原因，可能是你的浏览器还不支持xpath2.0

Xpath查找父级或平级标签属性，语法如下：

父级：xpath-to-some-element//parent::

平级上节点：xpath-to-some-element//preceding-sibling::

平级下节点：xpath-to-some-element//following-sibling::

演示示例：

<span id="s_kw_wrap" class="bg s_ipt_wr quickdelete-wrap">
    <input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">
    <a href="" id="quickdelete" title="清空" class="quickdelete" style="top: 0px; right: 0px; display: none;">
    </a>
    <span class="soutu-hover-tip" style="display: none;">按图片搜索
    </span>
</span>
复制代码

咱先定位找到input元素：//input[@id=”kw”]，如此找法仅仅是为了演示，因为span是可以通过id直接找到该元素的

父级示例：//input[@id="kw"]//parent::span
平级上级示例：//input[@id="kw"]//following-sibling::a
平级下级示例：//input[@id="kw"]//following-sibling::a

级别展示还可以混合使用：//input[@id="kw"]//following-sibling::a//preceding-sibling::span//parent::span
解释：显示通过找到input平级的下节点a，再找到a标签平级的上节点span，最后再找到span标签的上级标签span
复制代码

送两道关于xpath的面试题，欢迎大家留言：

1、绝对路径/相对路径的区别?

2、单斜线和双斜线的意义？