web自动化测试中,有一个情景是要滑动浏览器的滚动条(或者说 翻页),目前的处理方式多是用JS。本期分享主要内容有:处理整个浏览器滚动条、处理某个内嵌的滚动条、滚动到某元素的位置、翻页PageDown。
个人博客:https://blog.csdn.net/zyooooxie
一)整个浏览器的滚动条处理
个人推荐掌握的是 ‘window.scrollTo()’,其他都可以直接忽视掉
1A.scrollTo()
‘window.scrollTo(x,y)’ x,y 绝对坐标 掌握!!!
def test_46js1(self):
"""控制滚动条-整个浏览器-scrollTo()"""
self.driver = webdriver.Chrome()
self.driver.maximize_window()
self.driver.get("https://www.baidu.com")
self.xin_find_element(self.driver, By.ID, 'kw').send_keys('Python')
self.xin_find_element(self.driver, By.ID, 'su').click()
time.sleep(2)
js1 = 'window.scrollTo(0,10000)'
self.driver.execute_script(js1)
time.sleep(2)
js2 = 'window.scrollTo(0,0)'
self.driver.execute_script(js2)
time.sleep(1)
self.driver.quit()
1B.scrollTo()
’document.documentElement.scrollTo(x,y)’ 了解
def test_46js4a(self):
"""控制滚动条-整个浏览器-scrollTo()"""
self.driver = webdriver.Chrome()
self.driver.maximize_window()
self.driver.get("https://www.baidu.com")
self.xin_find_element(self.driver, By.ID, 'kw').send_keys('Python')
self.xin_find_element(self.driver, By.ID, 'su').click()
time.sleep(2)
js3 = 'document.documentElement.scrollTo(0,10000)'
self.driver.execute_script(js3)
time.sleep(2)
js4 = 'document.documentElement.scrollTo(0,0)'
self.driver.execute_script(js4)
time.sleep(1)
self.driver.quit()
2.scrollHeight 获取滚动条高度
’window.scrollTo(0,document.documentElement.scrollHeight)’ 了解。
def test_46js2b(self):
"""控制滚动条-整个浏览器-scrollTo(0,scrollHeight)"""
self.driver = webdriver.Chrome()
self.driver.maximize_window()
self.driver.get("https://www.baidu.com")
self.xin_find_element(self.driver, By.ID, 'kw').send_keys('Python')
self.xin_find_element(self.driver, By.ID, 'su').click()
time.sleep(2)
# scrollHeight 获取对象的滚动高度。
js12 = 'window.scrollTo(0,document.documentElement.scrollHeight)'
self.driver.execute_script(js12)
time.sleep(1)
self.driver.quit()
3.scrollWidth 获取横向滚动条宽度
’window.scrollTo(document.documentElement.scrollWidth,0)’ 了解。
def test_46js2c(self):
"""控制滚动条-整个浏览器-scrollTo(scrollWidth,0)"""
self.driver = webdriver.Chrome()
# 左右最好不要最大化
self.driver.get("https://www.baidu.com")
self.xin_find_element(self.driver, By.ID, 'kw').send_keys('Python')
self.xin_find_element(self.driver, By.ID, 'su').click()
time.sleep(2)
# scrollWidth 获取对象的滚动宽度
js12 = 'window.scrollTo(document.documentElement.scrollWidth,0)'
self.driver.execute_script(js12)
time.sleep(1)
self.driver.quit()
4.scrollTop
’document.documentElement.scrollTop=10000’ 了解。
def test_46js3a(self):
"""控制滚动条-整个浏览器-scrollTop"""
self.driver = webdriver.Chrome()
self.driver.maximize_window()
self.driver.get("https://www.baidu.com")
self.xin_find_element(self.driver, By.ID, 'kw').send_keys('Python')
self.xin_find_element(self.driver, By.ID, 'su').click()
time.sleep(2)
js = 'document.documentElement.scrollTop=10000'
self.driver.execute_script(js)
time.sleep(2)
js2 = 'document.documentElement.scrollTop=50'
self.driver.execute_script(js2)
time.sleep(1)
self.driver.quit()
5.scrollLeft
’document.documentElement.scrollLeft=10000’ 了解。
def test_46js4(self):
"""控制滚动条-整个浏览器-scrollLeft"""
# 左右滑动 是不能使用最大化浏览器
self.driver = webdriver.Chrome()
self.driver.get("https://www.baidu.com")
self.xin_find_element(self.driver, By.ID, 'kw').send_keys('Python')
self.xin_find_element(self.driver, By.ID, 'su').click()
time.sleep(2)
# 在HTML页面中,由于前端技术框架的原因,页面元素为动态显示,元素根据滚动条的下拉而被加载
js3 = 'document.documentElement.scrollLeft=10000'
self.driver.execute_script(js3)
time.sleep(2)
js4 = 'document.documentElement.scrollLeft=0'
self.driver.execute_script(js4)
time.sleep(1)
self.driver.quit()
6A.scrollBY()
’window.scrollBy(x,y)’ 相对量 了解。
def test_46js9b(self):
"""滚动条-scrollBy(x,y)方法滚动当前window中显示的文档,x和y指定滚动的相对量"""
self.driver = webdriver.Chrome()
self.driver.maximize_window()
self.driver.get("https://www.baidu.com")
self.xin_find_element(self.driver, By.ID, 'kw').send_keys('Python')
self.xin_find_element(self.driver, By.ID, 'su').click()
time.sleep(2)
js11 = 'window.scrollBy(0,600)'
self.driver.execute_script(js11)
time.sleep(2)
js111 = 'window.scrollBy(0,-600)'
self.driver.execute_script(js111)
time.sleep(2)
self.driver.quit()
6B.scrollBy()
’document.documentElement.scrollBy(x,y)’ 相对量 了解。
def test_46js9c(self):
"""控制滚动条-整个浏览器-scrollBy(x,y)"""
self.driver = webdriver.Chrome()
self.driver.maximize_window()
self.driver.get("https://www.baidu.com")
self.xin_find_element(self.driver, By.ID, 'kw').send_keys('Python')
self.xin_find_element(self.driver, By.ID, 'su').click()
time.sleep(2)
js = 'document.documentElement.scrollBy(0,1500)'
self.driver.execute_script(js)
time.sleep(2)
js2 = 'document.documentElement.scrollBy(0,-1500)'
self.driver.execute_script(js2)
time.sleep(1)
self.driver.quit()
二)内嵌窗口的滚动条的处理
个人推荐掌握的是 ‘document.XXXXXXX.scrollTo()’,其他都可以直接忽视掉
在某个网页有滚动条,想要处理,那肯定得先定位到这个元素。
JS定位元素的常用方法:
1.id和querySelector获取的是单个element元素对象,其他都是elements返回都是list对象
document.getElementById(“XXXX”)
document.querySelector(“XXXX”) CSS定位
2.name不推荐
document.getElementsByName(“XXXX”)
3.标签名
document.getElementsByTagName(“XXXX”)
4.class 类
document.getElementsByClassName(“XXXX”)
5.css选择器
document.querySelectorAll(“XXXX”)
下图代码 就是querySelectorAll()和querySelector()的不同用法
def test_46js8(self):
driver = webdriver.Chrome()
driver.get(r'D:\new_web\内嵌div滚动条.html')
time.sleep(1)
js3 = 'document.querySelectorAll("div.scroll")[0].scrollTo(200,200)'
driver.execute_script(js3)
time.sleep(2)
js3 = 'document.querySelector("div.scroll").scrollTo(0,0)'
driver.execute_script(js3)
time.sleep(2)
driver.quit()
链接:https://pan.baidu.com/s/1KYsvOjTIyXzYjrsN5fQDhw
提取码:bnyn
是代码中的那个 内嵌div滚动条.html
1.scrollTop
def test_46js5(self):
"""控制滚动条-内嵌滚动条-scrollTop"""
driver = webdriver.Chrome()
driver.get(r'D:\new_web\内嵌div滚动条.html')
# 通过控制scrollTop的值来控制滚动条高度
time.sleep(1)
js = 'document.getElementsByClassName("scroll")[0].scrollTop=10000'
driver.execute_script(js)
time.sleep(2)
js1 = 'document.getElementsByClassName("scroll")[0].scrollTop=0'
driver.execute_script(js1)
time.sleep(2)
driver.quit()
2.scrollLeft
def test_46js6(self):
"""控制滚动条-内嵌滚动条-scrollLeft"""
driver = webdriver.Chrome()
driver.get(r'D:\new_web\内嵌div滚动条.html')
# 通过控制scrollLeft的值来控制滚动条高度
time.sleep(1)
js = 'document.getElementsByClassName("scroll")[0].scrollLeft=10000'
driver.execute_script(js)
time.sleep(2)
js1 = 'document.getElementsByClassName("scroll")[0].scrollLeft=0'
driver.execute_script(js1)
time.sleep(2)
driver.quit()
3.scrollTo()
def test_46js7(self):
"""控制滚动条-内嵌滚动条-scrollTo()"""
driver = webdriver.Chrome()
driver.get(r'D:\new_web\内嵌div滚动条.html')
time.sleep(1)
js = 'document.getElementsByClassName("scroll")[0].scrollTo(10000,10000)'
driver.execute_script(js)
time.sleep(2)
js1 = 'document.getElementsByClassName("scroll")[0].scrollTo(0,0)'
driver.execute_script(js1)
time.sleep(2)
driver.quit()
三)滚动条拉到 具体元素的位置
打开网页 有时候无法确定要操作的元素的位置,怎么办呢?
这个时候可以先让页面直接跳到元素出现的位置,然后再操作
就是说:将滚动条 拖动到 需要显示的元素的位置
target1111 = driver.find_element_by_xxx(“XXXXX”)
driver.execute_script(“arguments[0].scrollIntoView();”,target1111)
def test_46js9a(self):
"""滚动条拉到指定位置(具体元素)-target-scrollIntoView方法滚动当前元素,进入浏览器的可见区域"""
self.driver = webdriver.Chrome()
self.driver.maximize_window()
self.driver.get("https://www.baidu.com")
self.xin_find_element(self.driver, By.ID, 'kw').send_keys('Python')
self.xin_find_element(self.driver, By.ID, 'su').click()
time.sleep(2)
# 下面两个方式都可以
# target11 = self.xin_find_element(self.driver, By.CSS_SELECTOR, 'div#page>a:nth-child(2)')
target11 = self.xin_find_element(self.driver, By.XPATH, '//div[@id="page"]/a[3]')
self.driver.execute_script("arguments[0].scrollIntoView();", target11)
time.sleep(2)
self.driver.quit()
上图代码 模拟的是 百度搜索后 将滚动条拖到 最下面第三页 的位置
我用的是谷歌浏览器,实际js对于Chrome和ie还有一种‘document.body.xxxx’的写法,但我执行用例的时候有些地方出错,故而就一点没写。
总结起来:我还是推荐"window.scrollTo(x,y)处理整个浏览器的滚动条"和处理内嵌滚动条的 ‘document.XXXXXXX.scrollTo()’
交流技术 欢迎+QQ 153132336 zy
个人博客 https://blog.csdn.net/zyooooxie