軟件測試-如何使用selenium操作窗口滾動條

介

我們在進行自動化測試工作的時候，如果頁面內容過多，一次性加載耗時太長的話，會使用分段加載來加載頁面內容，比如開始只加載頁面頂端的內容，而如果要加載更多的數據，就需要我們向下滑動，讓頁面加載后續的內容；尤其是網頁特別長的時候，我們往往需要滑動較長的距離才可以滑動到頁面的底端，本文就來介紹一下selenium操作窗口滾動條的方法。

操作步驟

環境準備

我們首先要準備好selenium環境和瀏覽器驅動，下載好chromedriver或者geckodriver并配置好瀏覽器驅動的環境變量，這里我們不做贅述，selenium環境配置的文章之前我們已經有介紹過如何配置環境了。

創建Selenium WebDriver實例對象

在使用Selenium之前，我們需要創建一個WebDriver實例，這個實例會充當瀏覽器的代理，踢我們執行各種操作。以下是一個創建Chrome WebDriver實例的示例：

python

復制代碼

from selenium import webdriver # 創建一個Chrome WebDriver實例 driver=webdriver.Chrome()

訪問目標網頁

使用WebDriver，我們可以訪問需要滾動的目標網頁。這可以通過get方法來完成：

python

復制代碼

# 導航到目標網頁 driver.get("https://example.com")

滾動頁面

我們有多種方法可以實現頁面滾動，下面我們來逐一介紹滾動方法：

滾動到特定元素

可以滾動到特定元素，確保它在可見區域內。以下是一個示例代碼，滾動到頁面底部的某個元素：

python

復制代碼

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

滾動到頁面的底部

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

python

復制代碼

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

滾動特定坐標

滾動到頁面上的特定坐標位置。以下是示例代碼，滾動到水平坐標0和垂直坐標500的位置：

python

復制代碼

# 使用JavaScript滾動到特定坐標 driver.execute_script("window.scrollTo(0, 500);")

總結

本文主要介紹了使用selenium實現頁面滾動的方法步驟，現在頁面的內容越來越多，經常需要我們實現頁面滾動才可以更好地運行我們地測試用例，希望本文能夠幫助到大家。

霍格沃茲測試開發學社|免費學習資料大放送，助你事半功倍！ - 公眾號 - 測試人社區

縫滾動是一種常見的網頁效果，它可以使內容在頁面上連續滾動，而不會出現明顯的斷裂，且鼠標移入滾動區域會暫停滾動。這種效果在新聞滾動、廣告展示、大屏呈現等場景中非常常見。下面我們將介紹如何使用JavaScript和CSS來實現無縫滾動組件，本文實現的組件使用非常簡單，只要在html中引入css和js，在需要實現無縫滾動的元素上添加約定的類（cl-seamless-container、cl-seamless-list）就可以自動實現無縫滾動。

HTML結構

首先，我們需要創建一個包含滾動內容的HTML結構，這里我們創建兩個滾動示例，每個滾動項的列表數目不同，其中cl-seamless-container類的元素表示滾動組件的容器，cl-seamless-list類包含的是要滾動顯示的列表項。接下來將介紹如何僅通過添加這兩個類就能實現一個無縫滾動的效果且能夠自適應列表項高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./animation.css">    
    <title>動畫組件</title>
</head>

<body>
    <h3>無縫滾動組件示例一</h3>
    <div class="cl-seamless-container">
        <ul class="cl-seamless-list">
            <li>滾動項1</li>
            <li>滾動項2</li>
            <li>滾動項3</li>
        </ul>
    </div>

    <h3>無縫滾動組件示例二</h3>
    <div class="cl-seamless-container">
        <ul class="cl-seamless-list">
            <li>滾動項1</li>
            <li>滾動項2</li>
            <li>滾動項3</li>
            <li>滾動項4</li>
            <li>滾動項5</li>
            <li>滾動項6</li>
            <li>滾動項7</li>
            <li>滾動項8</li>
            <li>滾動項9</li>
            <li>滾動項10</li>
        </ul>
    </div>
    <script type="module" src="./animation.js"></script>
</body>

</html>

CSS樣式

在進行具體的樣式設置之前，先來分析一下怎么做到無縫滾動，下圖中藍色容器的內容才是可見的，想象兩個完全相同的列表項向上滑動，從最初的0%的位置滑動到100%的位置后，再次恢復到最初0%的位置，我們發現0%和100%的位置容器內呈現的內容是一樣的，也就是說用戶感知不到100%到0%的這個切換的抖動，如此循環下去就實現了無縫滾動的效果。因此實現無縫滾動效果需要注意兩個關鍵的點：

