1108Selenium web自动化测试经验分享-JS处理滚动条

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zyooooxie/article/details/83792368

web自动化测试中,有一个情景是要滑动浏览器的滚动条(或者说 翻页),目前的处理方式多是用JS。本期分享主要内容有:处理整个浏览器滚动条、处理某个内嵌的滚动条、滚动到某元素的位置、翻页PageDown。

一)整个浏览器的滚动条处理

个人推荐掌握的是 ‘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
欢迎关注 微信公众号:紫云小站

展开阅读全文

没有更多推荐了,返回首页