『心善淵』Selenium3.0基礎 — 12、Selenium操作滑鼠和鍵盤事件

繁華似錦Fighting發表於2021-07-02
事件

目錄

（一）對滑鼠的操作

1、滑鼠事件介紹

前面例子中我們已經學習到可以用click()來模擬滑鼠的單擊操作，而我們在實際的Web產品測試中發現，有關滑鼠的操作，不單單隻有單擊，有時候還要用到右擊，雙擊，拖動等操作，這些操作包含在ActionChains類中。

2、ActionChains 類滑鼠操作的常用方法

事件 說明
context_click() 右擊
double_click() 雙擊（常用）
drag_and_drop() 拖動（常用）
move_to_element() 滑鼠懸停在一個元素上（常用）
click_and_hold() 按下滑鼠左鍵在一個元素上

注意：Seleniun只能實現在頁面中單擊右鍵，但是右鍵後出現的選單介面上，還不支援定位，也就不能操作。

3、perform()方法

ActionChains用於生成使用者的行為。所有的行為都儲存在ActionChains物件。

perform()方法執行所有ActionChains中儲存的行為。

4、滑鼠事件操作步驟

  1. 引入包ActionChains()
    # 兩種匯入都可以
from selenium.webdriver import ActionChains
from selenium.webdriver.common.action_chains import ActionChains
    這裡需要注意的是，在使用ActionChains類下面的方法之前，要先將包引入。
  2. 定位需要滑鼠操作的元素。
  3. 執行滑鼠事件。
    """
1. 語法：
	ActionChains(driver).滑鼠事件(需要滑鼠操作的元素).perform()
2. 說明：
	driver: wedriver例項執行使用者操作,也就是當前瀏覽器物件。
	滑鼠事件(元素)：雙擊，拖拽，懸停等動作，需要將操作的元素定位出來並且穿入相應的動作中。
	perform() ： 執行
"""
# 1. 定位註冊按鈕
button = driver.find_element_by_css_selector("button[type='submitA']")
# 2. 執行滑鼠懸停事件
ActionChains(driver).move_to_element(button).perform()
    perform()執行所有ActionChains中儲存的行為。
    perfrome()同樣也是ActionChains類提供的的方法，通常與ActionChains()配合使用。

5、示例

（1）右鍵單擊、左鍵雙擊

"""
1.學習目標:
    必須掌握滑鼠的操作方法
2.語法
    2.1 匯入ActionChains
        from selenium.webdriver.common.action_chains import ActionChains
        from selenium.webdriver import ActionChains
    2.2 使用方法
        ActionChains(driver).滑鼠事件(需要滑鼠操作的元素).perform()
    2.3 滑鼠右鍵
        context_click(需要操作的元素)
    2.3 滑鼠雙擊
        double_click(需要操作的元素)
3.需求
    在百度頁面中,完成滑鼠右擊和滑鼠雙擊動作
"""
# 1.匯入selenium
from selenium import webdriver
from time import sleep
from selenium.webdriver import ActionChains
# from selenium.webdriver.common.action_chains import ActionChains

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

# 3.開啟百度頁面
url = "https://www.baidu.com/"
driver.get(url)

# 4.在百度首頁右鍵單擊、左鍵雙擊
# 4.1 右鍵單擊
# 4.1.1 定位百度首頁logo
logo = driver.find_element_by_css_selector("#lg > map > area")

# 4.1.2 在logo圖片上右擊滑鼠
ActionChains(driver).context_click(logo).perform()

# 4.2 左鍵雙擊 百度一下
# 4.2.1 定位百度輸入框
baidu_element = driver.find_element_by_id("kw")

# 4.2.2 在輸入框中輸入【心善淵&Selenium基礎】
baidu_element.send_keys("【心善淵&Selenium基礎】")
sleep(3)

# 4.2.3 定位按鈕 百度一下
yixia_element = driver.find_element_by_id("su")

# 4.2.4 左鍵雙擊 百度一下
ActionChains(driver).double_click(yixia_element).perform()
sleep(3)

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

（2）滑鼠拖拽動作

動作描述：

  • 在源元素上按下滑鼠左鍵，然後移動到目標元素上釋放。
  • source：滑鼠拖動的源元素。
  • target：滑鼠釋放的目標元素。

頁碼程式碼片段：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>拖拽div</title>
    <style type="text/css">
        div {
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: red;
        }
    </style>
<body>
<div id="div1"></div>
<div id="div2" style="left:170px; background-color:green"></div>
</body>
</html>

注：需要自己寫拖動指令碼，以上只是個樣式。

指令碼程式碼：

"""
1.學習目標:
    必須掌握滑鼠拖拽的使用
2.語法
    2.1 匯入ActionChains
        from selenium.webdriver.common.action_chains import ActionChains
        from selenium.webdriver import ActionChains
    2.2 使用方法
        ActionChains(driver).滑鼠事件(需要滑鼠操作的元素).perform()
    2.3 滑鼠拖拽動作
        （1）把一個元素，拖拽到目標元素位置
            drag_and_drop(起始元素,終止元素)
        （2）把一個元素拖動到頁面指定位置
            drag_and_drop_by_offset(元素, 橫座標, 縱座標)

3.需求
    在頁面中,完成滑鼠拖拽動作。
"""
# 1.匯入selenium
from selenium import webdriver
from time import sleep
import os
from selenium.webdriver import ActionChains

# from selenium.webdriver.common.action_chains import ActionChains

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

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

# 4.使用滑鼠拖拽方法
# 4.1 把一個元素，拖拽到目標元素位置
# 4.1.1 定位起始元素和終止元素
red = driver.find_element_by_id("div1")  # 定位紅色
green = driver.find_element_by_id("div2")  # 定位綠色
sleep(2)
# 4.1.2 執行滑鼠拖拽
ActionChains(driver).drag_and_drop(red, green).perform()
sleep(2)
# 4.2 將綠色元素拖動到頁面指定位置
# 4.2.1 定位綠色元素
green_1 = driver.find_element_by_id("div1")

