『心善淵』Selenium3.0基礎 — 4、Selenium基礎元素定位詳解

繁華似錦Fighting發表於2021-06-24

1、什麼是元素定位

  • 元素定位就是查詢HTML元素的過程。
  • HTML元素指的是從開始標籤(start tag)到結束標籤(end tag)的所有程式碼。
  • 操作頁面元素之前,首先要對元素進行定位,所以定位是自動化指令碼編寫的開始。
  • 通常使用find_elementfind_elements 方法來定位元素。
    • find_element使用給定的方法定位和查詢一個元素
    • find_elements使用給定的方法定位和查詢所有元素,並以列表(list)的形式返回。

2、Selenium元素定位常用API

(1)By_id 定位

說明

當所定位的元素具有id屬性的時候我們可以通過by_id來定位該元素。

例如:開啟百度首頁,定位搜尋框。

image

搜尋框頁面原始碼:屬性id值為kw

<input type="text" class="s_ipt" name="wd" id="kw" maxlength="255" autocomplete="off">

示例

"""
1.學習目標
    必須掌握selenium中元素定位方法,id定位方法
2.操作步驟(語法)通過元素id屬性定位
    driver.find_element_by_id(id屬性的值)
3.需求
    在百度頁面中使用id屬性定位百度輸入框
"""
# 1.匯入selenium
from selenium import webdriver
from time import sleep

# 2.開啟瀏覽器(獲取瀏覽器物件)
driver = webdriver.Chrome()

# 3.輸入網址
url = "http://www.baidu.com"
driver.get(url)
sleep(2)

# 4.元素定位(id定位方法),百度輸入框
"""
注意:
如果有多個相同屬性值的元素,單數形式,定位第一個.
"""
srk = driver.find_element_by_id("kw")
# 列印srk物件
print(srk)

# 檢視元素對應的原始碼
print(srk.get_attribute("outerHTML"))

# 5.關團瀏覽器
driver.quit()

"""
輸出結果:
 <selenium.webdriver.remote.webelement.WebElement 
 (session="6fbad6d63614e1cae6cd346153a7105e", 
 element="0dd374b6-74ed-4f4c-b610-5c772fd8c366")>
 
 我們可以看到srk是一個WebElement型別的物件。
 檢視元素對應的原始碼如下:
 <input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
 
 說明我們已經把百度首頁的輸入框獲取到了。
"""

複數形式

"""
學習目標
    複數形式
        複數定位形式:driver.find_elements_XXX
        複數定位,返回的列表型別資料<list>
        遍歷列表操作具體元素
"""
# 1.匯入selenium
from selenium import webdriver
from time import sleep

# 2.開啟瀏覽器
driver = webdriver.Chrome()
# 3.輸入網址
url = "http://www.baidu.com"
driver.get(url)
sleep(2)

# 4.通過by_id複數定位
srk = driver.find_elements_by_id("kw")
# 5.檢視返回結果資料型別
print("結果資料型別", type(srk))
print("元素個數", len(srk))

# 6.遍歷結果,檢視原始碼
for i in srk:
    # 檢視元素對應的原始碼
    print(i.get_attribute("outerHTML"))

# 7.關團瀏覽器
driver.quit()

"""
結果資料型別 <class 'list'>
元素個數 1
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
"""

異常總結

異常1:
AttributeError:'list' object has no attribute 'get_attribute' :
表示定位元素返回的是一個列表格式,原因:使用複數定位方式 find_elements獲取的定位

異常2
NoSuchElementException :
表示元素沒找到元素,原因是定位方式出現問題,有一種情況是屬性值寫錯了。

(2)by_name 定位

說明

當所定位的元素具有name屬性的時候,我們可以通過by_name來定位該元素。

如上圖中的百度搜尋頁面,搜尋框頁面原始碼:屬性name值為wd

<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">

示例

使用name屬性定位百度搜尋框。

"""
1.學習目標:
    必須掌握selenium的元素定位方法by_name
2.語法
    name定位
    driver.find_element_by_name(name屬性的值)
3.需求
    使用name屬性定位百度搜尋框
4.總結
    當元素中有name屬性時才能使用上述定位方法
"""
# 1.匯入selenium
from selenium import webdriver
from time import sleep

