2. 程式人生 > >1108Selenium web自動化測試經驗分享-JS處理滾動條

1108Selenium web自動化測試經驗分享-JS處理滾動條

阿新 • • 發佈：2018-11-10

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
歡迎關注 微信公眾號：紫雲小站

相關推薦

1108Selenium web自動化測試經驗分享-JS處理滾動條

web自動化測試中，有一個情景是要滑動瀏覽器的滾動條(或者說 翻頁)，目前的處理方式多是用JS。本期分享主要內容有：處理整個瀏覽器滾動條、處理某個內嵌的滾動條、滾動到某元素的位置、翻頁PageDown。 一）整個瀏覽器的滾動條處理 個人推薦掌握的是 ‘window.scrollTo(

1106Selenium web自動化測試經驗分享-開啟多個視窗，切換控制代碼

在web自動化測試中，好像很少會出現多視窗和切換控制代碼的情景。我之前曾想過一個情景：如果我開啟多個視窗，該怎樣更快更好的切換控制代碼呢？今天做個小分享。 一）切換控制代碼（handle）(1) 首先說明下情景：百度搜索Python，在搜尋的結果中點選一個‘官網’的超連結，打開了一個

1105Selenium web自動化測試經驗分享-CSS定位總結

最近重拾web自動化測試的知識，打算寫個QQ郵箱的指令碼練練手，之後全心去搞Jmeter。今天先分享下自己整理的CSS定位的一些知識。 一）CSS定位 CSS（Cascading Style Sheets）是一種語言，它用來描述HTML和XML的元素顯示樣式；在CSS語言中有CSS選

1110Selenium web自動化測試經驗分享-Xpath定位總結

剛分享過App的實戰，這次分享下Web如何運用Xpath定位。本期的整體思路和App那期是一樣的。 1. 根據 元素屬性名和屬性值 來定位 def test_16(self): """xpath 根據元素屬性名和屬性值來定位"""

1121Selenium web自動化測試經驗分享-模擬鍵盤操作的三種類；推薦使用pykeyboard包

在Web自動化測試中，有時候會用鍵盤來輸入內容，沒那麼常用，但分享下我爬的坑。 第一個：keys模組 WebDriver中對鍵盤的操作都封裝在Keys類中； 一直到20號前 我還沒接觸過下面講的pykeyboard模組，所以一直有幾個問題沒能搞定： 1.CTRL + 數字鍵 切換

1114Selenium web自動化測試經驗分享-設定網頁超時載入時間set_page_load_timeout()

最開始學習web自動化測試就遇到一個小困擾，有時候設計的用例可能會開啟新浪、騰訊這些網站，等待網頁載入完成都要小半分鐘。最近重拾web自動化測試，又遇到這個困擾。 今天分享下：通過set_page_load_time()方法來設定時間，然後捕獲timeout異常 並通過執行JS命令來停止

1113Selenium web自動化測試經驗分享-frame切換時的定位、expected_conditions模組的frame_to_be_available_and_switch_to_it()

這篇分享裡面坑很多，不推薦掌握；我是爬了又掉，接著爬，接著掉坑，到現在總算是有點收穫。 一）frame表單切換時的定位方法 大家都知道，對於不同的iframe/frame表單中的元素是無法直接定位的。需要先結合switchTo().frame()方法切換到指定的frame/ifram

1109Appium app自動化測試經驗分享-Xpath定位總結

在我看來，自動化測試中元素定位的倚天劍和屠龍刀莫過於 Xpath和CSS，但CSS只用於Web(之前已經分享過)，這次就分享下Xpath的定位方法。本期講的是Xpath定位運用到App。 一）Xpath定位 XPath即為XML Path 的簡稱，它是一種用來確定XML文件中某部分位

1102Appium app自動化測試經驗分享-輕鬆切換手機輸入法

在app自動化測試 除錯用例、跑指令碼的時候，你可能會因為腳本里面重新配置了Unicode輸入法，不得不在每次真要輸入東西的時候要手動去重新設定。這個小麻煩困擾我好久了（好幾次其他同事在用測試機時特地來問我：怎麼沒法輸東西啊） 前兩天，在學習部分adb shell命令時，發現有個用法是i

1030Appium app自動化測試經驗分享-toast提示語 獲取及斷言

一）toast訊息 獲取及斷言 什麼是Toast？ 在螢幕下方浮現出一個視窗，顯示一段時間後又消失，這個視覺化元件叫做 Toast，它主要用於提示使用者某種事件發生了。如圖3、圖4 圖3是 對某車牌操作成功後的提示 圖4是 登入成功後的提示 Appium

1031Appium app自動化測試經驗分享-find_element_by_android_uiautomator ()經驗分享

不記得啥時候有了個印象：UI自動化測試是有個測試工具UIAutomator，所以我對於這個find_element_by_android_uiautomator ()有著莫名的崇拜之情。不肯輕易請它出山的。 可以通過文件看出來find_element_by_a

1119Appium app自動化測試經驗分享-ADB無線連線真機

有一次手機餓死 沒電了，還要來跑指令碼，很無奈啊，資料線連線電腦充電好慢的。有沒有其他方法，既可以跑指令碼，還可以正常充電呢？ 那就可以利用adb通過WiFi對手機進行除錯，手機正常去充電。 一） 如何設定adb無線連線 原理：Android裝置與電腦在同一區域

1129UI自動化測試經驗分享-顯式等待（三）指令碼設定元素等待【乾貨】

分享到這第三篇了，要說點重點的、大家很願意知道的：在腳本里到底要如何設定元素等待呢？ 一）Web指令碼設定元素等待 我和我已離職的同事都喜歡 將元素等待和定位元素結合在一起。 同事A的指令碼（已做修改）： def find_element123(self, key,

1128UI自動化測試經驗分享-顯式等待（二）expected_conditions模組、visibility_of_element_located(locator)

expected_conditions模組 提供的預期條件判斷類【模組包含一套預定義的條件集合】，大大方便了 WebDriverWait 的使用。 一）expected_conditions模組 這兒是官方文件 https://seleniumhq.github.io/s

1127UI自動化測試經驗分享-顯式等待（一）WebDriverWait類、until()方法

最近忙於其他事情，部落格就沒那麼多時間來寫。原本想先分享下三種等待方式，但是隱式等待我還有點不太懂。這次先分享顯式等待。 一）顯式等待 WebDriverWait() 顯示等待，是針對於某個特定的元素設定的等待時間。 原始碼： POLL_FREQUENCY = 0.5 #

1112UI自動化測試經驗分享-expected_conditions模組下的visibility_of()

這兩天在學習顯式等待，其實就是把expected_conditions模組下的幾個類實踐，去敲一下。上週六學到visibility_of()遇到些問題，今天分享下： 一）visibility_of() 這是原始碼: class visibility_of(object):

Selenium2+python自動化17-JS處理滾動條

bad 萬能 clas web 為什麽 所有 cati 函數 .cn 本篇轉自博客：上海-悠悠 原文地址：http://www.cnblogs.com/yoyoketang/tag/js/ 前言 selenium並不是萬能的，有時候頁面上操作無法實現的，這時候就需要

Selenium2+python自動化17-JS處理滾動條+execute_script介紹

前言     selenium並不是萬能的，有時候頁面上操作無法實現的，這時候就需要藉助JS來完成了。 常見場景： 當頁面上的元素超過一屏後，想操作螢幕下方的元素，是不能直接定位到，會報元素不可見的。 這時候需要藉助滾動條來拖動螢幕，使被操作的元素顯示在當前的螢幕上。 滾動條是無法直接用定位工具來定位的。s

selenium - Js處理滾動條操作

# 11.Js處理滾動條操作 driver.execute_script('arguments[0].scrollIntoView();',target) target 為find_element_by_XXX找到的元素物件# （1）先通過selenium 先找到元素# （2）通過js語句，將元素滾動到可見區

【2018.05.11】python3.6+selenium JS處理滾動條，聚焦元素

execute_script()，可以直接執行js的指令碼 --scrollHeight 獲取物件的滾動高度。 --scrollLeft 設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離。 --scrollTop 設定或獲取位於物