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