詳解Selenium中元素定位方式

2022-06-07 14:00:53

測試物件的定位和操作是我們利用 selenium 編寫自動化指令碼和 webdriver 的核心內容，其中 “操作” 這一部分又是建立在 “selenium” 元素定位的基礎之上的。所以對元素物件的定位就顯得越發的重要，接下來我們就學習一下常用的元素定位方法有哪些。

八大元素定位方式

定位元素的目的一般有以下幾種，一種是要操作這個物件；還有就是可能要獲取物件的一些屬性，比如說需要得到物件的 name 屬性、class 屬性等等。這些都會用到元素的定位， webdriver 提供了比較常用的 8 種元素定位方式。

ID：通過元素的 id 定位 (前提條件元素須有 id 屬性，以下相同)
NAME：通過元素的 name 定位
Class Name：通過元素的 class name 屬性定位
Link Text：假如是 a 標籤的話可以使用 link text 來定位
Partial Link Text：當 a 標籤的內容非常長的話，可以通過 Partial Link Text 匹配部分內容來進行定位
Tag Name：可以直接使用 Tag Name 定位標籤來定位
Xpath：可以使用 Xpath 元素路徑來進行定位
Css Selector：利用 css 選擇器來定位

通過元素 id 定位

鑑於上述的定位方法一般情況下很少能夠在一個頁面上找齊，這裡準備了一個原生的 html 頁面，方便我們練習使用。

首先開啟我們的本地 html 檔案，通過檢視頁面的原始碼，可以看到 Email 輸入框是具備 id 屬性的，這裡就可以通過定位元素id 的方式定位該元素，見下圖：

元素 id定位範例程式碼如下：

# coding:utf-8

from time import sleep
from selenium import webdriver


driver = webdriver.Chrome()     # 啟動 Chrome瀏覽器的 driver
driver.maximize_window()        # Chrome 瀏覽器最大化
driver.get('file:///Users/workspace/WEB_TEST_HTML/form.html')       # 開啟原生的 "form.html" 檔案
sleep(2)
driver.find_element_by_id("inputEmail").click()     # 通過 id 定位 id="inputEmail"的元素，執行點選操作。
sleep(1)

driver.quit()

執行結果如下：

從上圖中，我們可以看到通過 id 定位到了 Email 輸入框的元素，並執行了點選操作。

通過元素 name 定位

通過元素的 name 屬性定位 password 元素，然後執行點選操作，見下圖：

元素 name 屬性定位範例程式碼如下：

# coding:utf-8

from time import sleep
from selenium import webdriver


driver = webdriver.Chrome()     # 啟動 Chrome瀏覽器的 driver
driver.maximize_window()        # Chrome 瀏覽器最大化
driver.get('file:///Users/workspace/WEB_TEST_HTML/form.html')       # 開啟原生的 "form.html" 檔案
sleep(2)
driver.find_element_by_id("inputEmail").click()     # 通過 id 定位 id="inputEmail"的元素，執行點選操作。
sleep(2)
driver.find_element_by_name("password").click()		# 通過 name 定位 name="password"，執行點選操作。
sleep(1)

driver.quit()

執行結果如下：

從上圖中，我們可以看到通過 name 定位到了 Password 輸入框的元素，並執行了點選操作。

通過元素 class name 定位

通過元素的 class name 屬性定位 Email 元素所在的 div，然後通過 js 的偵錯，讓該 div 出現閃爍的效果。如果正常閃爍，則說明我們定位成功了。見下圖：

元素 class name 屬性定位範例程式碼如下：

# coding:utf-8

from time import sleep
from selenium import webdriver


driver = webdriver.Chrome()     # 啟動 Chrome瀏覽器的 driver
driver.maximize_window()        # Chrome 瀏覽器最大化
driver.get('file:///Users/workspace/WEB_TEST_HTML/form.html')       # 開啟原生的 "form.html" 檔案
sleep(2)
element = driver.find_element_by_class_name("controls")     # 將定位到的 "class name" 為 "controls" 的元素賦值給 element
driver.execute_script('$(arguments[0]).fadeOut().fadeIn()', element)    # 通過 JS 執行的方式將 element 元素執行 消失、出現
sleep(1)

driver.quit()

執行結果如下：

從上圖中，我們可以看到通過 class name 定位到了 Email 元素所在的 div 塊，出現了閃爍的效果，說明我們已經定位到了該 class name = “controls” 的 div 塊。

