鼠标操作练习

练习 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

鼠标操作练习 · 拖拽

练习 · 拖拽 drag_and_drop()

练习 7 · 拖拽 drag_and_drop()

练习 · 拖拽 drag_and_drop()

练习 7 · 拖拽 drag_and_drop()

关于我们

联系方式

免责声明