鼠标操作综合作业

生产场景实战 — 左击 · 右击 · 双击 · 移动 · 按住 · 释放 · 拖拽 · 滚动

首页 环境搭建 元素定位 元素操作 测试工具 单元测试 测试模型

作业概览 · 生产真实场景

本页面的 8 道作业题均取材于真实生产环境常见的测试场景（电商后台 / 管理系统 / 看板协作 / 交互组件）。每个场景都提供了可视化的前端 demo，你需要用 Selenium ActionChains API 完成对应的自动化操作。

左击（电商加购）
商品卡点击加入购物车
右击（后台表格）
触发用户管理表格右键菜单
双击（行内编辑）
工资表单元格 double_click 编辑
移动（多级导航）
move_to_element 展开子菜单
按住（价格滑块）
click_and_hold 拖动价格区间
释放（签名板）
按住 → 移动 → 释放 手绘签名
拖拽（Kanban 看板）
drag_and_drop 任务卡跨列流转
滚动（Feed 信息流）
scroll_to_element 触发加载更多
左击 右击 双击 移动 按住 释放 拖拽 滚动

作业 1 · 左击 click() — 电商批量加购

📋 电商商品卡片 → 加入购物车
生产场景电商网站商品列表（京东 / 淘宝 / 拼多多），需要点击每个商品卡的「加入购物车」按钮完成批量加购，常用于回归测试中的购物车功能验证
Selenium APIelement.click() 循环点击 或 ActionChains(driver).click(el).perform()
作业要点
  • 商品卡按钮有 防重复点击防抖（点击后 800ms 内不可再次点击）—— 自动化脚本中应先判断按钮是否可点击
  • 点击后按钮文字变为 ✅ 已加购，并更新右上角购物车徽标计数
  • 要求：依次点击全部 6 张商品卡的加购按钮，验证购物车徽标最终数字为 6
📋 本节作业清单
  • 1. 定位元素：全部商品卡加购按钮 CLASS_NAME="h6_add_btn"（预期 6 个）
  • 2. 逐个点击：循环 click 每个按钮，需等待防抖结束（约 0.8s）再点下一个
  • 3. 验证角标：#h6_cart_badge 的 data-count 属性最终值 == "6"
  • 4. 验证按钮状态：最后一个按钮 textContent 包含 "已加购"
🛒 我的购物车 （点击商品卡按钮批量加购）
iPhone 15 Pro 256GB 钛原色
¥7999¥8999
MacBook Air M3 13 英寸
¥8499¥9499
AirPods Pro 2 代
¥1499¥1899
Apple Watch Series 9
¥2999¥3299
iPad Air 11 英寸 M2
¥3999¥4599
Sony A7M4 全画幅微单
¥16999¥18999
[系统] 电商商品列表加载完成，共 6 件商品
[系统] 作业目标：依次点击 6 张商品卡的「加入购物车」按钮

作业 2 · 右击 context_click() — 后台用户管理表格

📋 右键表格行 → 弹出操作菜单
生产场景后台管理系统（用户管理 / 订单管理 / 商品管理）中，右键表格行弹出快捷菜单，包含编辑、删除、复制、导出等操作
Selenium APIActionChains(driver).context_click(row_el).perform()
作业要点
  • 先对表格行执行 context_click，页面会弹出一个绝对定位的自定义右键菜单
  • 右键菜单项有 4 个：复制用户 / 编辑 / 禁用 / 删除
  • 要求：对 id=5 的"王五"行执行右键 → 点击"禁用"菜单项 → 验证该行状态变为"已禁用"
📋 本节作业清单
  • 1. 定位目标行：By.ID("h6_target_row")（第 5 行"王五"）
  • 2. 执行右击：ActionChains.context_click(row).perform()
  • 3. 点击菜单项：在弹出菜单中点击「禁用」
  • 4. 断言结果：该行状态 span 文本变为 "已禁用" 且 class 包含 "off"
