當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Selenium-webdriver+八种元素定位

發布時間：2024/9/5 编程问答 41 如意码农

生活随笔收集整理的這篇文章主要介紹了 Selenium-webdriver+八种元素定位小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

進行Web頁面自動化測試，對頁面上的元素進行定位和操作是核心。而操作又是以定位為前提的，因此，對頁面元素的定位是進行自動化測試的基礎。

頁面上的元素就像人一樣，有各種屬性，比如元素名字，元素id，元素屬性（class屬性，name屬性）等等。webdriver就是利用元素的這些屬性來進行定位的。（本文以百度首頁為例）

怎么查看元素的name，id，class，tag，text，xpath，css選擇器呢？可以借助firefox瀏覽器的firebug插件（需要手動安裝）中firepath工具或者chrome的開發者工具（chrome自帶）。

Friebug

打開firefox 瀏覽器的firebug 插件，點擊插件左上角的鼠標箭頭，再點擊頁面上的元素，firebug插件的HTML 標簽頁將看到頁面代碼，鼠標移動到元素的標簽上點擊一下。

Chrome開發者工具（F12）

打開Chrome瀏覽器，按下鍵盤的F12，即可以打開開發者工具。從開發者工具中可以得到和FirePath相同的結果：

這樣可以成功的查看元素的屬性。

圖中顯示輸入框的屬性為：<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">

selenium的webdriver提供了八種基本的元素定位方法，前面六種是通過元素的屬性來直接定位的，后面的xpath和css定位更加靈活，需要重點掌握其中一個。

1.通過id定位：find_element_by_id()

從上面的元素屬性中，可以看到有個id屬性：id="kw"，所以可以通過它的id屬性單位到這個元素。定位到搜索框后，可以用send_keys()方法輸入內容到搜索框。

eg：driver.find_element_by_id("kw").send_keys("by_id")

2.通過name定位：find_element_by_name()

同理：name屬性：name="wd"，通過它的name屬性單位到這個元素。

說明：這里運行后會報錯，說明這個搜索框的name屬性不是唯一的，無法通過name屬性直接定位到輸入框

eg：driver.find_element_by_name("wd").send_keys("by_name")

3.通過class定位：find_element_by_class_name()

同理：class屬性：class="s_ipt"，通過它的class屬性單位到這個元素。

eg：driver.find_element_by_class_name("s_ipt").send_keys("by_class_name")

4.通過tag定位：find_element_by_tag_name()

從元素屬性中，可以看到每個元素都有tag（標簽）屬性，就是最前面的input

在一個頁面中，相同的標簽有很多，所以一般不用標簽來定位。以下例子，僅供參考和理解，運行肯定報錯

eg：driver.find_element_by_tag_name("input").send_keys("by_tag_name")

通過上圖可以獲取超鏈接hao123的屬性：<a name="tj_trhao123" class="mnav">hao123</a>

5.通過link定位：find_element_by_link_text()

對于超鏈接的元素我們通過超鏈接上的文字信息來定位元素。并用方法click（）點擊進入鏈接。

eg：driver.find_element_by_link_text("hao123").click()

6.通過partial_link定位：find_element_by_partial_link_text()

這個方法是上一個方法的擴展。當你不能準確知道超鏈接上的文本信息或者只想通過一些關鍵字進行匹配時，可以使用這個方法來通過部分鏈接文字進行匹配。

eg：driver.find_element_by_partial_link_text("ao123").click()

7.通過xpath定位：find_element_by_xpath()

這個方法是非常強大的元素查找方式，使用這種方法幾乎可以定位到頁面上的任意元素。

在正式開始使用XPath進行定位前，我們先了解下什么是XPath。XPath是XML Path的簡稱，由于HTML文檔本身就是一個標準的XML頁面，所以我們可以使用XPath的語法來定位頁面元素。

我們以圖中HTML代碼為例，要引用對應的對象，XPath語法如下：

　　絕對路徑寫法(只有一種)，寫法如下：

　　引用頁面上的form元素(即源碼中的第3行)：/html/body/form[1]

　　注意：1. 元素的xpath絕對路徑可通過firebug直接查詢。

2. 一般不推薦使用絕對路徑的寫法，因為一旦頁面結構發生變化，該路徑也隨之失效，必須重新寫。

3. 絕對路徑以單/號表示，而下面要講的相對路徑則以//表示，這個區別非常重要。

ps：當xpath的路徑以/開頭時，表示讓Xpath解析引擎從文檔的根節點開始解析。當xpath路徑以//開頭時，則表示讓xpath引擎從文檔的任意符合的元素節點開始進行解析。而當/出現在xpath路徑中時，則表示尋找父節點的直接子節點，當//出現在 xpath路徑中時，表示尋找父節點下任意符合條件的子節點，不管嵌套了多少層級（這些下面都有例子，大家可以參照來試驗）。弄清這個原則，就可以理解其實xpath的路徑可以絕對路徑和相對路徑混合在一起來進行表示。

　　相對路徑的引用寫法：

　　查找頁面根元素：//

　　查找頁面上所有的input元素：//input

　　查找頁面上第一個form元素內的直接子input元素(即只包括form元素的下一級input元素，使用絕對路徑表示，單/號)：//form[1]/input

