python selenium-webdriver 元素操作之鼠標操作（四）

上節內容主要說明了元素的定位，本節內容說要說對元素的操作，元素的操作分為兩部分一部分是鼠標的操作，另一種是對鍵盤對元素的操作，下面我們主要講解一下鼠標對元素的操作。

webdriver 模塊中幾種比較常見的幾種操作元素的方式：

1.clear() 　　　　　　#清楚輸入框的內容

2.send_keys('內容')　#在文本框內輸入內容

3.click()　　　　　　  #點擊按鈕

4.submit()　　　　    #表單的提交

webdriver 中 clear(),send_keys(),click() 這幾個方法比較常用，前面篇幅已經我們看到對send_keys('內容')、click()已經使用過，下面我們看一下clear()和submit()的使用。

• 方法：submit()

　　　　解釋:查找到表單（from）直接調用submit即可

　　　　實例：driver.find_element_by_id("form1").submit()

• 方法：clear() 

　　　　解釋:由於有些文本框內包含默認值，我們需要使用clear()清理再次輸入

　　　　實例：driver.find_element_by_id("kw").clear()

上面介紹的幾種方法比較簡單，下面介紹一些其他的模擬操作，比如單擊，雙擊、右擊，元素的拖拽等，如果使用這些模擬的時候，需要使用到另一個模塊 ActionChains，這個模塊基本可以滿足我們對鼠標操作的需求。

使用ActionChains的時候我們需要在頭上引入該模塊

from selenium.webdriver.common.action_chains import ActionChains

下面首先看一下ActionChains的執行原理，當調用ActionChains方法的時候不會立即執行，而是將所有的操作暫時存儲在一個隊列中，當調用perform()的方法時候，隊列會按照放入的先后順序依次執行。

這里我們先看個小示例

#-*- coding:utf-8 -*-
import time
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
driver = webdriver.Chrome()
driver.get('http://cn.bing.com/')
driver.maximize_window()
searchElement = driver.find_element_by_id('sb_form_q').send_keys('selenium')
searchButtonElement = driver.find_element_by_id('sb_form_go')
ActionChainsDriver = ActionChains(driver).click(searchButtonElement)
# ActionChainsDriver.perform()   #此時我們不執行perform() 
time.sleep(5)
driver.quit()

此時沒有執行perform()，我們可以看到雖然使用click()點擊了搜索按鈕，但是確實沒有執行點擊搜索過程。 

下面我們看一下添加了perform()的執行結果

此時我們已經可以看到執行了點擊搜索按鈕，執行了搜索操作。

下面我們來看一下ActionChains 提供了那些方法

• click(on_element=None)  　　                #單擊鼠標左鍵
• click_and_hold(on_element=None) 　　  #點擊鼠標左鍵，按住不放
• context_click(on_element=None)           #點擊鼠標右鍵
• double_click(on_element=None)            #雙擊鼠標左鍵
• drag_and_drop(source, target)              #拖拽到某個元素然后松開
• drag_and_drop_by_offset(source, xoffset, yoffset)          #拖拽到某個坐標然后松開
• move_by_offset(xoffset, yoffset)             #鼠標移動到距離當前位置（x,y）
• move_to_element(to_element)               #鼠標移動到某個元素
• move_to_element_with_offset(to_element, xoffset, yoffset) #將鼠標移動到距某個元素多少距離的位置
• release(on_element=None)                     #在某個元素位置松開鼠標左鍵
• perform()                                             #執行鏈中的所有動作

下面我們來詳細的介紹一下上面提到的方法，那么這個時候需要我們看一下AcitonChains的書寫方法。

• 鏈條式方法

searchElement = driver.find_element_by_id('sb_form_q').send_keys('selenium')
searchButtonElement = driver.find_element_by_id('sb_form_go')
ActionChains(driver).click(searchButtonElement).perform()     #使用一行將所有的步驟寫完

• 分布式方法

searchElement = driver.find_element_by_id('sb_form_q').send_keys('selenium')
searchButtonElement = driver.find_element_by_id('sb_form_go')
ActionChainsDriver = ActionChains(driver).click(searchButtonElement)   #分開兩步進行書寫
ActionChainsDriver.perform()

 根據以上內容可以對ActionChains的鼠標的方法分為3大類，鼠標點擊，鼠標的移動，通過鼠標對元素的拖拽、

1.鼠標的點擊

• 右擊 ----> context_click(rightButtonElement)
• 雙擊 ----> double_click(doubleButtonElement)
• 單擊 ----> click(buttonElement)
• 按住左鍵  ----> click_and_hold(clickHoldElement)

我這邊寫了一個簡單的頁面，主要來模擬以上的操作，大家也可以找一些頁面來試試下面的例子，也可以使用我的頁面。

#-*- coding:utf-8 -*-
import time
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
driver = webdriver.Chrome()
driver.get('file:///C:/Users/hunk/Desktop/demo_clicks.html')
driver.maximize_window()
# 首先我們需要獲取到要操作的元素，然后再次進行操作
doubleButtonElement = driver.find_element_by_xpath('/html/body/form/input[2]')   #獲取雙擊按鈕元素
buttonElement = driver.find_element_by_xpath('/html/body/form/input[3]')         #獲取單擊按鈕元素
rightButtonElement = driver.find_element_by_xpath('/html/body/form/input[4]')    #獲取右擊按鈕元素
clickHoldElement = driver.find_element_by_xpath('/html/body/form/input[5]')      #獲取按住不放按鈕元素
'''內容開始的時候我們也介紹說明，當調用perform()方法時才會執行鼠標操作'''
#雙擊操作
ActionDoubleClick= ActionChains(driver).double_click(doubleButtonElement)
ActionDoubleClick.perform() 
time.sleep(3)
# 單擊操作
ActionClick = ActionChains(driver).click(buttonElement)
ActionClick.perform()
time.sleep(3)
# 右擊操作
ActionContextClick = ActionChains(driver).context_click(rightButtonElement)
ActionContextClick.perform()
time.sleep(3)
#按住不放左鍵
ActionClickHold = ActionChains(driver).click_and_hold(clickHoldElement)
ActionClickHold.perform()
time.sleep(3)
driver.quit()