ID用户名邮箱部门状态注册时间
1张三zhangsan@demo.com研发部在线2024-03-15
2李四lisi@demo.com产品部在线2024-04-20
3赵六zhaoliu@demo.com运营部待审核2024-05-10
4钱七qianqi@demo.com市场部在线2024-06-01
5王五wangwu@demo.com财务部在线2024-06-18
6孙八sunba@demo.com人事部在线2024-07-05
[系统] 用户管理表格加载完成，共 6 条数据
[系统] 作业目标：对第 5 行(王五) 执行 context_click → 点击「禁用」

作业 3 · 双击 double_click() — 表格单元格行内编辑

📋 双击单元格 → 进入 inline edit 模式
生产场景ERP / 财务系统中，双击表格单元格直接进入编辑模式（类似 Excel），修改后 Enter 保存 / Esc 取消
Selenium APIActionChains(driver).double_click(cell_el).perform()
作业要点
  • 双击某单元格后，该单元格会变成一个 <input> 输入框，value 为原值
  • 要求：对第 3 行（id=3）的「实发工资」单元格双击 → 输入 9999 → 按 Enter 保存
  • 保存后，单元格恢复为普通文本显示，内容已变为 9999
📋 本节作业清单
  • 1. 定位单元格：By.ID("h6_salary_cell")（赵六 · 实发工资）
  • 2. 执行双击：ActionChains.double_click(cell).perform()
  • 3. 输入新值：cell 内 input 输入 "9999" 后 send_keys(Keys.ENTER)
  • 4. 断言保存：单元格 text == "9999" 且内部不再包含 input
ID姓名部门基本工资绩效奖金实发工资备注
1张三研发部15000300018000正常
2李四产品部12000250014500正常
3赵六运营部10000200012000正常
4钱七市场部11000180012800正常
5王五财务部13000220015200正常
💡 操作提示：双击任意单元格进入编辑模式，Enter 保存 / Esc 取消
[系统] 工资表加载完成
[系统] 作业目标：double_click 实发工资单元格 → 改为 9999 → Enter 保存

作业 4 · 移动 move_to_element() — 电商多级分类导航

📋 hover 顶级分类 → 展开子菜单 → 点击子项
生产场景京东 / 淘宝顶部的多级导航菜单：鼠标移到顶级分类上，自动展开子分类；子分类项通常也是可点击的链接
Selenium APIActionChains(driver).move_to_element(trigger).perform() → 展开子菜单后再 click 子项
作业要点
  • 顶级菜单 hover 后，浏览器 CSS 的 :hover 会让子菜单显示（display:block）
  • 要求：依次 hover 顶级菜单 → 点击「手机通讯」子菜单下的「智能手机」
  • Selenium 中 move_to_element 后要给子菜单一点渲染时间（sleep 或显式等待）
📋 本节作业清单
  • 1. 定位顶级菜单：#h6_mega_nav > ul > li 中包含 "手机通讯" 的 li
  • 2. 执行 hover：ActionChains.move_to_element(top_li).perform()，time.sleep(0.3)
  • 3. 点击子项：该 li 内文本为 "智能手机" 的子菜单项 click
  • 4. 断言结果：#h6_p4_result 存在且 text 包含 "智能手机"
[系统] 电商顶部导航加载完成，共 5 个顶级分类
[系统] 作业目标：hover「手机通讯」→ 点击子项「智能手机」

作业 5 · 按住 click_and_hold() — 电商价格筛选滑块

📋 按住滑块 → 拖动到目标价格区间
生产场景京东 / 淘宝 / 美团 的筛选面板：价格区间滑块（min / max 双滑块），需要拖动到指定的价格范围
Selenium APIActionChains(driver).click_and_hold(thumb).move_by_offset(dx,0).release().perform()
作业要点
  • 这里只做右滑块（最高价格）的拖动，范围 0 ~ 10000
  • 要求：把右滑块拖到目标位置 ¥6000（误差 ±500 即算通过）
  • Selenium 中 click_and_hold → move_by_offset → release 必须在同一条 ActionChains 链上
