鼠标操作综合练习

练习 1 · 左击 click()

📋 练习要求 · 左击 click()

概念单击是 Selenium 中最常用的操作，点击按钮、链接、复选框都用 click()

Selenium APIelement.click() 或 ActionChains(driver).click(el).perform()

练习要点

ActionChains 适用于需要组合多步操作的场景（如移动后点击）
WebElement.click() 单步操作更简洁，推荐优先使用
点击前确保元素可交互（可见、可点击、未被遮挡）

# 快速参考
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains
btn = driver.find_element(By.ID, "p1_btn")
btn.click()                          # 方式 A（推荐）
ActionChains(driver).click(btn).perform() # 方式 B

📋 本节练习清单

✅ 练习目标：定位 p1_btn 按钮 → 单击 → 断言 p1_result 包含「单击事件触发」

1 练习目标：定位按钮并单击，断言状态变化

操作步骤：
① 用 driver.find_element(By.ID, "p1_btn") 定位「单击我」按钮；
② 调用 btn.click() 或 ActionChains(driver).click(btn).perform() 执行单击；
③ 用 driver.find_element(By.ID, "p1_result").text 断言结果包含「单击事件触发」。

单击交互演示区

等待单击操作...

已点击 0 次

💬 操作日志（点击实时记录）
// 暂无操作记录...

💡 提示：在 Selenium 中通过 btn.click() 触发单击，或用 ActionChains(driver).click(btn).perform()，然后用 btn.is_enabled() 检查按钮可点击状态。

查看参考答案（Python Selenium）

# 练习 1 参考答案 · 左击
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains

driver.get("https://autotest-505.pages.dev/mouse_op_practice.html")
btn = driver.find_element(By.ID, "p1_btn")
actions = ActionChains(driver)

# 方式 A：ActionChains.click()
actions.click(btn).perform()

# 方式 B：WebElement.click()（更常用）
btn.click()

result = driver.find_element(By.ID, "p1_result").text
assert "单击事件触发" in result

练习 2 · 右击 context_click()

📋 练习要求 · 右击 context_click()

概念右击（右键菜单）用于触发自定义菜单、浏览器原生菜单或下拉操作

Selenium APIActionChains(driver).context_click(el).perform()

练习要点

context_click 是 ActionChains 专有方法，无 WebElement 原生右键
需要组合 perform() 才会真正执行
自定义右键菜单通常通过 contextmenu 事件弹出

# 快速参考
from selenium.webdriver.common.action_chains import ActionChains
btn = driver.find_element(By.ID, "p2_btn")
ActionChains(driver).context_click(btn).perform()

📋 本节练习清单

✅ 练习目标：定位按钮 → context_click → 断言自定义菜单可见

2 练习目标：右击触发自定义菜单，验证菜单弹出

操作步骤：
① 用 driver.find_element(By.ID, "p2_btn") 定位「在此处右击」按钮；
② 调用 ActionChains(driver).context_click(btn).perform() 执行右击；
③ 断言 p2_menu 菜单元素可见，或 p2_result 包含「右键菜单已弹出」。

右击交互演示区

等待右击操作...

已触发 0 次

💬 操作日志（右键实时记录）
// 请在左侧按钮上点击鼠标右键

💡 提示：Selenium 中通过 ActionChains(driver).context_click(btn).perform() 触发右击，contextmenu 事件会被 JS 拦截并弹出自定义菜单。

查看参考答案（Python Selenium）

# 练习 2 参考答案 · 右击
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains

driver.get("https://autotest-505.pages.dev/mouse_op_practice.html")
btn = driver.find_element(By.ID, "p2_btn")
actions = ActionChains(driver)

# 在元素上右击
actions.context_click(btn).perform()

# 断言菜单可见
menu = driver.find_element(By.ID, "p2_menu")
assert menu.is_displayed()

练习 3 · 双击 double_click()

📋 练习要求 · 双击 double_click()

概念双击是快速连续两次点击，常用于开关切换、文件打开、行展开等场景

Selenium APIActionChains(driver).double_click(el).perform()

练习要点

双击是 ActionChains 专有方法，无 WebElement 原生 double_click
双击事件间隔由浏览器决定，通常 300-500ms
若 double_click 不生效，可改用 click + sleep + click 模拟

