快捷導(dǎo)航

詳解Selenium中元素定位方式

更新時(shí)間：2022年06月07日 10:18:17 作者：渴望力量的哈士奇

測(cè)試對(duì)象的定位和操作是我們利用 selenium 編寫自動(dòng)化腳本和 webdriver 的核心內(nèi)容。本文我們就來學(xué)習(xí)一下常用的元素定位方法有哪些吧

測(cè)試對(duì)象的定位和操作是我們利用 selenium 編寫自動(dòng)化腳本和 webdriver 的核心內(nèi)容，其中 “操作” 這一部分又是建立在 “selenium” 元素定位的基礎(chǔ)之上的。所以對(duì)元素對(duì)象的定位就顯得越發(fā)的重要，接下來我們就學(xué)習(xí)一下常用的元素定位方法有哪些。

八大元素定位方式

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

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

通過元素 id 定位

鑒于上述的定位方法一般情況下很少能夠在一個(gè)頁面上找齊，這里準(zhǔn)備了一個(gè)本地的 html 頁面，方便我們練習(xí)使用。

首先打開我們的本地 html 文件，通過查看頁面的源碼，可以看到 Email 輸入框是具備 id 屬性的，這里就可以通過定位元素id 的方式定位該元素，見下圖：

元素 id定位示例代碼如下：

# coding:utf-8

from time import sleep
from selenium import webdriver


driver = webdriver.Chrome()     # 啟動(dòng) 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"的元素，執(zhí)行點(diǎn)擊操作。
sleep(1)

driver.quit()

運(yùn)行結(jié)果如下：

從上圖中，我們可以看到通過 id 定位到了 Email 輸入框的元素，并執(zhí)行了點(diǎn)擊操作。

通過元素 name 定位

通過元素的 name 屬性定位 password 元素，然后執(zhí)行點(diǎn)擊操作，見下圖：

元素 name 屬性定位示例代碼如下：

# coding:utf-8

from time import sleep
from selenium import webdriver


driver = webdriver.Chrome()     # 啟動(dòng) 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"的元素，執(zhí)行點(diǎn)擊操作。
sleep(2)
driver.find_element_by_name("password").click()		# 通過 name 定位 name="password"，執(zhí)行點(diǎn)擊操作。
sleep(1)

driver.quit()

運(yùn)行結(jié)果如下：

從上圖中，我們可以看到通過 name 定位到了 Password 輸入框的元素，并執(zhí)行了點(diǎn)擊操作。

通過元素 class name 定位

通過元素的 class name 屬性定位 Email 元素所在的 div，然后通過 js 的調(diào)試，讓該 div 出現(xiàn)閃爍的效果。如果正常閃爍，則說明我們定位成功了。見下圖：

元素 class name 屬性定位示例代碼如下：

# coding:utf-8

from time import sleep
from selenium import webdriver


driver = webdriver.Chrome()     # 啟動(dòng) 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 執(zhí)行的方式將 element 元素執(zhí)行 消失、出現(xiàn)
sleep(1)

driver.quit()

運(yùn)行結(jié)果如下：

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

通過 link text 與 partial link text 定位

通過 a 標(biāo)簽的字符或者部分字符的匹配，定位到 register 元素。

這里就不進(jìn)行截圖演示了，直接上代碼吧。

# coding:utf-8

from time import sleep
from selenium import webdriver


driver = webdriver.Chrome()     # 啟動(dòng) 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 選擇器定位

一般情況下，不推薦視同這種方式，因?yàn)槭紫刃枰獙?duì) css 的語法有一定的理解，同時(shí)這種定位的方式呢，維護(hù)性較差。任何一個(gè)小的頁面變動(dòng)都會(huì)影響到我們已經(jīng)利用 css selector 定位好的元素。

獲取 css selector 方式，見下圖：

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

# coding:utf-8

from time import sleep
from selenium import webdriver


driver = webdriver.Chrome()     # 啟動(dòng) 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層級(jí)方式的維護(hù)性很差
driver.execute_script('$(arguments[0]).fadeOut().fadeIn()', div)
sleep(2)

driver.quit()

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

通過 Xpath 定位

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

利用 xpath 定位元代碼示例如下：

# coding:utf-8

from time import sleep
from selenium import webdriver


driver = webdriver.Chrome()     # 啟動(dòng) 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()

運(yùn)行結(jié)果如下：

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

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

通過 tag_name 定位

通過查看頁面元素，我們發(fā)現(xiàn)頁面只有一個(gè) form ，那么這個(gè)時(shí)候就可以利用 tag_name 直接定位到這個(gè) form 了。見下圖：

通過 tag name 定位元素代碼示例如下：

# coding:utf-8

from time import sleep
from selenium import webdriver


driver = webdriver.Chrome()     # 啟動(dòng) 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()

運(yùn)行結(jié)果如下：