selenium與頁面的交互


學習准備:

  1、下面的方法都是用 Python3 語言編寫的,所以要准備:Python3 語言基礎

  2、如果要實踐下面的方法,請看我的隨筆:Python3+Selenium+PyCharm 運行環境

  3、還要了解一下簡單的元素定位,我的隨筆 :Selenium 元素定位

  由於本人水平有限,以下有些 代碼 和 HTML示例 省略,還請見諒!有錯的地方請留言指點!

一、WebDriver 瀏覽器的屬性

  WebDriver 提供了很多屬性來支持對瀏覽器的操作,例如,獲取測試地址、多窗口的處理、獲取瀏覽器的名稱等。

1、獲取測試的地址

  方法:current_url

from selenium import webdriver

driver = webdriver.Firefox()
driver.maximize_window()
driver.get('http://www.baidu.com/')
driver.implicitly_wait(30)
print('測試地址為:{0}'.format(driver.current_url))
driver.quit()

2、獲取當前頁面代碼

  方法:page_source

print('頁面代碼如下:{0}'.format(driver.page_source))

3、獲取當前 Title

  方法:title

print('當前的Title為:{0}'.format(driver.title))

4、頁面的前進和后退

  方法:前進用到的方法是 forward,后退用到的方法是 back

from selenium import webdriver
import time as t
driver = webdriver.Firefox()
driver.maximize_window()
driver.get('http://www.baidu.com/')
t.sleep(2)
driver.get('http://www.bing.com')
t.sleep(2)
#返回到百度
driver.back()
print('當前URL為:{0}'.format(driver.current_url))
t.sleep(2)
#前進到bing
driver.forward()
print('當前URL為:{0}'.format(driver.current_url))
driver.quit()

5、關閉程序

  在 selenium 中,quit 方法用來退出驅動程序(Driver)並關閉執行的瀏覽器;而 close 方法用來關閉執行的瀏覽器,所以關閉程序建議使用 quit 方法。

6、加載測試地址

  在 UI 自動化測試中,打開測試地址用到的方法是 get 方法,它的參數是要打開的測試頁面的地址。

driver.get('http://mail.sina.com.cn/')

7、多窗口實踐

  窗口處理的方法,current_window_handle 用來獲取當前瀏覽器的窗口句柄,window_handles 用來獲取瀏覽器的所有窗口句柄。如下,實現在新浪登錄頁面點擊注冊,在注冊頁面郵箱地址輸入框中輸入郵箱地址,再次跳轉到登錄頁面。

from selenium import webdriver
import time

driver = webdriver.Chrome()
driver.maximize_window()
driver.get('http://mail.sina.com.cn/')
#獲取當前窗口句柄
now_handle = driver.current_window_handle
time.sleep(1)
#點擊注冊鏈接
driver.find_element_by_link_text('注冊').click()
time.sleep(1)
#獲取所有窗口句柄
handles  = driver.window_handles
#對所有窗口句柄循環處理
for handle in handles:
    if handle != now_handle:
        #窗口變化之后需要定位當前窗口
        driver.switch_to.window(handle)
        time.sleep(2)
        driver.find_element_by_name('email').send_keys('bing')
        time.sleep(2)
        #關閉注冊頁面
        driver.close()
driver.switch_to.window(now_handle)
time.sleep(2)
#在賬號輸入框輸入郵箱
driver.find_element_by_id('freename').send_keys('bing')
time.sleep(2)

driver.quit()

8、瀏覽器最大化

  方法:maximize_window,一般打開瀏覽器時,界面並不是最大化的,這對 UI 自動化測試的影響比較大,所以建議使用此方法讓瀏覽器最大化。

driver.maximize_window()

9、刷新

  方法:refresh ,有些場景要用到頁面刷新后查看效果。

driver.refresh()

10、獲取執行的瀏覽器

  方法:name

print('測試執行的瀏覽器為:{0}'.format(driver.name))

二、WebElement 類的方法

1、清除

  方法:clear

em = driver.find_element_by_name('email')
#輸入關鍵字
em.send_keys('selenium')
time.sleep(2)
#清除關鍵字
em.clear()

