基于python实现UI自动化3.3 Selenium - JS处理浏览器滚动条

Posted 2022-12-02 lht3347

python-UI自动化之selenium元素定位

• 1.0 selenium工具介绍
• 2.0 selenium环境搭建
• 3.0 selenium常见8大元素定位
• • 3.1 selenium通过By定位元素
  • 3.2 selenium通过JS定位元素
  • 3.3 JS处理浏览器滚动条
  • • 控制浏览器的高度
    • 控制横向滚动条
• 结尾

1.0 selenium工具介绍

1.0 selenium工具介绍

2.0 selenium环境搭建

2.0 selenium环境搭建

3.0 selenium常见8大元素定位

3.0 selenium - webdriver常见8大元素定位

3.1 selenium通过By定位元素

3.1 selenium通过By定位元素

3.2 selenium通过JS定位元素

3.2 selenium通过JS定位元素

3.3 JS处理浏览器滚动条

通过3.2 selenium通过JS定位元素的例子练习中，需要切换搜索内容的页数，但页数不在当前页面，需要滑动滚动条，故需要借助JS来进行处理操作。

控制浏览器的高度

页面滚动条在浏览器可见状态时，可通过JS中的scrollTop值来设置滚动条的位置与浏览器顶端的距离。

scrollTop值越大，越靠近滚动条底部；反之越靠近顶部。

以3.2 selenium通过JS定位元素的360搜索页面为例。

1. 滚动条往下滑到底部
   将滚动条拉到底部的代码，如下所示：

   # document.documentElement.scrollTop 获取当前页面所在的高度位置(Y轴位置)
   # 向下滑动，最低部的值设置大于等于页面的高度即可滑动到底部。
   js_scroll_down = 'document.documentElement.scrollTop=1000;'
   # 执行滑动的JS脚本
   driver.execute_script(js_scroll_down)
   

2. 滚动条拉到顶部
   将滚动条拉到顶部的代码，如下所示：

   # 向上滑动
   js_scroll_up = 'document.documentElement.scrollTop=0;'
   # 执行滑动的JS脚本
   driver.execute_script(js_scroll_up)
   

如果滑动一小部分呢？只需要将滑动的scrollTop值设置小点即可。代码如下图所示：

如果一个内嵌窗口的滚动条，可以用这种方法去定位吗？

答案显然是不可以的，由于是内嵌的，所以需要先定位到该内嵌的页面元素位置，才可通过scrollTop去设置滚动值。

JS定位元素的方法详情参考3.2 selenium通过JS定位元素文章借鉴学习。

滚动内嵌页面的滚动条以CSDN写文章为例，关键代码如下：

# 省略前面的打开浏览器、登录等
# JS定位可通过其它进行定位，这里使用class name进行定位
js_scroll_editor='document.documentElement.getElementsByClassName("editor")[0].scrollTop=1000;'
# 执行滑动的JS脚本
driver.execute_script(js_scroll_editor)

搞定后，脑瓜子一动，嘴角邪魅一笑，这是纵向滚动条的，那横向的怎么处理呢？

控制横向滚动条

有时浏览器页面需要左右滚动（一般浏览器页面最大化后就很少见了），不过这也不难，JS定位中提供了scrollTo(x,y)的方法来控制横向和纵向滚动条的坐标设置。

# 设置窗口大小：目的是为了看到搜索后的结果有横向滚动条
driver.set_window_size(1000,600)

# JS处理滚动条--控制滑动条的宽度（横向滚动条）
# scrollTo(x,y)  窗口移动的位置。X轴表示横向坐标的位置，Y轴表示高度位置
js_scroll_right = 'window.scrollTo(1000,0);'
driver.execute_script(js_scroll_right)
sleep(2)
js_scroll_left = 'window.scrollTo(0,0);'
driver.execute_script(js_scroll_left)

有人想，每次都设置这么大的值表示底部（或右边），代码中能否提供获取浏览器页面内容的宽高呢？

答案还是一样可以的。JS依旧提供了方法scrollHeight、scrollWidth来获取对应的高跟宽。

示例代码如下：

# scrollHeight 获取当前浏览器对象的实际内容高度
# scrollWidth 获取当前浏览器对象的实际内容宽度
# 拉到底部
js_scroll_bottom = 'document.documentElement.scrollTo(0,document.documentElement.scrollHeight);'
driver.execute_script(js_scroll_bottom)
# 拉到最右边
js_scroll_rig = 'window.scrollTo(document.documentElement.scrollWidth,0);'
driver.execute_script(js_scroll_rig)

JS方法可操作纵向与横向滚动条。（x 是横向距离，y 是纵向距离）
方法一：
document.documentElement.scrollTo(x,y)
方法二：
window.scrollTo(x,y)

问题解决了，动起你们的小手，开始撸代码了，小伙伴们·····

结尾

又到了一文一度的文章结尾，如果你觉得文章对你有帮助，请动起你们的小手手点下赞(大拇指)哈(一键三连更好)，Thanks♪(･ω･)ﾉ。