Xpath 與Css 定位方式的比較

1. css locator比xpath locator速度快，特別是在ie下面（ie沒有自己的xpath 解析器(parser)）

2. 對於文字的處理xpath更強大使用, text()匹配的是顯示文字資訊。

string locator_xpath = "//*[contains(text(),'test')]";

但需要注意的是text()獲取的是當前元素的文字，不包括其子元素的文字。如下**text()得到的結果是"please click here"。但如果使用$("#id1").text()獲取的是"memo please click here",使用selenium獲取元素text也是"memo please click here"。

<

div 
id="id1"
>
<
span
>memo<
span
>
please click here
div>

3. 對於class屬性css能直接匹配部分，而xpath對於class跟普通屬性一致，使用字串精確匹配，需要使用contains()函式才能匹配部分字串

class="class1 popup js-dragable alert-msg">

class ="class2 submit-box ">
class ="class3"/>            
string locator_xpath="//div[@class='class1 popup js-dragable alert-msg']//input[@class='class3']";
string locator_xpath="//div[contains(@class,'popup js-dragable alert-msg')]//input[@class='class3']";
string locator_css = ".class1.js-dragable .class3"

4. 使用祖先元素屬性與當前元素屬性組合處理時

<

div 
class
="111"
>
<
div>
<
div>
<
input 
class 
= "222"
/>
div>
div>
div>
string locator_xpath="//div[@class='111'/*/*/*[@class='222']]";
string locator_xpath="//div[@class='111'//[@class='222']]"
string locator_css = ".111 .222";    

*注意兩個class之間有乙個空格表示層級關係，且空格選擇所有層級的子元素，而》只選擇一代

5.模糊匹配

xpath

css

選取屬性值中的部分string匹配

//span[contains(@class,'popup-btn js-dragable')]

span[title*='456']

//input[starts-with(@name,'name1')]

input[name^='name1']

//input[ends-with(@name,'name1')]

input[name$='name1']

**ends-with() function is part of xpath 2.0 but browsers generally only support 1.0.

6.多個屬性匹配

xpath=//a[@class='name' and value='123']

css = a[.name][value='123']

7. 第n個子元素的選擇

<

div 
class
="category_depth_1 bnr"
>
<
li><
a href
="/estore/kr/zh/c/1"
class
="on"
>護膚
a>
li>
<
li><
a href
="/estore/kr/zh/c/1"
class
="on"
>家電
a>
li>
<
li><
a href
="/estore/kr/zh/c/1"
class
="on"
>美妝
a>
li>
<
li><
a href
="/estore/kr/zh/c/1"
class
="on"
>母嬰
a>
li>
<
li><
a href
="/estore/kr/zh/c/1"
class
="on"
>電子產品
a>
li>
div>
string locator_xpath = "//*[@class="category_depth_1 bnr"]//li[1]"
string locator_css = ".category_depth_1.bnr li:first-child"
string locator_css = ".category_depth_1.bnr li:last-child"
string locator_css = ".category_depth_1.bnr li:nth-child(1)"
#index都是從1開始

以上元素如果選擇點選li元素有可能點選不生效而選擇點選a標籤，這個時候需要注意index還是要標在li標籤後面string locator_xpath = "//*[@class="category_depth_1 bnr"]//li[1]/a"

string locator_css = ".category_depth_1.bnr li:first-child a"
string locator_css = ".category_depth_1.bnr li:last-child>a"
string locator_css = ".category_depth_1.bnr li:nth-child(1)>a"

8. 擁有某個屬性的元素

xpath= //*[@title]

css= *[title]

9. 擁有子元素a的p元素

xpath= //div[a]

css 不能實現

10. 匹配祖先元素

xpath= div[@id="id1"]//ancestor::tr//td

css 不能實現

11. 查詢兄弟元素， css只能查詢元素後面的元素，不能向前找

xpath= //div[@class="class1"]//preceding-sibling::div[1]

xpath= //div[@class="class1"]//follow-sibling::div[1]

css= div.class1+div

12. 查詢不包含not，以不包含display: none為例

xpath= //div[@class="name" and not(contains(@style,"display: none"))]

css= div.name:not([style*='display: none'])

元素定位方式Xpath總結

一.絕對路徑 不要使用，除非已經使用了所有方式仍然無法定位 方法 根據實際目錄，逐層輸寫。例子 find element by xpath html body div 2 form span input div 2 指第2個元素 二.相對路徑 建議使用 方法 首先找目錄元素是否有 精準元素 即唯一能...

Xpath常用元素定位方式

原文 一 xpath是什麼 xpath是一種在xml文件中查詢指定資訊的語言 可用於在xml中進行元素和屬性的遍歷 xpath使用表示式來選取xml中的節點或節點集 二 xpath常用定位方法 1.通過元素本身的唯一屬性定位 方法 找到目標元素所在的 精準元素 即唯一標識屬性，使用此屬性定位 1.1...

CSS 定位方式

1，什麼是定位 表示元素在網頁中的位置 2，css中，定位的分類 1，普通流定位 預設定位方式 2，浮動定位 重難點，用的最多 3，相對定位 4，絕對定位 5，固定定位 3，普通流定位 普通流定位，又稱為 文件流定位 是預設定位方式。典型的 流式布局 特點 1，每個元素在頁面中都有自己的位置，並佔據...