2、獲取元素屬性值

  方法:get_attribute,在測試中,經常需要獲取輸入框中的值,或者獲取輸入框中的提示信息。

  如,“請輸入用戶名”的元素屬性是 place,獲取提示信息。

name = driver.find_element_by_name('username')
print('用戶名輸入框中提示信息為:{0}'.format(name.get_attribute('place')))

  在輸入框中輸入的值一般都在 value 屬性中,如在百度搜索輸入框中輸入的搜索關鍵存放在百度搜索 input 的 value 屬性中。

sr = driver.find_element_by_id('kw')
sr.send_keys('selenium')
print('填寫的關鍵字為:{0}'.format(sr.get_attribute('place')))

3、檢查元素是否可見

  方法:is_displayed,用於測試該屬性對用戶是否可見,返回結果為布爾類型(True、False)。

about = driver.find_element_by_partial_link_text('關於百度')
print('關於百度是否可見:{0}'.format(about.is_displayed()))

4、檢查元素是否可編輯

  方法:is_enabled,用於測試文本是否可編輯,返回結果是布爾類型。

sr = driver.find_element_by_id('kw')
print('搜索輸入框是否可編輯:{0}'.format(sr.is_enabled()))

5、檢查是否已選中

  方法:is_selected,主要針對單選按鈕或復選按鈕,判斷它們是否選中,返回結果是布爾類型。

zd = driver.find_element_by_id('st1')
print('自動登錄是否默認選中:{0}'.format(zd.is_selected()))

6、提交表單

  方法:submit,在 form 表單中,點擊“提交”按鈕,跳轉到另一個頁面。click 只是單純的點擊;submit 一般是有 form 表中,只是用在有 form 表單的提交。

  form 表單的 HTML 代碼中有:

<form action="index.html" method="get">
    <p>
        昵稱:<input type="text" name="username">
    </p>
    <p>
        <input type="submit" name="form" value="提交">
    </P>
</form>

  點擊“提交”按鈕跳轉到 index.html 頁面,實現交互的主要代碼:

driver.find_element_by_name('username').send_keys('user0')
driver.find_element_by_name('form').submit()

 三、下拉框實戰

1、Select 類的詳解

  針對自動化中的下拉框,selenium 中提供了 select 類來處理,在 select 模塊中導入方式是:from selenium.webdriver.support.select import Select 。

2、定位思路

  在百度搜索設置中設置期望的搜索結果顯示的條數為例,這部分的HTML 代碼如下:

<td id="se-setting-3">
    <select name="NR" id="nr">
        <option value="10" selected="">每頁顯示10條</option>
        <option value="20">每頁顯示20條</option>
        <option value="50">每頁顯示50條</option>
    </select> 
    百度的原始設定10條最有效且快速
</td>

  實現步驟:

  1)首先定位到 Select 下拉框的元素屬性,具體代碼:nr = driver.find_element_by_name('NR');

  2)實例化 Select 類,參數為 nr,具體代碼:select = Select(nr);

  3)Select 實例化后的對象 select 可以調用 Select 類的任何一個方法。

3、在 Select 類中的各種定位實踐

  方法1:select_by_index,參數是索引值,如實現每頁顯示 50 條,索引是 2;

  方法2:select_by_value,本例子中的 value 值是 10、20、50;

  方法3:select_by_visible_text,文本信息就顯而易見了吧,注意空格等,最好復制文本信息保持一致,具體代碼如下。

from selenium import webdriver
from selenium.webdriver.support.select import Select
from selenium.webdriver.common.action_chains import ActionChains as AC
import time as t

driver = webdriver.Chrome()
driver.maximize_window()
driver.implicitly_wait(30)
driver.get('http://www.baidu.com')

