元素定位综合练习

进阶：JS 高级操作（滚动条拖动 + HTML5 视频）

本模块练习 Selenium 中 execute_script() 的两个高级用法：①通过 JS 直接操作滚动条（纵向/横向）②通过 JS 控制 HTML5 视频的播放、暂停、跳转、音量等属性。

练习目标 1：通过 JS 操作垂直滚动条

下方是一个 6 行 × 6 列的网格滚动容器，具有纵向滚动条（右侧）。Selenium 中 无法直接通过 WebDriver API 拖动页面原生滚动条，可通过 driver.execute_script() 操作 DOM 属性 scrollTop 或方法 scrollTo({top:n})、scrollIntoView() 实现垂直滚动、滚动到指定单元格（基于 offsetTop 计算居中位置）等操作。

📜 滚动状态纵向scrollTop: 0

1-1

1-2

1-3

1-4

1-5

1-6

2-1

2-2

2-3

2-4

2-5

2-6

3-1

3-2

3-3

3-4

3-5

3-6

4-1

4-2

4-3

4-4

4-5

4-6

5-1

5-2

5-3

5-4

5-5

5-6

6-1

6-2

6-3

6-4

6-5

6-6

练习目标 2：通过 JS 操作水平滚动条

下方是一个课程章节卡片横向滚动容器（10 个章节卡片横向排列），具有水平滚动条（底部）。Selenium 中 无法直接通过 WebDriver API 拖动页面原生滚动条，可通过 driver.execute_script() 操作 DOM 属性 scrollLeft 或方法 scrollTo({left:n}) 、scrollIntoView()实现横向滚动、滚动到指定章节卡片（基于 offsetLeft 计算居中位置）等操作。

滚动状态横向 scrollLeft: 0

第 1 章开场介绍

第 2 章基础语法

第 3 章数据类型

第 4 章控制流程

第 5 章函数定义

第 6 章数组操作

第 7 章DOM 操作

第 8 章事件处理

第 9 章异步编程

第 10 章项目实战

练习目标 3：操作双向滚动容器

下方是一个 12 行 × 16 列的商品列表容器，同时具有纵向滚动条（右侧）和横向滚动条（底部）。Selenium 中可通过 driver.execute_script() 同时操作 scrollTop 与 scrollLeft，实现双向滚动、滚动到指定列（如「产地」列）、滚动到指定行（如 P007「机械手表」）、滚动到角落等操作。

商品列表纵向scrollTop: 0 / 横向scrollLeft: 0

商品ID	商品名称	分类	价格	库存	评分	销量	上架时间	产地	标签	库存单位	供应商	保质期	促销	折扣率	操作
P001	机械键盘	外设	¥899	1,234	4.8	5,678	2024-01-15	深圳	热卖	个	键鼠科技	长期	满减	8.5折	编辑 / 删除
P002	无线鼠标	外设	¥299	8,901	4.6	12,345	2024-02-20	东莞	新品	个	精准科技	长期	第二件半价	9折	编辑 / 删除
P003	4K显示器	显示	¥3,499	567	4.9	2,345	2024-03-10	苏州	推荐	台	显示科技	3年	无	-	编辑 / 删除
P004	游戏耳机	音频	¥799	3,456	4.7	8,901	2024-03-25	广州	热卖	个	音频科技	长期	满1000减200	8折	编辑 / 删除
P005	电竞椅	家具	¥2,499	1,234	4.5	4,567	2024-04-05	佛山	-	把	办公家具	长期	无	-	编辑 / 删除
P006	智能手环	穿戴	¥299	15,678	4.4	23,456	2024-04-18	北京	热卖	个	穿戴科技	1年	99秒杀	6.5折	编辑 / 删除
P007	机械手表	穿戴	¥3,999	234	4.9	567	2024-05-01	上海	限量	只	精工科技	5年	无	-	编辑 / 删除
P008	蓝牙音箱	音频	¥599	5,678	4.5	9,012	2024-05-15	深圳	新品	个	音频科技	长期	买二送一	7.5折	编辑 / 删除
P009	摄像头	外设	¥499	4,321	4.3	6,789	2024-06-01	杭州	-	个	视觉科技	长期	无	-	编辑 / 删除
P010	打印机	办公	¥1,299	890	4.2	1,234	2024-06-20	南京	推荐	台	办公科技	2年	无	-	编辑 / 删除
P011	扫描仪	办公	¥799	1,567	4.4	2,345	2024-07-05	成都	-	台	办公科技	2年	无	-	编辑 / 删除
P012	投影仪	显示	¥4,999	345	4.8	789	2024-07-22	武汉	热卖	台	显示科技	3年	满5000减800	8.2折	编辑 / 删除

练习目标 4：操作 HTML5 视频

下方是一个 HTML5 视频播放器（5 秒 flower 视频，支持 play/pause/跳转/变速/静音等操作）。Selenium 中可通过 driver.execute_script("return arguments[0].play()", video_el) 等方式直接控制视频 DOM 元素。练习目标：播放 / 暂停 / 跳转进度（后退 3s、前进 5s）/ 调整音量（静音切换）/ 变速播放（1.5x / 1.0x）。

00:00 / 00:05

🔊

定位后操作效果展示区域

本区域用于展示：通过 execute_script() 操作滚动条 / HTML5 视频后，返回的执行结果与属性状态变化。

当前尚无操作记录

请尝试：① 点击「滚动到顶/底/居中/左/右」 ② 点击视频播放/暂停/跳转/变速 ③ 点击章节卡片或水平滚动按钮。

元素定位综合练习平台