📋 本节作业清单
  • 1. 定位滑块：By.ID("h6_price_thumb") + 轨道 #h6_price_track
  • 2. 计算偏移：目标 ¥6000 → 轨道 60%，dx = int(track_w * 0.60)
  • 3. 链式操作：click_and_hold(thumb).move_by_offset(dx-16,0).release().perform()
  • 4. 断言结果：#h6_price_val text 在 5500 ~ 6500 范围内

产品筛选 · 价格上限 🎯 目标：¥6000

¥0¥2500¥5000¥7500¥10000
¥0 / 上限
[系统] 价格筛选滑块加载完成，范围 ¥0 ~ ¥10000
[系统] 作业目标：click_and_hold → 拖到 ¥6000

作业 6 · 释放 release() — 签名板手绘

📋 在签名板上按住 → 移动 → 释放 完成手写签名
生产场景金融 / 物流 / 医疗行业的电子签名：需要在签名板上手写确认，Selenium 通过 ActionChains 组合 click_and_hold + move_by_offset + release 模拟手绘轨迹
Selenium APIActionChains(driver).click_and_hold(origin).move_by_offset(x1,y1).move_by_offset(x2,y2)...release().perform()
作业要点
  • 这是 click_and_hold + 多次 move + release 的经典链式应用场景
  • 签名板内部是一个 Canvas，鼠标按下后开始绘制轨迹，释放后结束
  • 要求：在签名板上按住鼠标 → 任意画一条曲线 → 释放 → 验证签名非空
📋 本节作业清单
  • 1. 定位签名板：By.ID("h6_sign_canvas")
  • 2. 链式绘制：click_and_hold → 多步 move_by_offset(-80,30 / 20,-20 / 40,40) → release().perform()
  • 3. 等待更新：time.sleep(0.4) 让 canvas 状态落盘
  • 4. 断言非空：JS 遍历 getImageData，存在 alpha 通道非零像素
✍️ 在此区域按住鼠标并拖动以签名
[系统] 签名板 Canvas 初始化完成
[系统] 作业目标：按住 → 移动 → 释放 完成签名

作业 7 · 拖拽 drag_and_drop() — Kanban 看板任务卡跨列流转

📋 拖拽任务卡从「待办」→「进行中」→「已完成」
生产场景Jira / Trello / 钉钉项目等看板协作工具，通过拖拽任务卡片实现任务状态流转
Selenium APIActionChains(driver).drag_and_drop(source_card, target_col).perform()
作业要点
  • 看板有 3 列：待办 (todo) / 进行中 (doing) / 已完成 (done)
  • 要求：把「修复登录 Bug」任务卡从 待办 → 拖拽到 进行中 → 再拖拽到 已完成
  • 拖拽时页面会生成 ghost 跟随鼠标，释放时自动 appendChild 到目标列
📋 本节作业清单
  • 1. 定位三列：.kanban-col.todo / .kanban-col.doing / .kanban-col.done
  • 2. 定位卡片：todo 列内文本包含 "登录页面 Bug" 的 .kanban-card
  • 3. 第一次拖拽：ActionChains.drag_and_drop(card, doing_col).perform()
  • 4. 第二次拖拽：重新定位（DOM 已搬家）→ drag_and_drop(card, done_col).perform()
  • 5. 断言结果：done 列包含该卡片，todo/doing 列不再有
📋 待办 4
修复登录页面 Bug
🔴 高优先级研发部
优化商品列表加载速度
🟡 中优先级研发部
撰写接口文档
🟢 低优先级产品部
编写单元测试用例
🟡 中优先级QA
🚧 进行中 1
重构购物车模块
🔴 高优先级研发部
✅ 已完成 2
搭建 CI/CD 流水线
🟢 低优先级运维部
部署生产环境
🟡 中优先级运维部
[系统] Kanban 看板加载完成（待办 4 / 进行中 1 / 已完成 2）
[系统] 作业目标：把「修复登录页面 Bug」从 待办 → 进行中 → 已完成