# 2.開啟瀏覽器(獲取瀏覽器物件)
driver = webdriver.Chrome()

# 3.輸入網址
url = "http://www.baidu.com"
driver.get(url)
sleep(2)

# 4. 使用name定位百度搜尋框
"""
注意:
如果有多個相同屬性值的元素,單數形式,定位第一個.
"""
srk = driver.find_element_by_name("wd")
# 列印srk物件
print(srk)

# 列印定位元素所在行的原始碼
print(srk.get_attribute("outerHTML"))

# 5.關閉瀏覽器
driver.quit()

"""
輸出結果:
<selenium.webdriver.remote.webelement.WebElement 
(session="3149d334336f0eab9e4d8d394e4efd72",
 element="0.1359081202533734-1")>
 
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
"""

複數形式

"""
學習目標
    複數形式
        複數定位形式:driver.find_elements_XXX
        複數定位,返回的列表型別資料<list>
        遍歷列表操作具體元素
"""
# 1.匯入selenium
from selenium import webdriver
from time import sleep

# 2.開啟瀏覽器
driver = webdriver.Chrome()
# 3.輸入網址
url = "http://www.baidu.com"
driver.get(url)
sleep(2)

# 4.通過by_id複數定位
srk = driver.find_elements_by_name("wd")
# 5.檢視返回結果資料型別
print("結果資料型別", type(srk))
print("元素個數", len(srk))

# 6.遍歷結果,檢視原始碼
for i in srk:
    # 檢視元素對應的原始碼
    print(i.get_attribute("outerHTML"))

# 7.關團瀏覽器
driver.quit()

"""
結果資料型別 <class 'list'>
元素個數 1
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
"""

(3)by_class_name 定位

說明

當所定位的元素具有class屬性的時候,我們可以通過by_class_name來定位該元素。

搜尋框頁面原始碼:屬性classname值為s_ipt

<input type="text" class="s_ipt" name="wd" id="kw" maxlength="255" autocomplete="off">

示例

使用class屬性定位百度搜尋框。

"""
1.學習目標:
    必須掌握selenium的元素定位方法by_class_name
2.語法
    classname定位
    driver.find_element_by_class_name(class屬性值)
3.需求
    使用class屬性定位百度搜尋框
4.總結
    當元素中有class屬性時才能使用上述定位方法
"""
# 1.匯入selenium
from selenium import webdriver
from time import sleep

# 2.開啟瀏覽器(獲取瀏覽器物件)
driver = webdriver.Chrome()

# 3.輸入網址
url = "http://www.baidu.com"
driver.get(url)
sleep(2)

# 4. 使用name定位百度搜尋框
"""
注意:
如果有多個相同屬性值的元素,單數形式,定位第一個.
"""
srk = driver.find_element_by_class_name("s_ipt")
# 列印srk物件
print(srk)

# 檢視元素對應的原始碼
print(srk.get_attribute("outerHTML"))

# 5.關閉瀏覽器
driver.quit()

"""
輸出結果:
<selenium.webdriver.remote.webelement.WebElement 
(session="e4f97a48e7f113e681950b62c7789966", 
element="0.5782514739919584-1")>

<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
"""

複數形式

"""
學習目標
    複數形式
        複數定位形式:driver.find_elements_XXX
        複數定位,返回的列表型別資料<list>
        遍歷列表操作具體元素
"""
# 1.匯入selenium
from selenium import webdriver
from time import sleep

# 2.開啟瀏覽器
driver = webdriver.Chrome()

# 3.輸入網址
url = "http://www.baidu.com"
driver.get(url)
sleep(2)

# 4.通過by_id複數定位
srk = driver.find_elements_by_class_name("s_ipt")
# 5.檢視返回結果資料型別
print("結果資料型別", type(srk))
print("元素個數", len(srk))

# 6.遍歷結果,檢視原始碼
for i in srk:
    # 檢視元素對應的原始碼
    print(i.get_attribute("outerHTML"))

# 7.關團瀏覽器
driver.quit()

