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)