26、Selenium + Python 实现 UI 自动化测试-调用 JavaScript 操作滚动条

前面我们学了 JavaScript 基础、JS DOM等知识，也在Selenium中调用过一次 JavaScript 脚本 实现滑动页面滚动条。那在 Selenium 自动化的过程中，都有哪些调用 JS 的场景呢？ 今天我们来总结一下：

1、使用 JS 滑动纵向滚动条

from selenium import webdriver
from time import sleep

# driver = webdriver.Chrome()
driver = webdriver.Firefox()
driver.get("http://www.baidu.com")
driver.find_element_by_id('kw').send_keys("storm")
driver.find_element_by_id('su').click()#滑动滚动条到底部
js1 = "window.scrollTo(0, document.body.scrollHeight)"#滑动到顶部
js2 = "window.scrollTo(0,0)"#向下移动200像素
js3 = "window.scrollTo(0,200)"#滑动滚动条到某个指定的元素
js4 = "arguments[0].scrollIntoView();"sleep(2) #等待页面加载完，注意观察滚动条目前处于最上方
driver.execute_script(js1) #执行js1，将滚动条滑到最下方
sleep(2) #加等待时间，看效果
driver.execute_script(js2) #执行js2，将滚动条滑到最上方
sleep(2) #加等待时间，看效果
driver.execute_script(js3) #执行js3，将滚动条向下滑到200像素
sleep(2) #加等待时间，看效果
driver.execute_script(js2) #执行js2，将滚动条滑到最上方
sleep(2)
ele = driver.find_element_by_id('con-ar')  #定位一个元素
driver.execute_script(js4,ele)  #滑动到上面定位的元素的地方
sleep(2)
driver.quit()

以上语句Chrome 和 Firefox 浏览器测试都没问题

2、使用 JS 滑动横向滚动条

from selenium import webdriver
from time import sleep

driver = webdriver.Chrome()
# driver = webdriver.Firefox()
driver.get("http://www.baidu.com")
driver.find_element_by_id('kw').send_keys("storm")
driver.find_element_by_id('su').click()

driver.set_window_size(500,500) #缩小浏览器窗口，使之出现横向滚动条

js5 = "window.scrollTo(document.body.scrollWidth,0)"
js6 = "window.scrollTo(0,0)"
js7 = "window.scrollTo(200,0)"

driver.execute_script(js5)  #移动到最右边
sleep(2)
driver.execute_script(js6) #移动到最左边
sleep(2)
driver.execute_script(js7) #向右移动200像素
sleep(2)
driver.quit()

3、操作内嵌滚动条

内嵌滚动条，一般嵌在一个iframe 里面，先切到要操作滚动条所在的iframe里面即可

from selenium import webdriver
from time import sleep

driver = webdriver.Chrome()
# driver = webdriver.Firefox()
driver.get("http://sahitest.com/demo/iframesTest.htm")
sleep(2)
driver.switch_to.frame(1)
js5 = "window.scrollTo(0,200)"
driver.execute_script(js5)  #向下移动200像素
sleep(2)
driver.quit()

4、总结一下

1、使用window.scrollTo(x,y) 这一语句，可以实现所有的纵向或横向滑动滚动条。其中x为横坐标，y为纵坐标，想纵向滚动200像素，就window.scrollTo(0,200)

2、 获取当前窗口的高度和宽度

document.body.scrollWidth

document.body.scrollHeight

3、滑动到指定元素位置

arguments[0].scrollIntoView() ，arguments[0] 是指第一个传参

5、拓展

实现滚动条滑动，还有其他js 写法，还有人写过 jQuery语句，本人并未研究透

例如：灰蓝博客介绍了多种方法，请根据实际情况参考：http://blog.csdn.net/huilan_same/article/details/52387102