# 快速参考
from selenium.webdriver.common.action_chains import ActionChains
import time
bulb = driver.find_element(By.ID, "p3_bulb")
ActionChains(driver).double_click(bulb).perform()
time.sleep(0.3)

📋 本节练习清单

✅ 练习目标：定位灯泡 → double_click → 断言灯泡点亮

3 练习目标：双击切换灯泡状态，验证点亮效果

操作步骤：
① 用 driver.find_element(By.ID, "p3_bulb") 定位灯泡图标；
② 调用 ActionChains(driver).double_click(bulb).perform() 执行双击；
③ 等待 0.3 秒，断言 p3_result 包含「已点亮」或「已熄灭」。

双击交互演示区

💡

👆 快速连续点击两次

等待双击操作...

当前状态：熄灭已双击 0 次

💬 操作日志（双击实时记录）
// 请双击左侧灯泡

💡 提示：浏览器原生 dblclick 事件等于两次间隔 300-500ms 的 click，Selenium 用 ActionChains(driver).double_click(el).perform() 一次完成。

查看参考答案（Python Selenium）

# 练习 3 参考答案 · 双击
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains
import time

driver.get("https://autotest-505.pages.dev/mouse_op_practice.html")
bulb = driver.find_element(By.ID, "p3_bulb")
actions = ActionChains(driver)

# 双击切换状态
actions.double_click(bulb).perform()
time.sleep(0.3)

result = driver.find_element(By.ID, "p3_result").text
assert "已点亮" in result

练习 4 · 移动 move_to_element()

📋 练习要求 · 移动 move_to_element()

概念悬停（hover / mouseover）通过将鼠标移到元素上触发子菜单或提示框

Selenium APIActionChains(driver).move_to_element(el).perform()

练习要点

move_to_element 将鼠标移动到元素中心并悬停
常用于多级菜单、Tooltip 提示、下拉菜单展开
某些框架悬停后菜单会自动消失，后续 click 要快

# 快速参考
from selenium.webdriver.common.action_chains import ActionChains
trigger = driver.find_element(By.ID, "p4_trigger")
ActionChains(driver).move_to_element(trigger).perform()
submenu = driver.find_element(By.ID, "p4_submenu")
assert submenu.is_displayed()

📋 本节练习清单

✅ 练习目标：定位触发按钮 → move_to_element → 断言子菜单可见

4 练习目标：悬停触发子菜单，验证菜单显示

操作步骤：
① 用 driver.find_element(By.ID, "p4_trigger") 定位「悬停我」按钮；
② 调用 ActionChains(driver).move_to_element(trigger).perform() 悬停；
③ 断言 p4_submenu 子菜单元素可见。

悬停交互演示区

等待悬停操作...

子菜单状态：隐藏已悬停 0 次

💬 操作日志（悬停实时记录）
// 请将鼠标移到左侧按钮上

💡 提示：move_to_element() 对应 DOM 的 mouseenter，常用于触发 CSS :hover 菜单或 tooltip，离开后 mouseleave 会关闭子菜单。

查看参考答案（Python Selenium）

# 练习 4 参考答案 · 移动
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains

driver.get("https://autotest-505.pages.dev/mouse_op_practice.html")
trigger = driver.find_element(By.ID, "p4_trigger")
actions = ActionChains(driver)

# 把鼠标移到元素上（悬停）
actions.move_to_element(trigger).perform()

# 断言子菜单可见
submenu = driver.find_element(By.ID, "p4_submenu")
assert submenu.is_displayed()

练习 5 · 按住 click_and_hold()

📋 练习要求 · 按住 click_and_hold()

概念按住不松是按下鼠标按钮但不释放，常用于拖拽、滑块拖动、长按触发

Selenium APIActionChains(driver).click_and_hold(el).perform()

练习要点

click_and_hold 只按下，不会自动释放（直到调用 release 或 perform 结束）
按住后可以组合 move_by_offset / move_to_element 实现拖拽
若不释放，后续操作可能受影响（鼠标一直处于按下状态）

# 快速参考
from selenium.webdriver.common.action_chains import ActionChains
import time
btn = driver.find_element(By.ID, "p5_btn")
# 按住不放（不 release）
ActionChains(driver).click_and_hold(btn).perform()
time.sleep(1)  # 观察加载效果

📋 本节练习清单

✅ 练习目标：按住按钮不放 → 等待 → 断言按钮显示「加载中」

