介

我們?cè)谶M(jìn)行自動(dòng)化測(cè)試工作的時(shí)候，如果頁面內(nèi)容過多，一次性加載耗時(shí)太長(zhǎng)的話，會(huì)使用分段加載來加載頁面內(nèi)容，比如開始只加載頁面頂端的內(nèi)容，而如果要加載更多的數(shù)據(jù)，就需要我們向下滑動(dòng)，讓頁面加載后續(xù)的內(nèi)容；尤其是網(wǎng)頁特別長(zhǎng)的時(shí)候，我們往往需要滑動(dòng)較長(zhǎng)的距離才可以滑動(dòng)到頁面的底端，本文就來介紹一下selenium操作窗口滾動(dòng)條的方法。

操作步驟

1. 環(huán)境準(zhǔn)備

我們首先要準(zhǔn)備好selenium環(huán)境和瀏覽器驅(qū)動(dòng)，下載好chromedriver或者geckodriver并配置好瀏覽器驅(qū)動(dòng)的環(huán)境變量，這里我們不做贅述，selenium環(huán)境配置的文章之前我們已經(jīng)有介紹過如何配置環(huán)境了。

2. 創(chuàng)建Selenium WebDriver實(shí)例對(duì)象

在使用Selenium之前，我們需要?jiǎng)?chuàng)建一個(gè)WebDriver實(shí)例，這個(gè)實(shí)例會(huì)充當(dāng)瀏覽器的代理，踢我們執(zhí)行各種操作。以下是一個(gè)創(chuàng)建Chrome WebDriver實(shí)例的示例：

python

復(fù)制代碼

from selenium import webdriver # 創(chuàng)建一個(gè)Chrome WebDriver實(shí)例 driver = webdriver.Chrome()

3. 訪問目標(biāo)網(wǎng)頁

使用WebDriver，我們可以訪問需要滾動(dòng)的目標(biāo)網(wǎng)頁。這可以通過get方法來完成：

python

復(fù)制代碼

# 導(dǎo)航到目標(biāo)網(wǎng)頁 driver.get("https://example.com")

4. 滾動(dòng)頁面

我們有多種方法可以實(shí)現(xiàn)頁面滾動(dòng)，下面我們來逐一介紹滾動(dòng)方法：

• 滾動(dòng)到特定元素

可以滾動(dòng)到特定元素，確保它在可見區(qū)域內(nèi)。以下是一個(gè)示例代碼，滾動(dòng)到頁面底部的某個(gè)元素：

python

復(fù)制代碼

# 定位到要滾動(dòng)到的元素 element_to_scroll_to = driver.find_element(By.ID, "element_id") # 使用JavaScript滾動(dòng)到元素位置 driver.execute_script("arguments[0].scrollIntoView();", element_to_scroll_to)

• 滾動(dòng)到頁面的底部

如果我們只是想滾動(dòng)到頁面的底部，可以使用以下示例代碼：

python

復(fù)制代碼

# 使用JavaScript滾動(dòng)到頁面底部 driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")

• 滾動(dòng)特定坐標(biāo)

滾動(dòng)到頁面上的特定坐標(biāo)位置。以下是示例代碼，滾動(dòng)到水平坐標(biāo)0和垂直坐標(biāo)500的位置：

python

復(fù)制代碼

# 使用JavaScript滾動(dòng)到特定坐標(biāo) driver.execute_script("window.scrollTo(0, 500);")

總結(jié)

本文主要介紹了使用selenium實(shí)現(xiàn)頁面滾動(dòng)的方法步驟，現(xiàn)在頁面的內(nèi)容越來越多，經(jīng)常需要我們實(shí)現(xiàn)頁面滾動(dòng)才可以更好地運(yùn)行我們地測(cè)試用例，希望本文能夠幫助到大家。

霍格沃茲測(cè)試開發(fā)學(xué)社|免費(fèi)學(xué)習(xí)資料大放送，助你事半功倍！ - 公眾號(hào) - 測(cè)試人社區(qū)