下面是我們執行上面的代碼的效果，是不是很神奇吧。

 2.鼠標的移動

• 鼠標移動到距離當前位置（x,y）---->  move_by_offset(xoffset, yoffset)
• 鼠標移動到某個元素 ----> move_to_element(MoveElement)

 示例：

#-*- coding:utf-8 -*-
import time
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
driver = webdriver.Chrome()
driver.get('file:///C:/Users/hunk/Desktop/text3.html')
driver.maximize_window()
#第一個操作:鼠標移動到某個元素
#為了演示，開始設置標簽的顏色淡藍色，當鼠標移到到該元素時標簽顏色變為紅色
MoveElement = driver.find_element_by_xpath('//*[@id="box1"]')   #鼠標移到到目標元素
time.sleep(3)
'''將鼠標移到MoveElement'''
Action = ActionChains(driver)

Action.move_to_element(MoveElement).perform()
time.sleep(5)
driver.save_screenshot('move_to_element.png')   #記錄一下我們開始的坐標位置
'''x坐標為正數向右偏移，x坐標為負數向左偏移'''
'''y坐標為正數向下偏移，y坐標為負數向上偏移'''
#為了更好的顯示我們效果，當鼠標移動到目標位置的時候，我們顯示了鼠標的坐標，以后讓當前的位置變成綠色
Action.move_by_offset(-311,-11).perform() #move_by_offset以鼠標當前的位置為中心進行偏移，移動到距離當前位置(x,y)
time.sleep(5)
driver.save_screenshot('move_by_offset.png')   #記錄一下我們移動后的坐標位置
driver.quit()

根據我們前后保存的圖片可以計算到我們移動的偏移是否正確，這個大家可以根據實際來計算一下。

以上代碼執行的效果如下顯示

以上我們隊鼠標的點擊和移動講解完成，下面我們看一下把點擊和移動放在一起的效果，那就是對元素的拖拽。

鼠標的操作第三部分：拖拽

• 將某個元素拖拽到某個元素然后松開 ----> rag_and_drop(source, target)
• 拖拽到某個坐標然后松開 ---->  drag_and_drop_by_offset(source, xoffset, yoffset) 

以上的兩個方法具體的使用

#-*- coding:utf-8 -*-
import time
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
driver = webdriver.Chrome()
driver.get('file:///C:/Users/hunk/Desktop/text3.html')
driver.maximize_window()
#第一個操作:鼠標移動到某個元素
#為了演示，開始設置標簽的顏色淡藍色，當鼠標移到到該元素時標簽顏色變為紅色
dragElement = driver.find_element_by_xpath('//*[@id="box1"]')   #獲取被拖拽的元素
targetElement = driver.find_element_by_xpath('//*[@id="area1"]')   #獲取被拖拽到的目標
Action = ActionChains(driver)
'''將【拖拽我吧！】元素拖拽到第一個對話框'''
Action.drag_and_drop(dragElement,targetElement).perform()   #將【拖拽我吧！】拖到第一個對話框
time.sleep(5)
'''將【拖拽我吧！】元素拖拽到距離當前位置(45,200)，也就是拖拽到第二個對話框'''
'''由於第一次我們已經將元素拖拽到了第一個對話框，所以我們實際的拖拽是從第一個對話框拖拽到第二個對話框'''
Action.drag_and_drop_by_offset(dragElement,45,200).perform()
time.sleep(5)
driver.quit()

為了更好的讓大家看到代碼的實際效果，我這邊將所有的操作結果制作成為動畫

 上面講解的拖拽是selenium自己帶的拖拽方法，我們是否可以講鼠標的移動和點擊生成一個新的拖拽

首先我們來思考一下如何實現拖拽？

我們需要選擇一個元素然后按住鼠標左鍵到某個地方松開鼠標實現拖拽

#-*- coding:utf-8 -*-
import time
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
driver = webdriver.Chrome()
driver.get('file:///C:/Users/hunk/Desktop/text3.html')
driver.maximize_window()
#第一個操作:鼠標移動到某個元素
#為了演示，開始設置標簽的顏色淡藍色，當鼠標移到到該元素時標簽顏色變為紅色
dragElement = driver.find_element_by_xpath('//*[@id="box1"]')   #獲取被拖拽的元素
targetElement = driver.find_element_by_xpath('//*[@id="area3"]')   #獲取被拖拽到的目標
Action = ActionChains(driver)
'''將【拖拽我吧！】元素拖拽到第三個對話框'''
#首先選擇元素，按住不放，然后移動元素，最后松開鼠標，完成拖拽
Action.click_and_hold(dragElement).move_to_element(targetElement).release().perform()
time.sleep(5)
driver.quit()

效果：

此時我們將鼠標的操作基本講解完成了，實際過程中使用點擊的操作比較多，移動和拖拽使用的比較少，也是我在13年做醫療自動化測試項目時，選擇預約日期的時候使用了一次，后面的項目基本沒有再次使用過。

內容中使用的測試頁面大家可以通過http://files.cnblogs.com/files/mengyu/%E6%B5%8B%E8%AF%95%E6%96%87%E4%BB%B6.rar進行下載