5 练习目标：按住按钮触发加载状态，验证持续按住效果

操作步骤：
① 用 driver.find_element(By.ID, "p5_btn") 定位「按住不放」按钮；
② 调用 ActionChains(driver).click_and_hold(btn).perform() 按住；
③ 等待 1 秒，断言按钮文字包含「加载中」或 p5_result 包含「按住」。

按住交互演示区

👆 按下鼠标左键不放，抬起立即释放

等待按住操作...

按住时长：— 已操作 0 次

💬 操作日志（按住实时记录）
// 请按住左侧按钮不放...

💡 提示：click_and_hold() 按住后不会自动释放，必须显式调用 release()，常用于拖拽的第一阶段。

查看参考答案（Python Selenium）

# 练习 5 参考答案 · 按住
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains
import time

driver.get("https://autotest-505.pages.dev/mouse_op_practice.html")
btn = driver.find_element(By.ID, "p5_btn")
actions = ActionChains(driver)

# 按住不放（不释放）
actions.click_and_hold(btn).perform()
time.sleep(1)  # 保持按住 1 秒观察状态

assert "加载中" in btn.text

练习 6 · 释放 release()

📋 练习要求 · 释放 release()

概念释放是鼠标操作链的最后一步，完成"按住 → 移动 → 释放"完整拖拽流程

Selenium APIActionChains(driver).release().perform() 或分步组合

练习要点

release() 释放鼠标左键（不需要传元素参数）
典型用途：先 click_and_hold → move_to_element → release 完成拖拽
比直接用 drag_and_drop 更灵活，可自定义中间路径

# 快速参考
from selenium.webdriver.common.action_chains import ActionChains
src  = driver.find_element(By.ID, "p6_source")
tgt  = driver.find_element(By.ID, "p6_target")
ActionChains(driver) \
    .click_and_hold(src) \
    .move_to_element(tgt) \
    .release() \
    .perform()

📋 本节练习清单

✅ 练习目标：分步组合 click_and_hold → move_to_element → release 完成拖放

6 练习目标：按住 → 移动 → 释放，完成分步拖放

操作步骤：
① 定位 p6_source（源）和 p6_target（目标）两个区域；
② 用 click_and_hold(source).move_to_element(target).release().perform() 组合执行；
③ 断言 p6_target 显示「已接收」或 p6_result 包含「释放完成」。

释放交互演示区（真实拖动）

👆 按住紫色盒子，拖到右侧虚线目标区，松开完成

源

🎯 目标区

等待拖动...

💬 操作日志（拖动实时记录）
// 按住紫色盒子开始拖动...

💡 提示：前端拖动 = mousedown→mousemove→mouseup，对应 Selenium 的 click_and_hold().move_to_element().release()。

查看参考答案（Python Selenium）

# 练习 6 参考答案 · 释放（分步组合）
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains

driver.get("https://autotest-505.pages.dev/mouse_op_practice.html")
source = driver.find_element(By.ID, "p6_source")
target = driver.find_element(By.ID, "p6_target")
actions = ActionChains(driver)

# 分步：按住 → 移动 → 释放
actions.click_and_hold(source) \
       .move_to_element(target) \
       .release() \
       .perform()

assert "已接收" in target.text

练习 7 · 拖拽 drag_and_drop()

📋 练习要求 · 拖拽 drag_and_drop()

概念拖放是按住源元素后移动到目标位置再释放，Selenium 提供了一步式 API

Selenium APIActionChains(driver).drag_and_drop(source, target).perform()

练习要点

drag_and_drop 是 click_and_hold + move_to_element + release 的封装
适用于简单直线拖拽，复杂路径用分步组合
拖拽对目标元素位置敏感，确保目标在可视区域内

# 快速参考
from selenium.webdriver.common.action_chains import ActionChains
card  = driver.find_element(By.ID, "p7_card1")
tgt   = driver.find_element(By.ID, "p7_target")
ActionChains(driver).drag_and_drop(card, tgt).perform()

📋 本节练习清单

✅ 练习目标：将 3 张卡片依次拖到目标区，断言全部接收

7 练习目标：拖拽卡片到目标区，验证拖放结果

操作步骤：
① 定位卡片 p7_card1/2/3 和目标区 p7_target；
② 循环调用 ActionChains(driver).drag_and_drop(card, target).perform()；
③ 断言 p7_result 包含「全部 3 张」或目标区显示所有卡片。