#實現鼠標懸浮在百度首頁的設置
#這里為a 的第8個元素
element = driver.find_element_by_css_selector('a.pf:nth-child(8)')
t.sleep(3)
AC(driver).move_to_element(element).perform()
t.sleep(3)
#點擊設置中的搜索設置按鈕
driver.find_element_by_link_text('搜索設置').click()
#driver.find_element_by_css_selector('.setpref').click()#沒有成功
t.sleep(2)
#定位到下拉框元素屬性
nr = driver.find_element_by_name('NR')
#實例化 Select 類
select = Select(nr)
select.select_by_index(2) # 索引定位
# select.select_by_value('50') # value 定位
# select.select_by_visible_text('每頁顯示20條') # 文本定位
print('下拉框選擇的最新條數是:',nr.get_attribute('value'))
t.sleep(2)
driver.quit()

四、彈出框實踐

1、Alert 類的詳解

  在HTML 的 Javascript 交互中主要有 Alert 警告框、Confirm 確認框、Prompt 消息對話框。

  在 Selenium 中對於彈出框的處理方法可以使用 alert 模塊中的 Alert 類,在 Alert 類中,方法 text 用來獲取 Alert 彈出框的文本信息。accept 和 dismiss 方法主要應用在 Confirm 彈出確認框中,accept 用來接受確認框,dismiss 用來拒絕確認框。send_keys 主要應用在 Prompt 消息對話框中,在輸入框中輸入要輸入的值。在 Selenium 中是通過 switch_to_alert 方法調用 Alert 類中的方法,而 switch_to_alert 方法是屬於 WebDriver 類的方法。

2、警告框的處理

  如在百度搜索設置中,設置后點擊“保存設置”按鈕,彈出 alert 對話框,點擊“確認”按鈕。

from selenium import webdriver
from selenium.webdriver.support.select import Select
from selenium.webdriver.common.action_chains import ActionChains as AC
import time as t

driver = webdriver.Chrome()
driver.maximize_window()
driver.implicitly_wait(30)
driver.get('http://www.baidu.com')

#實現鼠標懸浮在百度首頁的設置
element = driver.find_element_by_css_selector('a.pf:nth-child(8)')
t.sleep(3)
AC(driver).move_to_element(element).perform()
t.sleep(3)
#點擊設置中的搜索設置按鈕
driver.find_element_by_link_text('搜索設置').click()
#driver.find_element_by_css_selector('.setpref').click()#沒有成功
t.sleep(2)
#點擊搜索設置按鈕
driver.find_element_by_css_selector('#gxszButton > a.prefpanelgo').click()
t.sleep(2)
#獲取彈出框的文本信息
print('alert 彈出文本信息為:{0}'.format(driver.switch_to.alert.text))
#點擊彈出框確認
driver.switch_to.alert.accept()

  運行代碼后,會打印出 Alert 的文本信息。

3、確認框的處理

  Confirm 是彈出確認的對話框,可以選擇“確認”或“取消”按鈕,確認的方法是 accept;取消的方法是 dismiss。

driver.switch_to.alert.accept()  #確認
driver.switch_to.alert.dismiss() #取消

4、消息對話框的處理

  Prompt 消息對話框,在 JavaScript 中用於詢問一些需要與用戶交互的信息,方法:send_keys。

#在彈出輸入框中輸入
driver.switch_to.alert.send_keys('python 學習')

 五、WebDriverWait 類實戰

  在 UI 自動化測試中,首先要保障測試腳本的穩定運行。在實際的測試場景里,由於網絡的因素導致需要測試的頁面打不開或者打開延遲,從而導致頁面元素找不到等各種錯誤的出現。

  等待方式主要存在以下三種方式:

  1)固定等待。如調用 time 模塊中的 sleep 方法,固定等待幾秒。

  2)隱式等待。用到的方法是 implicitly_wait,隱式等待指設置最長的等待時間。

  3)顯示等待。主要是指程序會每隔一段時間執行自定義的程序判斷條件,如果判斷條件成功,程序就會繼續執行;如果判斷條件失敗,程序就會報 TimeOutEcpection 的異常信息。

  time.sleep(3) 增加了固定等待 3 秒時間,如果每個步驟都增加固定等待時間,那么一個測試用例執行下來等待時間將會增加十幾秒,大大地延長了測試用例的執行的時間。因此,在 Selenium 中提供了 WebDriverWait 類,專門解決網絡延遲等待等問題。

