利用Xpath和jQuery进行元素定位示例

利用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语法。