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

八大元素定位方式

定位元素的目的一般有以下幾種，一種是要操作這個對象；還有就是可能要獲取對象的一些屬性，比如說需要得到對象的 name 屬性、class 屬性等等。這些都會用到元素的定位， 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)容非常長的話，可以通過 Partial Link Text 匹配部分內(nèi)容來進(jìn)行定位
Tag Name：可以直接使用 Tag Name 定位標(biāo)簽來定位
Xpath：可以使用 Xpath 元素路徑來進(jìn)行定位
Css Selector：利用 css 選擇器來定位

通過元素 id 定位

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

首先打開我們的本地 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"的元素，執(zhí)行點擊操作。
sleep(1)

driver.quit()

運行結(jié)果如下：

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

通過元素 name 定位

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

元素 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"的元素，執(zhí)行點擊操作。
sleep(2)
driver.find_element_by_name("password").click()		# 通過 name 定位 name="password"，執(zhí)行點擊操作。
sleep(1)

driver.quit()

運行結(jié)果如下：

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

通過元素 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()     # 啟動 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()

運行結(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()     # 啟動 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 的語法有一定的理解，同時這種定位的方式呢，維護(hù)性較差。任何一個小的頁面變動都會影響到我們已經(jīng)利用 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層級方式的維護(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()     # 啟動 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()

運行結(jié)果如下：

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

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

通過 tag_name 定位

通過查看頁面元素，我們發(fā)現(xiàn)頁面只有一個 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()

運行結(jié)果如下：