容器的高度不能超過滾動列表的高度，否則就會出現抖動；
需要復制一份完全相同的滾動列表填補滾動過程的空隙；

說明：通過類似的思路也可以實現橫向無縫滾動，推薦讀者動手去試試

接下來，我們就為滾動容器和滾動列表設置一些基本的CSS樣式，主要使用css的transform中的translate平移來實現列表向上滾動的動畫，@keyframes cl-scrolling定義了關鍵幀，translate(0px, 0%)表示列表最初的位置，translate(0px, -100%)表示y軸向上平移100%的位置，animation: cl-scrolling 6s infinite linear;表示在6s內完成0%到100%的一次動畫并一直循環下去。顯然，滾動列表的高度不斷增加也會導致滾動的速度變快，因為6s內要完成一次完整滑動，可能會導致滾動太快而導致感知不適。因此，這里并沒有在css中設置動畫，而是借助js調節合適的速率后再進行設置動畫。

.cl-seamless-container {
    overflow: hidden;
}

.cl-seamless-list {
    margin: auto 0;
    padding: auto 0;
    /* 滾動快慢會受滾動列表項的高度影響，在js中調節速率進行控制 */
    /* animation: cl-scrolling 6s infinite linear; */
}

/* 鼠標移入滾動區域變成手型 */
.cl-seamless-container:hover .cl-seamless-list {
    cursor: pointer;
}

/* 鼠標移入滾動區域暫停動畫 */
.cl-seamless-container.pause .cl-seamless-list {
    animation-play-state: paused !important;
}

/* 動畫關鍵幀 */
@keyframes cl-scrolling {
    from {
        transform: translate(0px, 0%);
    }

    to {
        transform: translate(0px, -100%);
    }
}

JavaScript邏輯

最后，我們需要編寫JavaScript代碼來控制滾動效果，JS代碼主要實現如下功能：

設置容器的最大高度不能超過單個滾動列表的高度；
根據滾動列表項的高度調節動畫播放速度；
復制滾動項列表并插入容器中；
監聽鼠標移入和移出事件，向容器添加或移除pause類，實現暫停和恢復滾動效果；

function animation () {
    var seamless_container=document.getElementsByClassName("cl-seamless-container");
    for (let i=0; i < seamless_container.length; i++) {
        if (seamless_container[i].children.length > 0) {
            // 限制每個容器的高度
            let seamless_sub=seamless_container[i].children[0];
            seamless_container[i].style="max-height: " + seamless_sub.clientHeight + "px";
            // 調節滾動速率，使滾動速率不至于過快或過慢
            let scroll_speed=Math.max(4, Math.ceil(seamless_sub.clientHeight / 35));
            seamless_sub.style="animation: cl-scrolling " + scroll_speed + "s infinite linear";
            // 復制一份完全相同的列表，實現無縫滾動
            seamless_container[i].innerHTML +=seamless_container[i].innerHTML;
        }

        // 監聽鼠標移入事件，暫停動畫; 同時鼠標移出，繼續動畫
        seamless_container[i].addEventListener("mouseenter", function(event) {
            event.target.classList.add("pause");
            
        });
        seamless_container[i].addEventListener("mouseleave", function(event) {
            event.target.classList.remove("pause");
        })
    }
}

animation();

以上就是實現Web無縫滾動的基本方法，最終效果見開篇的gif動畫。

天就給大家分享一個用CSS3技術來實現的橫向滾動菜單效果，需要的朋友可以參考下：

具體實現效果圖如下：

鼠標劃過導航按鈕時候，右側內容會緩慢滑出顯示！

實現代碼如下：

html:

主要CSS：

該效果主要涉及到CSS3的動畫屬性，還有元素的隱藏 (overflow / visibility)；大家可以根據自己的需求來美化更好的效果，這主要講解實現原理！

想學習更多知識，可以關注“恒星網絡”頭條號！

在線咨詢

上一篇：Three.js 動效方案
下一篇：快速了解JavaScript富文本編輯

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

軟件測試-如何使用selenium操作窗口滾動條

介

操作步驟

總結

HTML結構

CSS樣式

JavaScript邏輯

您的項目需求