"""
結果資料型別 <class 'list'>
元素個數 1
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
"""

(4)by_tag_name 定位

說明

by_tag_name方法可以通過元素的標籤名來查詢元素。由於搜尋到的標籤名通常不止一個,所以一般結合使用find_elements方法來使用。

假設頁面中有一個button按鈕。

<button type="submitA" value="註冊A" title="加入會員A">註冊使用者A</button>

示例

"""
1.學習目標:
    必須掌握selenium中tag_name定位方法
2.語法
    driver.find_element_by_tag_name(標籤名)  # 單數形式
    driver.find_elements_by_tag_name(標籤名)  # 定位一組標籤名相同的元素
3.需求
    在頁面中,使用tag_name對按鈕註冊使用者A定位
"""
# 1.匯入selenium
from selenium import webdriver
from time import sleep
import os

# 2.開啟瀏覽器(獲取瀏覽器物件)
driver = webdriver.Chrome()

# 3.開啟註冊A頁面
url = "file:///" + os.path.abspath("./練習頁面/註冊A.html")
driver.get(url)
sleep(2)

# 4.使用tag_name定位按鈕
"""
注意:
如果有多個相同標籤的元素,單數形式,定位第一個.
"""
button = driver.find_element_by_tag_name("input")
print(button.get_attribute("outerHTML"))

# 5.關閉瀏覽器
sleep(2)
driver.quit()

"""
輸出結果:
<input type="textA" name="userA" id="userA" placeholder="賬號A" required="" value="">
"""

複數形式

"""
1.學習目標:
    必須掌握selenium中tag_name定位方法
2.語法
    driver.find_element_by_tag_name(標籤名)  # 單數形式
    driver.find_elements_by_tag_name(標籤名)  # 定位一組標籤名相同的元素
3.需求
    在頁面中,使用tag_name複數形式定位 input標籤
"""
# 1.匯入selenium
from selenium import webdriver
from time import sleep
import os

# 2.開啟瀏覽器
driver = webdriver.Chrome()

# 3.開啟註冊A頁面
url = "file:///" + os.path.abspath("./練習頁面/註冊A.html")
driver.get(url)
sleep(2)

# 4.使用tag_name複數形式定位 input標籤
input_elements = driver.find_elements_by_tag_name("input")
# 檢視結果型別
print(type(input_elements))
print(len(input_elements))

# 5.遍歷列表列印每個元素的原始碼
for element in input_elements:
    print(element.get_attribute("outerHTML"))

# 6.關閉瀏覽器
driver.quit()

"""
輸出結果:
<class 'list'>
16
<input type="textA" name="userA" id="userA" placeholder="賬號A" required="" value="">
<input type="password" name="passwordA" id="passwordA" placeholder="密碼A" value="">
<input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value="">
<input type="emailA" name="emailA" id="emailA" placeholder="電子郵箱A" value="">
......等等
"""

總結

tag_name定位:

  • 單數形式
    當頁面中如果定位的標籤是唯一的,可以直接使用tag_name方法定位。
    如果所定位的標籤在頁面中的索引位置是第一個,也可以用tag_name方法定位。
  • 複數形式
    複數定位形式:driver.find_elements_XXX
    複數定位,返回的列表型別資料。
    遍歷列表操作具體元素。

說明

by_link_text通過超文字連結上的文字資訊來定位元素,這種方式一般專門用於定位頁面上的超文字連結。

例如開啟百度首頁,定位點選超連結地圖。

超連結地圖原始碼:

<a class="mnav" name="tj_trmap" href="http://map.baidu.com">地圖</a>

示例

指令碼程式碼需求:使用link_text定位百度首頁地圖連結。

"""
1.學習目標:
    必須掌握selenium中超連結的定位方法
2.語法
    link_text  # 需要連結的全部文字
    driver.find_element_by_link_text(全部文字)
3.需求
    在頁面中,使用定位連線的方法,訪問百度網站,定位點選超連結地圖。
"""
# 1.匯入selenium
from selenium import webdriver
from time import sleep
import os

# 2.開啟瀏覽器
driver = webdriver.Chrome()