# 4.2.2 執行滑鼠拖拽,(600, 200)為座標
ActionChains(driver).drag_and_drop_by_offset(green_1, 600, 200).perform()

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

（3）滑鼠懸停、按下動作

頁面程式碼片段：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>註冊A</title>
    <style type="text/css">
        /*懸停-綠色*/
        button:hover {
            padding: 10px;
            background: green;
        }

        /*按下狀態-紅色*/
        button:active {
            padding: 10px;
            background: red;
        }

    </style>
</head>
<body>
<form action="">
    <div id="zc">
        <p>
            <button type="submitA" value="註冊A" title="加入會員A">註冊使用者A</button>
        </p>
    </div>
</form>
</body>
</html>

指令碼程式碼：

"""
1.學習目標:
    必須掌握滑鼠懸停、按下的操作方法
2.語法
    2.1 匯入ActionChains
    from selenium.webdriver.common.action_chains import ActionChains
    from selenium.webdriver import ActionChains
    2.2 使用方法
    ActionChains(driver).滑鼠事件(需要滑鼠操作的元素).perform()
    2.3 滑鼠懸停
        move_to_element(需要操作的元素)
    2.4 滑鼠按下
        click_and_hold(需要操作的元素)
3.需求
    在頁面中,完成上述操作。
"""
# 1.匯入selenium
from selenium import webdriver
from time import sleep
import os
from selenium.webdriver import ActionChains

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

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

# 4.對註冊按鈕,執行滑鼠懸停、按下事件
# 4.1 滑鼠懸停-按鈕變黃
# 4.1.1 定位註冊按鈕
button = driver.find_element_by_css_selector("button[type='submitA']")

# 4.1.2 執行滑鼠懸停事件
ActionChains(driver).move_to_element(button).perform()
sleep(3)

# 4.2 滑鼠按下，按鈕變紅
# 4.2.1 執行滑鼠按下事件
ActionChains(driver).click_and_hold(button).perform()
sleep(3)

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

（三）對鍵盤的操作

1、鍵盤事件介紹

我們在實際的測試工作中，有時候我們在測試時需要使用tab鍵將焦點轉移到下一個元素，用於驗證元素的排序是否正確。

webdriver的Keys()類提供鍵盤上所有按鍵的操作，甚至可以模擬一些組合建的操作，如Ctrl+A，Ctrl+C，Ctrl+V 等。

在Selenium中使用send_keys()來執行模擬鍵盤上所有按鍵的操作。

2、使用Keys類來處理鍵盤操作

Keys類鍵盤事件 作用說明
send_keys(Keys.BACK_SPACE) 刪除鍵（Backspace）
send_keys(Keys.SPACE) 空格鍵（Space）
send_keys(Keys.TAB) Tab鍵
send_keys(Keys.ESCAPE) 回退鍵（Esc）
send_keys(Keys.ENTER) Enter鍵（Enter）
send_keys(Keys.CONTROL,'a') 全選（Ctrl+A）
send_keys(Keys.CONTROL,'c') 複製（Ctrl+C）
send_keys(Keys.CONTROL,'x') 剪下（Ctrl+X）
send_keys(Keys.CONTROL,'v') 貼上（Ctrl+V）
send_keys(Keys.F1) 鍵盤F1
send_keys(Keys.F12) 鍵盤F12

3、鍵盤事件練習

頁面程式碼片段：

<!DOCTYPE html>
<html lang="zh-cn">
<body>
<div id="zc">
    <legend>註冊使用者A</legend>
    <p id="p1">
        <label for="userA">賬號A</label>
        <input type="textA" name="userA" id="userA" class="c_uA" placeholder="賬號A" required="" value="">
    </p>
    <p>
        <label for="password">密碼A</label>
        <input type="password" name="passwordA" id="passwordA" placeholder="密碼A" value="">
    </p>
</div>
</body>
</html>

指令碼程式碼：

"""
1.學習目標:
    掌握selenium中鍵盤事件的操作
2.語法
    2.1 匯入Keys類
    from selenium.webdriver.common.keys import Keys
    2.2 使用
    元素.send_keys(鍵名稱)
        1.單個鍵使用
            (Keys.鍵名稱)
            注意：鍵名稱全大寫字母
        2.組合鍵
            (Keys.鍵名稱,"c")

3.需求
    在頁面中,完成文字內容的複製操作。
"""
# 1.匯入selenium
from selenium import webdriver
from time import sleep
import os
from selenium.webdriver.common.keys import Keys

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

# 3.開啟頁面
url = "file:///" + os.path.abspath("./1.html")
driver.get(url)

# 4.鍵盤事件
# 在賬號A中輸入"Selenium",將輸入的內容複製到密碼A輸入框中
# 4.1 定位賬號A和電話A
textA = driver.find_element_by_id("userA")  # 賬號A
passwordA = driver.find_element_by_id("passwordA")  # 密碼A

# 4.2 在賬號A中輸入"Selenium"
textA.clear()
textA.send_keys("Seleniumm")
sleep(2)

# 4.3 使用退格鍵刪除m字母
textA.send_keys(Keys.BACKSPACE)
sleep(2)

# 4.4 將賬號A中的文字複製
# 全選賬號A中的文字
textA.send_keys(Keys.CONTROL, "a")
# 複製賬號A中的文字
textA.send_keys(Keys.CONTROL, "c")

# 4.5 將複製的內容貼上到密碼A輸入框中
passwordA.send_keys(Keys.CONTROL, "v")

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

相關文章