通過 link text 與 partial link text 定位

通過 a 標籤的字元或者部分字元的匹配，定位到 register 元素。

這裡就不進行截圖演示了，直接上程式碼吧。

# coding:utf-8

from time import sleep
from selenium import webdriver


driver = webdriver.Chrome()     # 啟動 Chrome瀏覽器的 driver
driver.maximize_window()        # Chrome 瀏覽器最大化
driver.get('file:///Users/workspace/WEB_TEST_HTML/form.html')       # 開啟原生的 "form.html" 檔案
sleep(2)

link = driver.find_element_by_link_text("register")
driver.execute_script('$(arguments[0]).fadeOut().fadeIn()', link)
sleep(1)

partile_link = driver.find_element_by_partial_link_text("reg")
driver.execute_script('$(arguments[0]).fadeOut().fadeIn()', partile_link)
sleep(1)

driver.quit()

通過 css selector 選擇器定位

一般情況下，不推薦視同這種方式，因為首先需要對 css 的語法有一定的理解，同時這種定位的方式呢，維護性較差。任何一個小的頁面變動都會影響到我們已經利用 css selector 定位好的元素。

獲取 css selector 方式，見下圖：

通過 css selector 定位元素程式碼如下：

# coding:utf-8

from time import sleep
from selenium import webdriver


driver = webdriver.Chrome()     # 啟動 Chrome瀏覽器的 driver
driver.maximize_window()        # Chrome 瀏覽器最大化
driver.get('file:///Users/workspace/WEB_TEST_HTML/form.html')       # 開啟原生的 "form.html" 檔案
sleep(2)
div = driver.find_element_by_css_selector("body > form > div:nth-child(1) > div")   # 這種css層級方式的維護性很差
driver.execute_script('$(arguments[0]).fadeOut().fadeIn()', div)
sleep(2)

driver.quit()

截圖就算了，一般不推薦使用。

通過 Xpath 定位

通過 Xpath 定位元素，是最常用的方法之一，尤其是在前端頁面不規範、沒有 id、name等屬性的情況下。獲取 xpath 方式，見下圖：

利用 xpath 定位元程式碼範例如下：

# coding:utf-8

from time import sleep
from selenium import webdriver


driver = webdriver.Chrome()     # 啟動 Chrome瀏覽器的 driver
driver.maximize_window()        # Chrome 瀏覽器最大化
driver.get('file:///Users/workspace/WEB_TEST_HTML/form.html')       # 開啟原生的 "form.html" 檔案
sleep(2)

email_xpath = driver.find_element_by_xpath('//*[@id="inputEmail"]')     # xpath 定位
driver.execute_script('$(arguments[0]).fadeOut().fadeIn()', email_xpath)
sleep(2)

driver.quit()

執行結果如下：

從上圖中，我們可以看到通過 xpath 定位到了 Email 元素所，出現了閃爍的效果，說明我們已經定位到了該元素。

使用 "xpath" 定位，可以使用 "id"、"name" 等更多的方式或者特殊的屬性來定位到元素；建議通過基礎屬性定位的同時，使用 xpath 也依然顯得更友好一些，也更便捷。未來做一些框架的封裝的時候也會變得更簡單。

通過 tag_name 定位

通過檢視頁面元素，我們發現頁面只有一個 form ，那麼這個時候就可以利用 tag_name 直接定位到這個 form 了。見下圖：

通過 tag name 定位元素程式碼範例如下：

# coding:utf-8

from time import sleep
from selenium import webdriver


driver = webdriver.Chrome()     # 啟動 Chrome瀏覽器的 driver
driver.maximize_window()        # Chrome 瀏覽器最大化
driver.get('file:///Users/workspace/WEB_TEST_HTML/form.html')       # 開啟原生的 "form.html" 檔案
sleep(2)

print(driver.find_element_by_tag_name("form").get_attribute("class"))   # 列印輸出 tag name 為 "form" 的 class 的 值

driver.quit()

執行結果如下：

以上就是詳解Selenium中元素定位方式的詳細內容，更多關於Selenium元素定位的資料請關注it145.com其它相關文章！

詳解Selenium中元素定位方式

目錄

八大元素定位方式

通過元素 id 定位

通過元素 name 定位

通過元素 class name 定位

通過 link text 與 partial link text 定位

通過 css selector 選擇器定位

通過 Xpath 定位

通過 tag_name 定位

熱門文章