# 3.開啟頁面
url = "http://www.baidu.com"
driver.get(url)
sleep(2)

# 4.使用link_text定位
"""
注意:
連線的全部文字,表示<a>標籤中的全部內容,有空格也要算。
如果有相同部分文字的元素,單數形式,定位第一個。
"""
linkText = driver.find_element_by_link_text("地圖")
print(linkText.get_attribute("outerHTML"))

# 5.關閉瀏覽器
driver.quit()

"""
輸出結果:
<a href="http://map.baidu.com" target="_blank" class="mnav c-font-normal c-color-t">地圖</a>
"""

複數形式

# 定位一組標超連結文字全部內容相同的元素,很少用到。
# 1.匯入selenium
from selenium import webdriver
from time import sleep

# 2.開啟瀏覽器
driver = webdriver.Chrome()

# 3.開啟頁面
url = "http://www.baidu.com"
driver.get(url)
sleep(2)

# 4.使用link_text定位
"""
注意:
連線的全部文字,表示<a>標籤中的全部內容,有空格也要寫。
"""
linkText = driver.find_elements_by_link_text("地圖")

# 5.遍歷列表列印每個元素的原始碼
for element in linkText:
    print(element.get_attribute("outerHTML"))

# 6.關閉瀏覽器
driver.quit()

"""
輸出結果:
<a href="http://map.baidu.com" target="_blank" class="mnav c-font-normal c-color-t">地圖</a>
"""

說明

當你不能準確知道超連結上的文字資訊或者只想通過一些關鍵字進行匹配時,可以使用by_partial_link_text這個方法來通過部分連結文字進行匹配。

例如開啟百度首頁,定位點選超連結<hao123>

超連結地圖原始碼:在程式碼裡用”ao1”進行匹配

<a href="https://www.hao123.com" target="_blank" class="mnav c-font-normal c-color-t">hao123</a>

示例

指令碼程式碼:使用partial_link_text方法定位百度首頁<hao123>連結

"""
1.學習目標:
    必須掌握selenium中超連結的定位方法
2.語法
    partial_link_text  # 需要連線部分文字
    driver.find_element_by_partial_link_text(部分文字)
        部分文字必須是連續的文字(中可包含空格)
3.需求
    在頁面中,使用定位連線的方法,訪問百度網站,定位點選超連結<hao123>。
"""
# 1.匯入selenium
from selenium import webdriver
from time import sleep

# 2.開啟瀏覽器
driver = webdriver.Chrome()

# 3.開啟頁面
url = "http://www.baidu.com"
driver.get(url)
sleep(2)

# 4.使用by_partial_link_text定位
"""
注意:
連線的部分文字,表示<a>標籤中的連續的部分內容,之中有空格也要算。
如果有相同部分文字的元素,單數形式,定位第一個。
"""
pLinkText = driver.find_element_by_partial_link_text("ao1")
print(pLinkText.get_attribute("outerHTML"))

# 6.關閉瀏覽器
sleep(2)
driver.quit()

"""
輸出結果:
<a href="https://www.hao123.com" target="_blank" class="mnav c-font-normal c-color-t">hao123</a>
"""

複數形式

# 定位一組標超連結文字目標內容相同的元素,很少用到。
# 1.匯入selenium
from selenium import webdriver
from time import sleep

# 2.開啟瀏覽器
driver = webdriver.Chrome()

# 3.開啟頁面
url = "http://www.baidu.com"
driver.get(url)
sleep(2)

# 4.使用by_partial_link_text定位
"""
注意:
連線的部分文字,表示<a>標籤中的連續的部分內容,之中有空格也要算。
"""
pLinkText = driver.find_elements_by_partial_link_text("ao1")

# 5.遍歷列表列印每個元素的原始碼
for element in pLinkText:
    print(element.get_attribute("outerHTML"))

# 6.關閉瀏覽器
driver.quit()

"""
輸出結果:
<a href="https://www.hao123.com" target="_blank" class="mnav c-font-normal c-color-t">hao123</a>
"""

以上就是Selenium中基礎元素定位的常用API。

相關文章