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進行下載