1、WebDriverWait 類詳解

  WebDriverWait 類放置在 wait 模塊在,使用該類時,需要先導入並且對它進行實例化,導入的代碼如下:

from selenium.webdriver.support.ui import WebDriverWait

  WebDriverWait 類的參數分別是 driver 和 timeout 。driver 指的是 webdriver 實例化后的對象,timeout 指的是具體的等待時間。WebDriverWait 類的 until 方法中,參數 method 指的是需要調用的方法,調用方法來自 expected_conditions 模塊中的類,也就是說 WebDriverWait 會與 expected_conditions 模塊結合起來應用。

  調用 expected_conditions 模塊中的類后,一般返回兩種形式的對象實例:一種是布爾型,返回 True 程序會繼續執行,否則程序會報 TimeOutEcpection 的異常信息;另一種是返回某個具體實例對象,使用該對象就可以直接調用該類中的方法。

2、元素可以見並且可操作

  element_to_be_clickable 判斷某元素可見后執行輸入、點擊等操作。判斷滿足條件后返回的是 WebElement 類的實例對象,這樣就可以調用 WebElement 類中的 send_keys 等方法。如下,實現點擊百度首頁的“百度一下”按鈕,首先加載搜索的輸入框,然后在輸入框輸入關鍵字,否則就返回錯誤的信息:

from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions
from selenium.webdriver.common.by import By
import time as t

driver = webdriver.Chrome()
driver.maximize_window()
driver.implicitly_wait(30)
driver.get('http://www.baidu.com')
driver.implicitly_wait(30)
'''
WebDriverWait直接調用靜態方法until,並且顯示等待10s,
在until的方法中又調用了expected_conditions,
模塊中的element_to_be_clickable類,
在element_to_be_clickable類中需要指定按ID或者其他元素屬性來指定元素屬性。
'''
so = WebDriverWait(driver,10).until(expected_conditions.element_to_be_clickable((By.ID,'kw')))
so.send_keys('Selenium')
t.sleep(3)
driver.quit()

  如果對以上代碼中,故意寫錯元素屬性,把 kw 寫成 kww,執行后,則會有 TimeOutEcpection 的錯誤提示。

3、指定元素的文本位置

  text_to_be_present_in_element 指定元素文本的位置,一般用於驗證一個文本信息或者錯誤的提示信息,返回的是布爾型,可以打印出來看結果。

disText = WebDriverWait(driver,10).until(expected_conditions.
          text_to_be_present_in_element((By.
          XPATH,'輸入具體的xpath'),'需要驗證的文本信息'))
print('結果是:{0}'.format(disText))

4、判斷元素是否可見

  visibility_of_element_located 方法的作用是等元素可見后再執行操作。如下,百度首頁的“關於百度”的鏈接:

WebDriverWait(driver,10).until(expected_conditions.
    visibility_of_element_located(By.LINK_TEXT,'關於百度'))

 六、ActionChains 類實踐

  在功能自動化測試中,經常會用到鼠標事件。在 Selenium 中,主要在 action_chains 模塊的 ActionChains 類中,導入方式為:

from selenium.webdriver.common.action_chains import ActionChains

1、ActionChains 類詳解

  在 ActionChains 類中提供了常用的鼠標操作方法,首先要對 ActionChains 類進行實例化,該類的構造函數參數為 driver,也就是 WebDriver 實例化后的對象,實例化后就可以調用它里面的方法了:

from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains as AC
import time as t

driver = webdriver.Chrome()
driver.maximize_window()
driver.implicitly_wait(30)
driver.get('http://www.baidu.com')
#對 AC 類進行實例化
actionChains = AC(driver)
#actionChains.   #這里就會顯示該類的方法了
driver.quit()

2、鼠標懸浮操作

  move_to_element 方法用來使鼠標懸浮到某一元素上,以百度首頁的搜索設置為例:

#對 AC 類進行實例化
actionChains = AC(driver)
#實現鼠標懸浮在百度首頁的設置
element = driver.find_element_by_css_selector('a.pf:nth-child(8)')
t.sleep(3)
#鼠標懸浮到“設置”
actionChains.move_to_element(element).perform()
#點擊設置中的搜索設置按鈕
driver.find_element_by_link_text('搜索設置').click()