拖拽交互演示区（真实拖动）

👆 按住卡片拖到右侧目标区，每张都可以独立拖入

📦 源区

卡片 A

卡片 B

卡片 C

🎯 目标区

等待拖入

等待拖放操作...

💬 操作日志（拖放实时记录）
// 按住任意卡片开始拖动...

💡 提示：前端卡片拖动需要自己实现 mousedown→mousemove→mouseup；Selenium 用 drag_and_drop(source, target) 一行搞定。

查看参考答案（Python Selenium）

# 练习 7 参考答案 · 拖拽
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains
import time

driver.get("https://autotest-505.pages.dev/mouse_op_practice.html")
target = driver.find_element(By.ID, "p7_target")
actions = ActionChains(driver)

card_ids = ["p7_card1", "p7_card2", "p7_card3"]
for cid in card_ids:
    card = driver.find_element(By.ID, cid)
    actions.drag_and_drop(card, target).perform()
    time.sleep(0.3)

# 断言
assert "3" in driver.find_element(By.ID, "p7_result").text

练习 8 · 滚动 scroll()

📋 练习要求 · 滚动 scroll()

概念滚动将元素滚到可视区域内，Selenium 4.2+ 提供原生 ActionChains 滚动 API

Selenium APIActionChains(driver).scroll_to_element(el).perform() 或 JS 注入

练习要点

scroll_to_element 自动将元素滚到视口顶部对齐
旧版本 Selenium 用 driver.execute_script("el.scrollIntoView()") 作为 fallback 方案
滚动后用 element.is_displayed() 确认元素可见

# 快速参考
from selenium.webdriver.common.action_chains import ActionChains
target = driver.find_element(By.ID, "p8_target")
# 方式 A：Selenium 4.2+ 原生
ActionChains(driver).scroll_to_element(target).perform()
# 方式 B：兼容所有版本
driver.execute_script("arguments[0].scrollIntoView()", target)

📋 本节练习清单

✅ 练习目标：滚到 p8_target 元素可见，断言结果区更新

8 练习目标：滚到列表内目标元素，验证可见

操作步骤：
① 定位长列表内的目标元素 p8_target；
② 调用 ActionChains(driver).scroll_to_element(target).perform() 滚动，或用 execute_script("el.scrollIntoView()")；
③ 断言 p8_result 包含「滚到目标」或 target.is_displayed() 为 True。

滚动交互演示区

📜 长列表（共 15 条，目标隐藏在中间）

条目 1

条目 2

条目 3

条目 4

条目 5

条目 6

条目 7

🎯 目标元素

条目 9

条目 10

条目 11

条目 12

条目 13

条目 14

条目 15

等待滚动操作...

💬 操作日志（滚动实时记录）
// 点击左侧「滚到目标」按钮...

💡 提示：scroll_to_element(target) 让目标元素滚动到视口“底部可见”位置；scroll_by_amount(dx, dy) 则按指定偏移滚动。

查看参考答案（Python Selenium）

# 练习 8 参考答案 · 滚动
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains
import time

driver.get("https://autotest-505.pages.dev/mouse_op_practice.html")
target = driver.find_element(By.ID, "p8_target")
actions = ActionChains(driver)

# 方式 A：Selenium 4.2+ 原生 API
actions.scroll_to_element(target).perform()

# 方式 B：JS 注入（所有版本通用）
driver.execute_script("arguments[0].scrollIntoView()", target)

assert "滚到目标" in driver.find_element(By.ID, "p8_result").text

鼠标操作练习

练习说明

练习 1 · 左击 click()

练习 2 · 右击 context_click()

练习 3 · 双击 double_click()

练习 4 · 移动 move_to_element()

练习 5 · 按住 click_and_hold()

练习 6 · 释放 release()

练习 7 · 拖拽 drag_and_drop()

练习 8 · 滚动 scroll()

练习说明

练习 1 · 左击 click()

练习 2 · 右击 context_click()

练习 3 · 双击 double_click()

练习 4 · 移动 move_to_element()

练习 5 · 按住 click_and_hold()

练习 6 · 释放 release()

练习 7 · 拖拽 drag_and_drop()

练习 8 · 滚动 scroll()

关于我们

联系方式

免责声明