利用Selenium在做前端UI自动化的时候，在元素定位方面主要使用了XPATH和jQuery两种方法。XPATH作为主要定位手段，jQuery作为补充定位手段。因为在通过XPATH进行定位的时候，Selenium是通过游览器原生的API进行操作，更接近模拟用户的操作；而通过jQuery作为定位的时候，实质是向游览器发送一段JavaScript代码，虽然可以达到目的，但模拟效果不如前者。
以下列举了一些常用的定位写法。
- 通过id定位元素
<div class="input-outer" data-render="true"> ???<input type="text" name="templateName2" id="tempdata" size="20" maxlength="20" class="input tuiRequired tuiUpper tuiTrim myRule" value=""></div>jQuery写法: $("input#tempdata")
XPATH写法: //input[@id="tempdata"]
- 通过class定位元素
<span class="icon sm icon-cross hover"></span>jQuery写法: $("span.icon.sm.icon-cross.hover")
XPATH写法: //span[@class="icon sm icon-cross hover"]
- 通过文本内容定位元素
<span class="name">CA模板管理</span>jQuery写法: $("span:contains(‘CA模板管理‘)")
XPATH写法: //span[contains(text(),"CA模板管理")]
- 多属性组合定位元素
<div class="tab-title">模板规则列表</div>定位思路：通过class和文本内容定位元素
jQuery写法: $("div.tab-title:contains(‘模板规则列表‘)")
XPATH写法: //div[@class="tab-title" and contains(text(),"模板规则列表")]
- 匹配子元素
<div class="h-ctrl h-close"> ???<span class="icon sm icon-cross hover">A</span></div><div class="x-ctrl x-close"> ???<span class="icon sm icon-cross hover">A</span></div>定位第二个A的思路：两个A的父元素不同，通过父元素定位子元素
写法1：
jQuery写法: $("div.x-ctrl.x-close > span.icon.sm.icon-cross.hover")
XPATH写法: //div[@class="x-ctrl x-close"]/span[@class="icon sm icon-cross hover"]
写法2：
jQuery写法: $("div.x-ctrl.x-close").children("span.icon.sm.icon-cross.hover")
XPATH写法: //div[@class="x-ctrl x-close"]/child::span[@class="icon sm icon-cross hover"]
- 匹配到的元素的第一个
<div class="h-ctrl h-close"> ???<span class="icon sm icon-cross hover">A</span></div><div class="x-ctrl x-close"> ???<span class="icon sm icon-cross hover">A</span></div>定位第一个A
jQuery写法一: $("span.icon.sm.icon-cross.hover").first()
jQuery写法二: $("span.icon.sm.icon-cross.hover").eq(0)
XPATH写法: (//span[@class="icon sm icon-cross hover"])[1]
- 匹配到的元素的最后一个
<div class="h-ctrl h-close"> ???<span class="icon sm icon-cross hover">A</span></div><div class="x-ctrl x-close"> ???<span class="icon sm icon-cross hover">A</span></div>定位最后一个A
jQuery写法一: $("span.icon.sm.icon-cross.hover").last()
jQuery写法二: $("span.icon.sm.icon-cross.hover").eq(-1)
XPATH写法: (//span[@class="icon sm icon-cross hover"])[last()]
- 匹配到的元素的倒数第二个
<div class="h-ctrl h-close"> ???<span class="icon sm icon-cross hover">A</span></div><div class="x-ctrl x-close"> ???<span class="icon sm icon-cross hover">A</span></div><div class="y-ctrl y-close"> ???<span class="icon sm icon-cross hover">A</span></div>定位倒数第二个A
jQuery写法: $("span.icon.sm.icon-cross.hover").eq(-2)
XPATH写法: (//span[@class="icon sm icon-cross hover"])[last()-1]
- 匹配当前元素的后代元素(子、孙等)
<div class="x-window"> ???<div class="h-ctrl h-close"> ???????<span class="icon sm icon-cross hover">A</span> ???</div></div> ??<div class="y-window"> ???<div class="h-ctrl h-close"> ???????<span class="icon sm icon-cross hover">A</span> ???</div></div> ?<div class="z-window"> ???<div class="h-ctrl h-close"> ???????<span class="icon sm icon-cross hover">A</span> ???</div></div> 定位中间的A
jQuery写法: $("div.y-window").find("span.icon.sm.icon-cross.hover")
XPATH写法: //div[@class="y-window"]/descendant::span[@class="icon sm icon-cross hover"]
- 通过同级元素进行匹配
<div class="x-ctrl x-close"> ???<span class="icon sm icon-cross hover">B</span> ???<div class="h-focus"> ???????<span class="icon sm icon-cross hover">A</span> ???</div></div><div class="x-ctrl x-close"> ???<span class="icon sm icon-cross hover">C</span> ???<div class="h-focus"> ???????<span class="icon sm icon-cross hover">A</span> ???</div></div>定位第二个A
jQuery写法: $("span:contains(‘C‘)").siblings("div.h-focus").children("span:contains(‘A‘)")
XPATH写法: //span[contains(text(),"C")]/following-sibling::div[@class="h-focus"]/span[contains(text(),"A")]
- 稍微复杂一点的定位
<div class="x-window"> ???<td class="rule"> ???????<span>A</span> ???</td> ???<td class="rule"> ???????<div class="button">"控制按钮"</div> ???</td></td><div class="x-window"> ???<td class="rule"> ???????<span>B</span> ???</td> ???<td class="rule"> ???????<div class="button">"控制按钮"</div> ???</td></td>举个例子，比如说页面上的A和B元素是动态的，但是有一个规律，A或者B的父元素的同级元素一定有一个"控制按钮"的子元素。
定位 "控制按钮"
jQuery写法: $("span:contains(‘B‘)").parent("td.rule").siblings("td").children("div:contains(‘控制按钮‘)")
XPATH写法: //span[contains(text(),"B")]/parent::td[@class="rule"]/preceding-sibling::td/child::div[contains(text(),"控制按钮")]
注：以上只是在工作时遇到比较典型的元素定位进行的举例，定位方式不是唯一，可能有多重定位方式。更多的定位方式请参考jQuery语法和XPath语法。
利用Xpath和jQuery进行元素定位示例
原文地址：https://www.cnblogs.com/Flylater/p/10438302.html