3、鼠標右鍵操作

   context_click 是觸發鼠標右鍵操作的方法。

#對 AC 類進行實例化
actionChains = AC(driver)
kw = driver.find_element_by_id('kw')
#鼠標在百度輸入框右鍵操作
actionChains.context_click(kw)

4、鼠標雙擊操作

  double_click 是觸發鼠標雙擊的操作方法,一般使用在有數據交互的地方。比如,有這樣一個業務,點擊按鈕會向數據庫插入一條數據,而且只能插入一條數據,如果前端沒有對雙擊進行處理的話,雙擊按鈕后就會向數據庫插入兩條數據。

su = driver.find_element_by_id('su')
#對“百度一下”按鈕雙擊操作
actionChains.double_click(su)

七、鍵盤事件實踐

  Selenium 中提供了keys 模塊中的 Keys 類來處理鍵盤事件的操作,如下:

from selenium import webdriver
import time as t
from selenium.webdriver.common.keys import Keys

driver = webdriver.Chrome()
driver.maximize_window()
driver.implicitly_wait(30)
driver.get('http://www.baidu.com')
so = driver.find_element_by_id('kw')
so.send_keys('python')
t.sleep(3)
'''
使用鍵盤事件,把復制的關鍵字粘貼到bing搜索輸入框中
'''
#選中輸入框的搜索關鍵字
so.send_keys(Keys.CONTROL,'a')
#復制搜索的關鍵字
so.send_keys(Keys.CONTROL,'c')
t.sleep(3)
#按下Backspace刪除輸入的關鍵字
so.send_keys(Keys.BACKSPACE)
t.sleep(3)

driver.get('http://www.bing.com')
bingso = driver.find_element_by_id('sb_form_q')
#復制搜索關鍵字到bing搜索輸入框中
bingso.send_keys(Keys.CONTROL,'v')
t.sleep(3)

driver.quit()

八、獲取截圖

  在自動化測試中,在測試執行期間有時需要獲取截圖信息,一方面可以定位錯誤的腳本,方便調試腳本,另一方面也可以以此為據,便於開發人員有效的交流。

1、獲取當前截圖

  方法:save_screenshot

driver.save_screenshot('tupian.png') # 在當前目錄下生成 tupian.png 的圖片

2、保存當前屏幕快照

  方法:get_screenshot_as_file,可以填寫完整的文件路徑。

driver.get_screenshot_as_file('D:/tupian.png')

3、獲取圖片二進制數據

  方法:get_screenshot_as_png,該方法測試場景中使用較少。

print(driver.get_screenshot_as_png())

 九、JavaScript 的處理

  在瀏覽器的滑動到底部或者頂部,對時間控件以及富文本等處理中,需要 JavaScript 的腳本配合,在 Selenium 中對 JavaScript 腳本調用的方法是 execute_script。

1、瀏覽器的滑動操作

  如在百度搜索中,實現滑動到瀏覽器的底部或者頂部:

from selenium import webdriver
import time as t

driver = webdriver.Chrome()
driver.maximize_window()
driver.implicitly_wait(30)
driver.get('http://www.baidu.com')
driver.implicitly_wait(30)
driver.find_element_by_id('kw').send_keys('selenium')
driver.find_element_by_id('su').click()
#瀏覽器活動到底部 js 代碼
down = "var q=document.documentElement.scrollTop=10000"
t.sleep(3)
#操作 js 實現鼠標滑動到瀏覽器底部
driver.execute_script(down)
t.sleep(3)
#點擊下一頁
driver.find_element_by_link_text('下一頁>').click()
t.sleep(3)
#瀏覽器活動到頂部 js 代碼
up = "var q=document.documentElement.scrollTop=0"
#先滑到底部
driver.execute_script(down)
t.sleep(3)
#操作 js 實現鼠標滑動到瀏覽器頂部
driver.execute_script(up)
t.sleep(3)
driver.quit()