本文中，我們將深入了解滾動(dòng)條的世界。我知道，這聽起來不太迷人，但相信我，精心設(shè)計(jì)的頁面與匹配的滾動(dòng)條齊頭并進(jìn)。老式的鍍鉻滾動(dòng)條只是不適合那么多。

我們將研究滾動(dòng)條的細(xì)節(jié)，然后看看一些很酷的例子。

滾動(dòng)條的組成部分

要設(shè)置滾動(dòng)條的樣式，您需要熟悉滾動(dòng)條的解剖結(jié)構(gòu)。請(qǐng)看這張圖：

這里要記住的兩個(gè)主要組成部分是：

1. scrollbar track是滾動(dòng)條下方的背景。
2. scrollbar humb是用戶單擊和拖動(dòng)的部分。

我們可以使用供應(yīng)商前綴：：-webkit-scrollbar 選擇器更改完整滾動(dòng)條的屬性。我們可以給滾動(dòng)條一個(gè)固定的寬度、背景顏色、圓角......很多事情！如果我們自定義頁面的主滾動(dòng)條，那么我們可以直接在 HTML 元素上使用 ：：-webkit-scrollbar：

html::-webkit-scrollbar {
  /* Style away! */
}

如果我們自定義一個(gè)滾動(dòng)框，這是溢出的結(jié)果：滾動(dòng)，那么我們可以在該元素上使用 ：：-webkit-scrollbar：

.element::-webkit-scrollbar {
  /* Style away! */
}

下面是一個(gè)快速示例，它設(shè)置 HTML 元素滾動(dòng)條的樣式，使其寬，背景為紅色：

如果我們只想更改滾動(dòng)條的thumb或track怎么辦？你猜對(duì)了——我們分別為這兩個(gè)元素提供了特殊的前綴偽元素：：：-webkit-scrollbar-thumb 和 ：：-webkit-scrollbar-track。以下是我們將所有這些東西放在一起時(shí)可能實(shí)現(xiàn)的想法：

向您展示三個(gè)度的自定義滾動(dòng)條樣式，然后打開一個(gè)從網(wǎng)絡(luò)上提取示例的大型展示，以獲取靈感。

簡(jiǎn)單而優(yōu)雅的滾動(dòng)條

自定義滾動(dòng)條仍然可以是最小的。我整理了一組示例，這些示例巧妙地改變了外觀，無論是對(duì)拇指或軌道進(jìn)行輕微的顏色更改，還是對(duì)背景進(jìn)行一些淺色造型。

如您所見，在滾動(dòng)條樣式方面，我們不必發(fā)瘋。有時(shí)，只需進(jìn)行細(xì)微的更改即可通過與整體主題匹配的滾動(dòng)條來增強(qiáng)整體用戶體驗(yàn).

html::-webkit-scrollbar{
  width: 50px;
  background:red;
}

如果我們只想更改滾動(dòng)條的拇指或軌道怎么辦？你猜對(duì)了——我們分別為這兩個(gè)元素提供了特殊的前綴偽元素：：：-webkit-scrollbar-thumb 和 ：：-webkit-scrollbar-track。以下是我們將所有這些東西放在一起時(shí)可能實(shí)現(xiàn)的想法：

html::-webkit-scrollbar {
  width: 30px;
}
 
html::-webkit-scrollbar-track {
  background: black;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
 
html::-webkit-scrollbar-thumb {
  background: red;
  border: 3px solid blue;
}

向您展示三個(gè)度的自定義滾動(dòng)條樣式，然后打開一個(gè)從網(wǎng)絡(luò)上提取示例的大型展示，以獲取靈感。

簡(jiǎn)單而優(yōu)雅的滾動(dòng)條

自定義滾動(dòng)條仍然可以是最小的。我整理了一組示例，這些示例巧妙地改變了外觀，無論是對(duì)拇指或軌道進(jìn)行輕微的顏色更改，還是對(duì)背景進(jìn)行一些淺色造型。

.container {
            display: flex;
            margin: 50px;
            column-gap: 20px;
        }
        
        .scrollbar {
            height: 300px;
            width: 50%;
            overflow: auto;
            padding: 0 10px;
        }
        /*       ScrollBar 1        */
        
        #scrollbar1::-webkit-scrollbar {
            width: 10px;
        }
        
        #scrollbar1::-webkit-scrollbar-track {
            border-radius: 8px;
            background-color: #e7e7e7;
            border: 1px solid #cacaca;
        }
        
        #scrollbar1::-webkit-scrollbar-thumb {
            border-radius: 8px;
            background-color: #d55959;
        }
        /*       ScrollBar 2        */
        
        #scrollbar2::-webkit-scrollbar {
            width: 12px;
        }
        
        #scrollbar2::-webkit-scrollbar-track {
            border-radius: 8px;
            background-color: #e7e7e7;
            border: 1px solid #cacaca;
            box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        }
        
        #scrollbar2::-webkit-scrollbar-thumb {
            border-radius: 8px;
            background-color: #363636;
        }
        /*        ScrollBar 3    */
        
        #scrollbar3::-webkit-scrollbar {
            width: 12px;
        }
        
        #scrollbar3::-webkit-scrollbar-track {
            background-color: #e7e7e7;
            border: 1px solid #cacaca;
        }
        
        #scrollbar3::-webkit-scrollbar-thumb {
            background-color: #060b9a;
        }
        /*        ScrollBar 4    */
        
        #scrollbar4::-webkit-scrollbar {
            width: 12px;
        }
        
        #scrollbar4::-webkit-scrollbar-track {
            background-color: transparent;
            border: 1.5px solid #7e7e7e;
            border-radius: 8px;
        }
        
        #scrollbar4::-webkit-scrollbar-thumb {
            background-color: #f1f1f1;
            border: 2px solid #616161;
            border-radius: 8px;
        }
        /*        ScrollBar 5    */
        
        #scrollbar5::-webkit-scrollbar {
            background-color: #000;
            width: 12px;
            border-radius: 10px;
        }
        
        #scrollbar5::-webkit-scrollbar-track {
            border-radius: 10px;
            box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
        }
        
        #scrollbar5::-webkit-scrollbar-thumb {
            background-image: -webkit-gradient(linear, left bottom, left top, color-stop(.5, #a520ca), color-stop(1, #2681cc));
            border-radius: 10px;
        }
        /*       ScrollBar 6        */
        
        #scrollbar6::-webkit-scrollbar {
            width: 12px;
        }
        
        #scrollbar6::-webkit-scrollbar-track {
            border-radius: 8px;
            background-color: #95a5a6;
            border: 1px solid #cacaca;
        }
        
        #scrollbar6::-webkit-scrollbar-thumb {
            border-radius: 8px;
            background-color: #2c3e50;
        }

如您所見，在滾動(dòng)條樣式方面，我們不必發(fā)瘋。有時(shí)，只需進(jìn)行細(xì)微的更改即可通過與整體主題匹配的滾動(dòng)條來增強(qiáng)整體用戶體驗(yàn)。

在我們制作html網(wǎng)頁的時(shí)候，有時(shí)候需要某個(gè)元素（比如說div）的滾動(dòng)條一直在最下方，那么我們?cè)撛趺醋瞿兀?/p>

先上代碼：

window.onload = SetScroll;// 不要括號(hào)

function SetScroll(){

//讀取需要設(shè)定的元素高度

var height=$("#showwindows")[0].scrollHeight;

//設(shè)置元素的滾動(dòng)條位置在高度數(shù)據(jù)地方就是最下方

$("#showwindows").scrollTop(height);

}

程序執(zhí)行流程如下：

1、頁面加載時(shí)自動(dòng)調(diào)用JavaScript中的SetScroll方法；

2、設(shè)置height為需要設(shè)置滾動(dòng)條元素的高度；

3、設(shè)置元素的滾動(dòng)條位置為元素高度，就是元素的最下方位置。