作业 8 · 滚动 scroll_to_element() — 信息流无限滚动

📋 滚动 Feed 容器到目标动态 → 触发加载更多
生产场景微信朋友圈 / 微博 / 抖音信息流：滚动到底部自动加载更多内容
Selenium APIActionChains(driver).scroll_to_element(target_last_item).perform() 或 driver.execute_script("el.scrollTop = el.scrollHeight")
作业要点
  • Feed 容器高度 320px，内容溢出需要滚动；滚到距底部 80px 时触发「加载更多」
  • 要求：连续滚动 3 次，让 Feed 从初始 5 条动态加载到 11 条以上
  • 注意：scroll_to_element 滚的是整个页面，而这个 demo 里滚的是内部容器 —— 生产中需要先滚到容器，再用 JS 滚内部 scrollTop
📋 本节作业清单
  • 1. 定位 Feed 容器：By.ID("h6_feed")
  • 2. 首次滚动：execute_script("feed.scrollTop=feed.scrollHeight", feed) + sleep 1.2s
  • 3. 连续 3 次：重复 step 2 共 3 次
  • 4. 断言数量：By.CLASS_NAME, "feed-item" 数量 ≥ 11
  • 5. 附加断言：#h6_feed_end 此时 应该显示
张
张三
2 分钟前
今天天气真好，去公园散步了一下午 ☀️
李
李四
15 分钟前
刚读完《Selenium WebDriver 实战》，强烈推荐给自动化测试同行 📚
赵
赵六
30 分钟前
公司的自动化测试框架刚上线，覆盖率达到 85%！🎉
钱
钱七
1 小时前
分享一个 ActionChains 拖拽的坑：drag_and_drop 内部其实是 click_and_hold + move_to + release 的组合，复杂路径必须分步写。
王
王五
2 小时前
新接了一个项目，需要用 Selenium 做 ERP 系统的自动化测试，大家有什么好的框架推荐？
孙
孙八
3 小时前
今天帮同事排查了一个元素定位问题——iframe 没 switch！这种低级错误犯不得 😅
正在加载更多...
— 没有更多动态了 —
💡 提示：Feed 是内部滚动容器（高度固定），用 JS feed.scrollTop = feed.scrollHeight 模拟滚到底部
[系统] Feed 信息流加载完成，初始 5 条动态
[系统] 作业目标：滚到容器底部 3 次，触发加载到 ≥ 11 条

关于我们

Python 自动化测试学习平台是一个面向软件测试工程师、开发人员及在校学生的交互式在线学习平台，专注于 Selenium WebDriver 与 Python unittest 自动化测试技能的教学与实践。

我们以"理论 + 实战 + 可交互演示"为核心特色，将八种常规元素定位和Javascript定位、元素操作、自动化测试工具、单元测试、测试模型等知识体系拆分为模块化课程，每个模块都配有可点击、可输入、可运行的模拟练习页面。

平台致力于降低自动化测试的入门门槛，让学习者从"看懂代码"到"动手实操"，逐步掌握企业级自动化测试框架的设计与落地能力。

联系方式

📧邮箱：lq@selenium-auto-test.com

📞电话：0755-12345678

📍地址：深圳

💬微信公众号：Selenium自动化测试

🐙GitHub：github.com/selenium-auto-test

免责声明

1. 本平台所有示例代码、演示页面及教程内容均仅供学习交流使用，不构成任何商业推广或技术服务承诺。

2. 平台中的 Selenium API 描述、Python 语法说明均以官方文档为准，如有版本差异请以对应官方文档为准。

3. 学习者在实际项目中应用平台所学内容时，应结合自身项目环境进行充分测试，本平台不对因直接使用示例代码而产生的任何直接或间接损失承担责任。

4. 本平台所引用的第三方库（Selenium、ChromeDriver、unittest 等）版权归其各自作者及维护者所有。

5. 如涉及版权问题或内容建议，请及时通过联系方式与我们沟通，我们将第一时间处理。