2、富文本的處理

  在 Web 產品中,有時需要對富文本中寫入內容。富文本一般都在 iframe 框架中,可以通過 iframe 的 ID 或者索引的方式進入 iframe 中,再通過 JavaScript 的方式在富文本中輸入需要的內容。如 iframe 的 ID 為 ueditor_0,在富文本中寫入內容,可以單獨寫個可調用函數,並進入相應的位置后調用:

from selenium import webdriver
import time as t

def richText(txt):
    '''往富文本中寫入內容'''
    js = "document.getElementById('ueditor_0').contentwindow."\
        "document.body.innerHTML='{0}'".format(txt)
    driver.execute_script(js)

driver = webdriver.Chrome()
driver.maximize_window()
driver.implicitly_wait(30)
driver.get('富文本 URL 地址')
richText('一起來學 Python 吧!')
t.sleep(3)
driver.quit()

3、時間控件的處理

  時間控件經常出現在查詢中,需要按某一時間段查詢出數據並且來驗證查詢功能是否正確。大多數時間控件是只讀屬性的,在自動化測試中,處理只讀屬性的時間控件中輸入時間。用 js 把禁止輸入的 readonly 屬性去掉,把它當成一個普通的 input 框處理。

  取消時間控件的只讀屬性,有四種方法:參考方法

# 1.原生js,移除屬性
# js = "document.getElementById('txtBeginDate').removeAttribute('readonly')" 
# 2.jQuery,移除屬性
# js = "$('input[id=txtBeginDate]').removeAttr('readonly')"
# 3.jQuery,設置為false
# js = "$('input[id=txtBeginDate]').attr('readonly',false)"
# 4.jQuery,設置為空(同3)
js = "$('input[id=txtBeginDate]').attr('readonly','')"

driver.execute_script(js)

  步驟:首先取消時間控件的只讀屬性;然后在 input 輸入框中給 value 賦值,填寫需要輸入的時間。

  如在 input 中 value placeholder=“開始時間≥當前時間”,編寫開始和結束時間的可調用函數:

def startJs(startTime):
    '''開始時間中輸入自定義的時間,前一段是取消只讀屬性,后一段是輸入開始時間'''
    js = "$(\"input[placeholder='開始時間≥當前時間']\").removeAttr('readonly');$(\"input[placeholder='開始時間≥當前時間']\").attr('value','{0}')".format(startTime)
    driver.execute_script(js)

def endJs(endTime):
    '''結束時間中輸入自定義的時間,前一段是取消只讀屬性,后一段是輸入結束時間'''
    js = "$(\"input[placeholder='結束時間>開始時間']\").removeAttr('readonly');$(\"input[placeholder='結束時間>開始時間']\").attr('value','{0}')".format(endTime)
    driver.execute_script(js)

  時間控件中實現自定義輸入代碼:

from selenium import webdriver
import time as t

def startJs(startTime):
    '''開始時間中輸入自定義的時間,
    前一段是取消只讀屬性,后一段是輸入開始時間'''
    js = "$(\"input[placeholder='開始時間≥當前時間']\")." \
         "removeAttr('readonly');" \
         "$(\"input[placeholder='開始時間≥當前時間']\")." \
         "attr('value','{0}')".format(startTime)
    driver.execute_script(js)

def endJs(endTime):
    '''結束時間中輸入自定義的時間,
    前一段是取消只讀屬性,后一段是輸入結束時間'''
    js = "$(\"input[placeholder='結束時間>開始時間']\")." \
         "removeAttr('readonly');" \
         "$(\"input[placeholder='結束時間>開始時間']\")." \
         "attr('value','{0}')".format(endTime)
    driver.execute_script(js)

driver = webdriver.Chrome()
driver.maximize_window()
driver.implicitly_wait(30)
driver.get('時間控件的 URL 地址')

startJs('2019-01-01 09:00:00')
t.sleep(3)
endJs('2019-12-12 23:59:59')
t.sleep(3)
driver.quit()

  

這些方法還要在具體的 Python UI 自動化測試 項目中實踐,靈活運用,才能真正的掌握!

謝謝查看,筆記持續修改完善!

2019-10-13


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM