『心善淵』Selenium3.0基礎 — 17、Selenium操作瀏覽器視窗的滾動條

繁華似錦Fighting發表於2021-07-06

1、為什麼操作滾動條

在HTML頁面中,由於前端技術框架的原因,頁面中的一些元素為動態顯示,元素根據滾動條的下拉而被載入。

例如:頁面註冊同意條款,需要滾動條到最底層,才能點選同意。

2、Selenium如何操作滾動條

SeleniumWebDriver類庫中並沒有直接提供對滾動條進行操作方法,但是Selenium提供了可呼叫JavaScript指令碼的方法,所以我們可以通過JavaScript指令碼來達到操作滾動條的目的。

提示:

3、Selenium操作滾動條方法

  1. 設定JavaScritp指令碼控制滾動條
    js="window.scrollTo(0,1000)
    (0:水平距離;1000:垂直距離;單位畫素px)
  2. WebDriver呼叫JavaScritp指令碼方法
    driver.execute_script(js)

提示:

  • 最頂層:js="window.scrollTo(0,0)"
  • 最底層:js="window.scrollTo(0,1000)"
    注:1000不代表一定到最底層,要根據瀏覽器頁面的實際大小。
  • 直接操作垂直距離的方式:js= "var q=document.documentElement.scrollTop=n

4、操作滾動條示例

需求:訪問淘寶首頁,在淘寶首頁實現Selenium對滾動條的操作。

指令碼程式碼

"""
1.學習目標:
    掌握瀏覽器滾動條的操作方法
2.語法
    2.1使用js語言編寫控制滾動條程式碼
        引數:
            0,表示水平距離;
            10000,表示垂直距離  單位:px
        格式:
            向下滾動:window.scrollTo(0,10000)
            向上滾動:window.scrollTo(0,0)
    2.2使用selenium中方法執行js程式碼
        driver.execute_script(js程式碼)
3.需求
    在頁面中,控制滾動條
4.總結
    如果需要測試寫的js程式碼,可以在瀏覽器F12,控制檯console中執行檢視結果。
"""
# 1.匯入selenium
from selenium import webdriver
from time import sleep

# 2.開啟瀏覽器
driver = webdriver.Chrome()

# 3.開啟頁面
url = "https://www.taobao.com"
driver.get(url)
sleep(2)

# 4.滾動條操作
# 4.1 滾動條向下滾動
js_down = "window.scrollTo(0,1000)"
# 執行向下滾動操作
driver.execute_script(js_down)
sleep(2)

# 4.2 滾動條向上滾動
js_up = "window.scrollTo(0,0)"
driver.execute_script(js_up)
sleep(2)

# 向下滾動操作
# n為從頂部往下移動滾動距離
js1 = "var q=document.documentElement.scrollTop=2000"
driver.execute_script(js1)
sleep(2)

# 5.關閉瀏覽器
driver.quit()

5、下拉至聚焦元素的位置

聚焦元素:就是把滾動條,滾動到你想要查詢的元素的位置。

(1)實現步驟:

# 1 定位需要聚焦元素
target = driver.find_element_xx

# 2 js程式碼
js = "arguments[0].scrollIntoView()"

# 3 執行聚焦元素操作
driver.execute_script(js程式碼,元素target)

(2)實現示例:

頁面程式碼片段

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
		button{padding: 8px; background: #f8f8f8;border-radius: 5px}
		button{margin-left:200px;margin-top:2000px}
	</style>
</head>
<body>
    <button type="submitA" value="註冊A" title="加入會員A" >註冊使用者A</button>
</body>
</html>

指令碼程式碼:

"""
1.學習目標:
    掌握聚焦元素的操作方法
2.語法(操作方法)
    2.1 定位需要聚焦元素
        target = driver.find_element_xx
    2.2 js程式碼
        js = "arguments[0].scrollIntoView()"
    2.3 執行聚焦元素操作
        driver.execute_script(js程式碼,元素target)
3.需求
    在頁面中,滾動條下拉聚焦元素位置。
"""
# 1.匯入selenium
from selenium import webdriver
from time import sleep
import os

# 2.開啟瀏覽器
driver = webdriver.Chrome()

# 3.開啟頁面
url = "file:///" + os.path.abspath("./1.html")
driver.get(url)
sleep(2)

# 4.滾動條下拉聚焦元素位置
# 4.1 定位需要聚焦元素-淘寶首頁的END文字
element = driver.find_element_by_css_selector("[type='submitA']")

# 4.2 js程式碼
js = "arguments[0].scrollIntoView()"

# 4.3 執行聚焦元素操作
driver.execute_script(js, element)
sleep(3)

# 5.關閉瀏覽器
driver.quit()

相關文章