selenium常用元素定位方式

拾句發表於2024-06-17

selenium中的定位方式

1、id:根據id來獲取元素

2、name:根據元素的name屬性定位;

3、tagName:根據元素的標籤名定位;

4、className:根據元素的樣式class值定位;

5、linkText:根據超連結的文字值定位;

6、partialLinkText:根據超連結的部分文字值定位;

7、cssSelectorcss選擇器定位;

8、xpath:透過元素的路徑來定位;

重點透過介紹xpathcss靈活定位,其他定位方式做簡單介紹

1.根據id定位:

id:根據id來獲取元素,返回單個元素,id值一般是唯一的;

注意id值若是有數字,則可能是動態變態的id值,嘗試每次重新整理看變化是否固定,若是不固定。不能使用id定位

2.據元素的name屬性

3.tagName:根據元素的標籤名定位

如果懂HTML知識,我們就知道HTML是透過tag來定義功能的,比如input是輸入,table是表格,等等...。每個元素其實就是一個tag,但是標籤往往不是惟一的,所有在實際應用中不常用。下面僅做參考

4.className:根據元素的樣式class值定位;

5.linkText:根據超連結的文字值定位;

6.xpath:透過元素的路徑來定位;

Xpath的語法:

6.1 絕對路徑

必須用”/”起首,是從1開始的,後面緊跟根節點,好比/step/step/…

元素變更後維護成本加大 不推薦使用

舉例:

selenium常用元素定位方式

6.2 相對路徑

基本用法: //標籤名[@屬性名=值]

/ :表示根節點

// :表示任意位置

* :表示任意元素,*為萬用字元,可div、span等標籤替換

@ :表示屬性,比如class、alt等

. :表示當前節點

.. :表示父親節點

用法

6.2.1 支援邏輯運算and/or

//標籤名[@屬性名=值 and @屬性名=值]

IMG_256

6.2.2 //標籤名[@屬性名=值 or @屬性名=值]

IMG_256

6.2.3 找屬性://*[@屬性=‘屬性值’]

IMG_256

6.2.4 找文字值://*[text()='文字值']

IMG_256

6.2.5 模糊查詢屬性://*[contains(@屬性,'屬性值')]

IMG_256

6.2.6 元素是動態的,可以使用start-with://*[starts-with(@屬性,'開始的值')]

IMG_256

6.3 軸定位:/軸名稱::節點名稱[@屬性=值]

6.3.1 ancestor:: 選取當前節點的所有先輩(父、祖父等)。

格式:../ancestor::標籤名[順序值],順序值是幾表示前幾輩標籤名

例如,一層父節點

selenium常用元素定位方式

例如,兩層祖先節點

selenium常用元素定位方式

例如,三層祖先的祖先節點,以此類推

selenium常用元素定位方式

6.3.2 preceding:: 選取當前節點的開始標籤之前的所有節點。

格式:../preceding::標籤名[順序值],順序值是幾表示前幾位標籤名,不區分是否同層級

例如,上一層節點

selenium常用元素定位方式

例如,上兩層節點

IMG_256

6.3.3 preceding-sibling:: 前一位,選取當前節點之前的所有同級節點(同級)

格式:../preceding-sibling::標籤名[順序值],順序值是幾表示前幾位,範圍在同層級內

例如,前1位同級div節點

selenium常用元素定位方式

例如,前1位同級form節點

selenium常用元素定位方式

6.3.4 following:: 當前元素節點標籤之後的所有節點

格式:../following::標籤名[順序值],順序值是幾表示後幾位,不區分是否同層級

例如,div節點後4層級

IMG_256

6.3.5 following-sibling:: 後一位,選取當前節點之後的所有兄弟節點(同級)

格式:../following-sibling::標籤名[順序值],順序值是幾表示後第幾位,範圍在同層級內

例如,div節點後2位

IMG_256

6.3.6 parent:: 父節點

格式:/parent::標籤名[順序值],順序值是幾表示第幾位父級,只能定位到當前層級的父級

例如:

IMG_256

*代表全部匹配,通常當前唯一節點的父節點只有一個

IMG_256

6.3.7 child:: 子節點

格式:/child::標籤名[順序值],順序值是幾表示第幾位子級,只能定位到當前層級的子級

例如,當前層級的第2位子級

IMG_256

7. css選擇器定位

css表示式:通常寫在<head>標籤中<style>標籤裡面,css 選擇器不能以數字開頭

7.1 基本選擇器

7.1.1 標籤選擇器,標籤名,可以多個;

7.1.2 分組選擇器,選中一組HTML,以 , 來定義,不常用

7.1.3 id選擇器,以 #值 來定義

7.1.4 class選擇器,以 .值來定義,若有空格,亦可以"."來代替

7.1.5 屬性選擇器

# 選取具有特定屬性的html元素,指定值 [title="ab1"]

# 選取具有特定屬性的html元素,不指定值 [title]

# 可以指定標籤型別 p[title],不常用

7.2 組合選擇器

7.2.1 後代選擇器,以空格分隔

#ab2 p idab2的元素之下的所有p標籤

#div p <div> 標籤下所有的 p 標籤元素

7.2.2 子元素選擇器: > 分隔

#ab2 > span 選擇idab2 的元素之下的span 標籤,要求是直接子元素才可以

#div>p 選擇<div>標籤中所有<p>子標籤元素

7.2.3 相鄰兄弟選擇器,以 + 定義,選擇緊挨在某元素之後的另一元素,要相同父元素

7.2.4 後續兄弟選擇器,以~定義,選擇指定元素之後的所有元素,要相同父標籤

# [title="qlmn"] ~ li [title="qlmn"]下的所有 li 標籤生效

# div~p <div> 標籤下的所有相鄰兄弟 <p> 標籤元素

7.3 偽類

# nth-child(n) 匹配屬於其父元素的第 N 個子元素(不必指定標籤型別)

# nth-last-child(n),如字面意思:倒數第幾個標籤

# first-child,第一個標籤

# last-child,最後一個標籤

相關文章