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

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()

上图代码 模拟的是 百度搜索后 将滚动条拖到 最下面第三页 的位置

四）PageDown 下一页

模拟键盘的PageDown和PageUp来实现向下翻页 向上翻页

    def test_36d(self):
        driver = webdriver.Chrome()
        driver.get("https://www.baidu.com")
        driver.maximize_window()
        self.xin_find_element(driver, By.ID, 'kw').send_keys('Python')

        from selenium.webdriver.common.keys import Keys
        self.xin_find_element(driver, By.ID, 'su').send_keys(Keys.ENTER)
        time.sleep(2)
        self.xin_find_element(driver, By.ID, 'su').send_keys(Keys.PAGE_DOWN)
        time.sleep(2)
        self.xin_find_element(driver, By.ID, 'su').send_keys(Keys.PAGE_DOWN)
        time.sleep(1)
        self.xin_find_element(driver, By.ID, 'su').send_keys(Keys.PAGE_UP)
        time.sleep(2)
        self.xin_find_element(driver, By.ID, 'su').send_keys(Keys.PAGE_UP)
        time.sleep(1)
        driver.quit()

我用的是谷歌浏览器，实际js对于Chrome和ie还有一种‘document.body.xxxx’的写法，但我执行用例的时候有些地方出错，故而就一点没写。

总结起来：我还是推荐"window.scrollTo(x,y)处理整个浏览器的滚动条"和处理内嵌滚动条的 ‘document.XXXXXXX.scrollTo()’

交流技术 欢迎+QQ 153132336 zy
欢迎关注 微信公众号：紫云小站