Python + Selenium（十）元素對象操作

WebElement 是 WebDriver 中另一個重要的類，通過 find_element() 方法找到的元素對象就是 WebElement 類型。

WebElement 中定義了頁面元素對象的操作方法。比如點選

click()

，輸入文本

send_keys()

。

常用操作

元素點選

找到元素後可以對元素進行點選，模拟的是滑鼠單擊操作。

點選的時候，點選的是元素的正中心位置，這一點需要注意。

輸入文本

Web 頁面上的操作，除了點選基本上就是輸入了。

輸入通過 WebElement 中提供的

send_keys()

方法實作。

# 在百度輸入框中輸入“測試”
driver.find_element_by_id('kw').send_keys('測試')

清空輸入框

在輸入框中輸入内容時，有時候會存在輸入框中已有文字，再輸入就會追加再後面，造成輸入内容可能并不是你想要的。那麼就需要先清空目前輸入框後再進行輸入。

# 先清空，再在百度搜尋框中輸入“測試”
driver.find_element_by_id('kw').clear()
driver.find_element_by_id('kw').send_keys('測試')

滾動螢幕至元素可見

如果一個頁面較長，某些元素沒有出現在目前螢幕，可能會導緻無法點選。那想要點選到，就需要滾動頁面直至該元素出現在螢幕上。

location_once_scrolled_into_view

就是用來實作該操作的，執行該操作就會滾動螢幕，将指定的元素展示在目前螢幕。注意，此方法作為一個屬性來用，是以沒有括号。

# 京東頁面底部有很多連結，通過此屬性滾動到該元素所在的位置
driver.find_element_by_link_text('合作招商').location_once_scrolled_into_view

注意，由于該方式使用了 JavaScript 中的 scrollIntoView() 方法，可能後續會更改。代碼中有這樣一句警告：THIS PROPERTY MAY CHANGE WITHOUT WARNING(此屬性可能會在沒有任何提醒的情況下被更改).

擷取元素内容

在自動化測試中，需要擷取一些頁面上的文本或者元素的屬性進行斷言。

手工測試的時候，我們通過肉眼去對比實際結果與預期結果的差異來判斷是否存在 bug；而自動化測試的時候這種核實的過程隻有交給代碼來處理了，是以需要從頁面上來提取一些關鍵字段作為實際結果來和預設的預期結果進行對比，以此來判斷是否可能出現 bug。

WebElement 中提供了這些方法來擷取頁面上的值，可以根據需要取用。

擷取元素文本

通過元素的

text

屬性類擷取頁面上的文本。下面是一個登入成功的提示資訊：

我們可以擷取文本來斷言：

a_info = driver.find_element_by_class_name("alert-success").text
# 預期的"登入成功"與實際取出來的文本做斷言
assert '登入成功' == a_info

擷取元素屬性

在 HTML 元素的屬性有三種：

attribute 由 HTML 提供，就是我們之前看到的屬性如 id、name、class等；
property 是 JavaScript 對每個元素定義的屬性，通過開發者工具可以檢視到這些 property；

Python + Selenium（十）元素對象操作
css property 是 css 的屬性，在開發者工具中也能看到：

Python + Selenium（十）元素對象操作
通過 get_attribute(name) 可以擷取 HTML 頁面元素屬性：

# 擷取百度一下按鈕的value屬性值
driver.find_element_by_id('su').get_property('value') 
## 百度一下

通過

get_property(name)

擷取元素的 JavaScript 屬性：

# 擷取百度一下按鈕的baseURI的值
driver.find_element_by_id('su').get_property('value') 
## https://wwww.baidu.com

通過

value_of_css_property(property_name)

傳回元素的 css 屬性值，比如針對上面圖中的二維碼，二維碼的 url 是放在 css 的 background 屬性值中。要想擷取二維碼的 url ：

bg = driver.find_element_by_class_name('qrcode-img').value_of_css_property('background')
## 'rgba(0, 0, 0, 0) url("https://ss1.bdstatic.com/.../zbios_09b6296.png")'

上面的結果省略了一些，如果你想要拿到 url 可以通過字元串切片或者正規表達式：

url = bg.split('("')[1].split('")')[0]
# 或正規表達式
import re
url = re.search(r'\("(.+?)"\)', bg).group(1)

擷取元素位置、大小

location

屬性用于擷取元素左上角所在的坐标點，以字典形式傳回x，y的值：

driver.find_element_by_id('su').location 
## {'x': 738, 'y': 223}

螢幕的橫向坐标位置用 x 表示，縱向坐标點的位置用 y 表示

通過

size

屬性可以擷取元素的像素大小：

driver.find_element_by_id('su').size
## {'height': 36, 'width': 100}

rect 屬性，以字典形式傳回元素大小和左上角的位置，相當于上面兩個屬性的綜合：

driver.find_element_by_id('su').rect
## {'height': 36, 'width': 100, 'x': 737.8108520507812, 'y': 223.1344451904297}

元素标簽

tag_name

屬性用于擷取元素标簽名：

driver.find_element_by_id('su').tag_name
## input

元素父級元素對象

parent

屬性用于擷取元素的父級元素對象：

driver.find_element_by_id('su').parent
## <selenium.webdriver.chrome.webdriver.WebDriver (session="...")>

元素截圖

以下三種方式用于對元素截圖，注意這裡隻會截取對應的元素，并且元素必須要可見。

截圖方法	說明
screenshot_as_base64	以base64位傳回元素截圖，可用于 HTML 報告
screenshot_as_png	傳回元素截圖二進制圖檔資料，可通過檔案讀寫生成檔案
screenshot(filename)	傳回元素截圖到指定路徑，儲存到本地

元素狀态判斷

有一些傳回 bool 類型的方法，用來判斷元素的一些狀态。比如是否被選中，是否可見等等。

方法	說明
is_selected()	元素是否被選中
is_enabled()	元素是否可用
is_displayed()	元素是否可見

查找元素

通過 find_element() 方法查找到的元素，可以視為一個局部的 HTML 頁面。這部分的 HTML 頁面也還可以進行元素查找，相當于縮小了查找範圍。因為 WebElement 元素對象還可以進行 find_element()。

<div id="u1">
	<a href="http://news.baidu.com" name="tj_trnews" class="mnav">新聞</a>
	<a href="https://www.hao123.com" name="tj_trhao123" class="mnav">hao123</a>
	<a href="http://map.baidu.com" name="tj_trmap" class="mnav">地圖</a>
</div>

以上面的 HTML 片段做一個簡單的示範：

u1 = driver.find_element_by_id('u1')
news = u1.find_element_by_link_text('新聞')

注意，第二句是對找到的元素進行查找。

擷取頁面 title 和 URL

還有一部分内容，由 WebDriver 提供的方法擷取。這部分内容也會用于斷言，由于這部分内容不屬于某個具體的元素，是以是由 WebDriver 類來提供。

擷取頁面的 title，也就是 head 中的 title：

driver.title
## 百度一下，你就知道

擷取目前 url：

driver.current_url
## https://www.baidu.com