　　查找頁面上第一個form元素內的所有子input元素(只要在form元素內的input都算，不管還嵌套了多少個其他標簽，使用相對路徑表示，雙//號)：//form[1]//input

　　查找頁面上第一個form元素：//form[1]

　　查找頁面上id為loginForm的form元素：//form[@id='loginForm']

　　查找頁面上具有name屬性為username的input元素：//input[@name='username']

　　查找頁面上id為loginForm的form元素下的第一個input元素：//form[@id='loginForm']/input[1]

　　查找頁面具有name屬性為contiune并且type屬性為button的input元素：//input[@name='continue'][@type='button']

　　查找頁面上id為loginForm的form元素下第4個input元素：//form[@id='loginForm']/input[4]

Xpath功能很強大，所以也可以寫得更加復雜一些。

　　前面講的都是xpath中基于準確元素屬性的定位，其實xpath作為定位神器也可以用于模糊匹配。比如下面圖所示代碼：

　　這段代碼中的“新聞”這個超鏈接，沒有標準id元素，不是很好定位。不妨我們就用xpath的幾種模糊匹配模式來定位它吧，主要有三種方式，舉例如下。

　　a. 用contains關鍵字，定位代碼如下：

　　driver.find_element_by_xpath("http://a[contains(@href,'news')]").click()

　　這句話的意思是尋找頁面中href屬性值包含有logout這個單詞的所有a元素，由于這個退出按鈕的href屬性里肯定會包含logout，所以這種方式是可行的，也會經常用到。其中@后面可以跟該元素任意的屬性名。

　　b. 用start-with，定位代碼如下：

　 driver.find_element_by_xpath("http://a[starts-with(@name,'tj_trn')]").click()

　　這句的意思是尋找rel屬性以nofo開頭的a元素。其中@后面的rel可以替換成元素的任意其他屬性。

　　c. 用Text關鍵字，定位代碼如下：

　　driver.find_element_by_xpath("http://*[text()='新聞']").click()

　　這個方法可謂相當霸氣啊。直接查找頁面當中所有的新聞二字，根本就不用知道它是個a元素了。這種方法也經常用于純文字的查找。

　 ps：關于xpath這種定位方式，webdriver會將整個頁面的所有元素進行掃描以定位我們所需要的元素，所以這是一個非常費時的操作，如果你的腳本中大量使用xpath做元素定位的話，將導致你的腳本執行速度大大降低，所以請慎用。

8.通過css定位：find_element_by_css_selector()

　　下面是一些常見的cssSelector的定位方式：

　　定位id為flrs的div元素，可以寫成：#flrs 注：相當于xpath語法的//div[@id=’flrs’]

　　定位id為flrs下的a元素，可以寫成 #flrs > a 注：相當于xpath語法的//div[@id=’flrs’]/a

　　定位id為flrs下的href屬性值為/forexample/about.html的元素，可以寫成： #flrs > a[href=”/forexample/about.html”]

　　如果需要指定多個屬性值時，可以逐一加在后面，如#flrs > input[name=”username”][type=”text”]。

　　此外，cssSelector還有一些高級用法，如果熟練后可以更加方便地幫助我們定位元素，如我們可以利用^用于匹配一個前綴，$用于匹配一個后綴，*用于匹配任意字符。例如：

　　匹配一個有id屬性，并且id屬性是以”id_prefix_”開頭的超鏈接元素：a[id^='id_prefix_']

　　匹配一個有id屬性，并且id屬性是以”_id_sufix”結尾的超鏈接元素：a[id$='_id_sufix']

　　匹配一個有id屬性，并且id屬性中包含”id_pattern”字符的超鏈接元素：a[id*='id_pattern']

# 第一步導入需要的模塊

from selenium import webdriver

import time

# 第二步打開瀏覽器

driver = webdriver.Chrome()

# 第三步打開百度

driver.get("http://www.baidu.com")

# 1. 操作瀏覽器對象-id

driver.find_element_by_id("kw").send_keys("by_id")

time.sleep(1)

# 清空文本框

driver.find_element_by_id("kw").clear()

# 2. 操作瀏覽器對象-name

driver.find_element_by_name("wd").send_keys("by_name")

time.sleep(1)

driver.find_element_by_id("kw").clear()

# 3. 操作瀏覽器對象-class_name

driver.find_element_by_class_name("s_ipt").send_keys("by_class_name")

time.sleep(1)

driver.find_element_by_id("kw").clear()

driver.refresh()

# 4. 操作瀏覽器對象-tag_name, tag同名的很多，運行肯定報錯，所以注釋掉不運行。

#driver.find_element_by_tag_name("input").send_keys("by_tag_name")

# 5. 操作瀏覽器對象-link_text

driver.find_element_by_link_text("hao123").click()

time.sleep(1)

# 回退到上一個頁面

driver.back()

time.sleep(1)

# 6. 操作瀏覽器對象-partial_link_text

driver.find_element_by_partial_link_text("ao123").click()

time.sleep(1)

driver.back()

time.sleep(1)

# 7. 操作瀏覽器對象-xpath

driver.find_element_by_xpath(".//*[@id='kw']").send_keys("by_xpath")

time.sleep(1)

driver.find_element_by_id("kw").clear()

# 8. 操作瀏覽器對象-xpath

driver.find_element_by_css_selector("#kw").send_keys("by_css_selector")

time.sleep(1)

# 退出, close用于關閉當前窗口，quit用于結束進程，關閉所有窗口，當測試結束時，要用quit

driver.close()

driver.quit()

總結

以上是生活随笔為你收集整理的Selenium-webdriver+八种元素定位的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：使用scrapy-redis 搭建分布式
下一篇： Java多线程学习——join方法的使用