1. 程式人生 > 其它 >Web頁面元素定位方式

Web頁面元素定位方式

1 通過元素id定位

例:以百度為例,定位搜尋輸入框。

F12開啟開發者工具,點選第1個箭頭圖示,然後點選輸入框區域,會定位到相應程式碼行:

可見id為kw,定位程式碼如下:

driver.find_element_by_id("kw")

2 通過元素name定位

還是以百度搜索輸入框為例,可見name為wd,定位程式碼如下:

driver.find_element_by_name("wd")

3 通過元素class屬性定位

還是以百度搜索輸入框為例,可見class為s_ipt,定位程式碼如下:

driver.find_element_by_class_name("s_ipt")

4 通過元素標籤名tag定位

還是以百度搜索輸入框為例,可見tag為input,定位程式碼如下:

driver.find_element_by_tag_name("input")

5 通過連結的文字內容定位

例子:以百度新聞連結為例。

可見連結文字內容為“新聞”,定位程式碼如下:

(1)精準匹配

driver.find_element_by_link_text("新聞")

(2)模糊匹配

driver.find_element_by_partial_link_text("新")

6 Xpath定位

程式碼格式:

driver.find_element_by_xpath("xpath表示式")

除錯方式:

  F12開發者工具,展開右側箭頭,選擇“Ranorex Selocity”,在輸入框中輸入xpath表示式,回車,即可定位到相應元素及程式碼行。

xpath表示式有以下幾種常用方式。

6.1 絕對路徑定位方式

以百度新聞連結為例,絕對路徑表示式需從第一級元素標籤開始,一級級輸入到要定位元素的標籤。

表示式如下:

/html/body/div/div/div[3]/a[1]

絕對路徑定位方式如果後期頁面元素位置或順序發生改變,維護起來較為麻煩,所以一般不使用此方式,而是用相對路徑定位方式。

6.2 相對路徑定位方式

相對路徑定位方式不在乎元素的位置和順序,會在整個頁面中尋找符合定位表示式的元素。

表示式:

//input

6.2.1 通過索引定位

表示式:

//input[2]

6.2.2 通過屬性定位

(1)單個屬性查詢:

//input[@id='kw']

//input[@name='wd']

(2)多個屬性聯合查詢:

//input[@type='hidden' and name='fenlei']

(3)通過部分屬性值查詢—模糊定位

表示式1:id以k開頭的input元素

//input[starts-with(@id,'k')]

表示式2:class包含ipt的input元素

//input[contains(@class,'ipt')]

6.2.3 通過文字定位

表示式:文字為新聞的a元素

//a[text()='新聞']

6.2.4 通過最後一個元素定位——last()函式

表示式:

  /A/B/C[last()] 表示A元素→B元素→C元素的最後一個子元素。

  /A/B/C[last()-1] 表示A元素→B元素→C元素的倒數第二個子元素。

比如定位網盤元素表示式如下:

/html/body/div/div/div[3]/a[last()]

比如定點陣圖片元素表示式如下:

/html/body/div/div/div[3]/a[last()-1]

6.2.5 通過非條件定位——not()函式

表示式1:不含id的input節點

//input[not(@id)]

表示式2:名稱為wd,而且id不包含ie的input節點

//input[@name='wd' and not(contains(@id,'ie'))]

7 CSS定位

以百度搜索輸入框為例:

<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off" style="">

7.1 通過屬性定位

7.1.1 通過id屬性定位

id屬性符號表示:#

表示式:

#kw

7.1.2 通過class屬性定位

class屬性符號表示:.

表示式:

.s_ipt

7.1.3 通過其他屬性定位

除id、class以外的其他屬性用 [屬性名=屬性值] 格式表示

表示式:

[name='wd']
[autocomplete='off']
[maxlength='255']

7.1.4 通過多個屬性組合定位

無需用and拼接,直接[][]組合即可

比如選擇type為hidden且name為ch的節點,表示式:

[type='hidden'][name='ch']

7.2 直接用標籤定位

表示式:

input

7.3 通過標籤及屬性組合定位

表示式:

input.s_ipt
input#kw
input[name='wd']

7.4 通過層級關係定位

7.4.1 通過父級節點定位

(1)表示式:符號>表示下級

form.fm>span.s_ipt_wr>input

 7.4.2 通過同級節點定位

(1)表示式:符號~表示同級

.soutu-btn~span

 

7.5 通過索引定位

(1)找其父元素下的第2個子元素,表示式:

[type='hidden']:nth-child(2)

(2)找其兄弟元素的第2個元素,表示式:

[type='hidden']:nth-of-type(2)