xpath定位方式詳解

 

 

 

如何使用XPATH定位元素（史上最清晰的講解）

 

 

目錄

動態WEB元素

XPATH SELENIUM選擇器

絕對路勁和相對路徑

絕對路徑

相對路徑

使用XPATH為元素定位

1.標簽，屬性，值

2.CONTAINS

3. STARTS-WITH

4. CHAINED XPATH DECLARATIONS

5. XPATH WITH “OR” STATEMENT

6. XPATH WITH “AND” STATEMENT

7. XPATH TEXT

8. ANCESTOR

9. FOLLOWING

10. CHILD

11. PRECEDING

12. FOLLOWING-SIBLING

13. DESCENDANT

14. PARENT

15. LOCATE AN ELEMENT INSIDE ARRAY OF ELEMENT

動態WEB元素

我們編寫自動化測試腳本的時候我們通常更加喜歡用id, name, class, etc來定位元素，但是有時候我們發現我們在html文本中找不到這些定位，這種情況我們將就只能使用更加靈活的定位方法，這種定位方法是針對相對復雜且位置多變的web元素。

XPATH SELENIUM選擇器

通過使用xml表達路徑，我們可以找到網頁上的任何一個元素，一些基本的Xpath 選擇器如下：
語法： //標簽名@[@s屬性=‘value’]
舉例： //input[@id=‘user-message’]

你也可以使用class name link_text,以及其他屬性來定位

絕對路徑和相對路徑

其實從測試工程師的角度來看絕對路徑和相對路徑的差別特別簡單

絕對路徑

1. 絕度路徑是一種直接定義到元素的方法
2. 以斜線“/”開始，“ /”代表着從根目錄尋找
   舉例：/html/body/div[2]/div/div[2]/div[1]/div[2]/form/div/input

相對路徑

1.一般從HTML的中間部門隨即開始
2.以雙斜線開始“//”，“//”代表可以從html 中的任何一處開始尋找元素
3.比絕對路徑要短
舉例：//div[@class=‘form-group’]//input[@id=‘user-message’]

//input[@type='send text']
 
//label[@id='clkBtn']
 
//input[@value='SEND']
 
//*[@class='swtestacademy']
--> "*" means, search "swtestacademy" class for all tags.
 
//a[@href='http://www.swtestacademy.com/']
 
//img[@src='cdn.medianova.com/images/img_59c4334feaa6d.png']

　　

CONTAINS

這是一個非常便利的xpath選擇器，甚至有的時候它能就自動化測試工程師的一條命，當一個元素的屬性是動態的，你就有必要在一些場景中使用 contains（）
舉例：//input[contains(@id,‘er-messa’)]

//*[contains(@name,'btnClk')]
-->查找name屬性的值包含”btnClk“的元素
 
//*[contains(text(),'here')]
-->查找文本里包含‘here’的元素
 
//*[contains(@href,'swtestacademy.com')]
-->查找鏈接里包含‘swtestacademy’的元素

　　

 

STARTS-WITH

這個方法是針對一個屬性是以什么開頭的，不管元素的屬性是不是動態變化的你都可以去使用這個方法
舉例：//input[starts-with(@id,‘user’)]

CHAINED DECLARATION

我們可以使用多個相對路徑去定位一個元素用”//“分開
舉例：//div[@class=‘formgroup’]//input[@id=‘user-message’]

“OR”

利用這種方法的時候，我們使用兩個條件語句例如A 和 B 並且通常返回一個集合
舉例：//[@id=‘user-message’ or @class=‘form-control’]

AND

利用這種方法的時候，我們使用兩個條件語句例如A 和 B 並且通常返回一個集合
舉例：//[@id=‘user-message’ and @class=‘form-control’]

TEXT

我們可以通過一個元素的文本內容來找到它
舉例：//label[text()=‘Enter message’]

ANCESTOR

首先查找到在ancestor聲明之前的那個元素，然后將這個元素設為頂端節點，最后查找這個節點內所有符合規則的元素

1. 第一步，找到class是‘container-fluid’的元素
2. 第二步，查找在這個元素里面的所有div
   舉例：//[@class=‘container-fluid’]//ancestor::div

你可以選擇通過div層級個數選擇特定的div組

/*[@class=’container-fluid’]//ancestor::div[1] 
.//*[@class=’container-fluid’]//ancestor::div[2] 
.//*[@class=’container-fluid’]//ancestor::div[3] 
.//*[@class=’container-fluid’]//ancestor::div[4] 
.//*[@class=’container-fluid’]//ancestor::div[5] 

FOLLOWING

用於定位已給的父類節點之后的元素。首先找到following聲明之前的元素（following前面以雙斜線隔開的元素），並將這個元素設置為頂端節點然后找到在這個節點之后的所有元素（與ancestor分開，ancestor是頂端節點里，following是頂端節點后）

1. 第一步，標簽名是form， id是‘gettotal’
2. 第二步，開始查找這個元素后面的所有標簽名為input的所有元素
   舉例：//form[@id=‘gettotal’]//following::input

CHILD

查找當前節點的所有子節點
舉例：//nav[@class=‘fusion-main-menu’]//ul[@id=‘menu-main’]/child::li
同時，你還可以通過給定下標選擇特定的li元素 li[1],li[2]

PRECEDING

查找當前節點之前的所有節點，假如我們要查找所有標簽名為li的元素，首先我們選定最底部的元素，然后用preceding::li
舉例：//img[contains(@src,‘cs.mailmuch.co’)]//preceding::li

當然，你可以使用[1],[2]來選擇這些集合里的特定元素

FOLLOWING-SIBLING

查找當前節點的之后的
舉例：//[@class=’col-md-6 text-left’]/child::div[2]//[@class=’panel-body’]//following-sibling::li

DESCENDANT

查找並返回當前元素的所有后代元素
舉例：//nav[@class=‘fusion-main-menu’]//[@id=‘menu-main’]//descendant::li

PARENT

返回當前節點的所有父類節點
舉例：//*[@id=’get-input’]/button//parent::form

在一個元素集合里定位一個元素

比如在Trivago 網站，我們查找關鍵詞”Antalya“,然后用xpath找到第一個Odamax酒店
第一步：通過使用text方法我們可以找到所有Odamax酒店
//span[contains(text(),‘odamax’)]

(//span[contains(text(),‘odamax’)])[1]

你也可以繼續查找相關酒店的價格元素
(//span[contains(text(),’odamax’)])[1]/following-sibling::strong[@class=’deals__price’]