整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
我們在進(jìn)行自動化測試工作的時候，如果頁面內(nèi)容過多，一次性加載耗時太長的話，會使用分段加載來加載頁面內(nèi)容，比如開始只加載頁面頂端的內(nèi)容，而如果要加載更多的數(shù)據(jù)，就需要我們向下滑動，讓頁面加載后續(xù)的內(nèi)容；尤其是網(wǎng)頁特別長的時候，我們往往需要滑動較長的距離才可以滑動到頁面的底端，本文就來介紹一下selenium操作窗口滾動條的方法。
我們首先要準(zhǔn)備好selenium環(huán)境和瀏覽器驅(qū)動，下載好chromedriver或者geckodriver并配置好瀏覽器驅(qū)動的環(huán)境變量，這里我們不做贅述，selenium環(huán)境配置的文章之前我們已經(jīng)有介紹過如何配置環(huán)境了。
在使用Selenium之前，我們需要創(chuàng)建一個WebDriver實(shí)例，這個實(shí)例會充當(dāng)瀏覽器的代理，踢我們執(zhí)行各種操作。以下是一個創(chuàng)建Chrome WebDriver實(shí)例的示例：
python復(fù)制代碼
from selenium import webdriver # 創(chuàng)建一個Chrome WebDriver實(shí)例 driver=webdriver.Chrome()
使用WebDriver，我們可以訪問需要滾動的目標(biāo)網(wǎng)頁。這可以通過get方法來完成：
python復(fù)制代碼
# 導(dǎo)航到目標(biāo)網(wǎng)頁 driver.get("https://example.com")
我們有多種方法可以實(shí)現(xiàn)頁面滾動，下面我們來逐一介紹滾動方法：
可以滾動到特定元素，確保它在可見區(qū)域內(nèi)。以下是一個示例代碼，滾動到頁面底部的某個元素：
python復(fù)制代碼
# 定位到要滾動到的元素 element_to_scroll_to=driver.find_element(By.ID, "element_id") # 使用JavaScript滾動到元素位置 driver.execute_script("arguments[0].scrollIntoView();", element_to_scroll_to)
如果我們只是想滾動到頁面的底部，可以使用以下示例代碼：
python復(fù)制代碼
# 使用JavaScript滾動到頁面底部 driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")
滾動到頁面上的特定坐標(biāo)位置。以下是示例代碼，滾動到水平坐標(biāo)0和垂直坐標(biāo)500的位置：
python復(fù)制代碼
# 使用JavaScript滾動到特定坐標(biāo) driver.execute_script("window.scrollTo(0, 500);")
本文主要介紹了使用selenium實(shí)現(xiàn)頁面滾動的方法步驟，現(xiàn)在頁面的內(nèi)容越來越多，經(jīng)常需要我們實(shí)現(xiàn)頁面滾動才可以更好地運(yùn)行我們地測試用例，希望本文能夠幫助到大家。
霍格沃茲測試開發(fā)學(xué)社|免費(fèi)學(xué)習(xí)資料大放送，助你事半功倍！ - 公眾號 - 測試人社區(qū)
縫滾動是一種常見的網(wǎng)頁效果，它可以使內(nèi)容在頁面上連續(xù)滾動，而不會出現(xiàn)明顯的斷裂，且鼠標(biāo)移入滾動區(qū)域會暫停滾動。這種效果在新聞滾動、廣告展示、大屏呈現(xiàn)等場景中非常常見。下面我們將介紹如何使用JavaScript和CSS來實(shí)現(xiàn)無縫滾動組件，本文實(shí)現(xiàn)的組件使用非常簡單，只要在html中引入css和js，在需要實(shí)現(xiàn)無縫滾動的元素上添加約定的類（cl-seamless-container、cl-seamless-list）就可以自動實(shí)現(xiàn)無縫滾動。
首先，我們需要創(chuàng)建一個包含滾動內(nèi)容的HTML結(jié)構(gòu)，這里我們創(chuàng)建兩個滾動示例，每個滾動項(xiàng)的列表數(shù)目不同，其中cl-seamless-container類的元素表示滾動組件的容器，cl-seamless-list類包含的是要滾動顯示的列表項(xiàng)。接下來將介紹如何僅通過添加這兩個類就能實(shí)現(xiàn)一個無縫滾動的效果且能夠自適應(yīng)列表項(xiàng)高度。
<!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>滾動項(xiàng)1</li>
<li>滾動項(xiàng)2</li>
<li>滾動項(xiàng)3</li>
</ul>
</div>
<h3>無縫滾動組件示例二</h3>
<div class="cl-seamless-container">
<ul class="cl-seamless-list">
<li>滾動項(xiàng)1</li>
<li>滾動項(xiàng)2</li>
<li>滾動項(xiàng)3</li>
<li>滾動項(xiàng)4</li>
<li>滾動項(xiàng)5</li>
<li>滾動項(xiàng)6</li>
<li>滾動項(xiàng)7</li>
<li>滾動項(xiàng)8</li>
<li>滾動項(xiàng)9</li>
<li>滾動項(xiàng)10</li>
</ul>
</div>
<script type="module" src="./animation.js"></script>
</body>
</html>
在進(jìn)行具體的樣式設(shè)置之前，先來分析一下怎么做到無縫滾動，下圖中藍(lán)色容器的內(nèi)容才是可見的，想象兩個完全相同的列表項(xiàng)向上滑動，從最初的0%的位置滑動到100%的位置后，再次恢復(fù)到最初0%的位置，我們發(fā)現(xiàn)0%和100%的位置容器內(nèi)呈現(xiàn)的內(nèi)容是一樣的，也就是說用戶感知不到100%到0%的這個切換的抖動，如此循環(huán)下去就實(shí)現(xiàn)了無縫滾動的效果。因此實(shí)現(xiàn)無縫滾動效果需要注意兩個關(guān)鍵的點(diǎn)：
說明：通過類似的思路也可以實(shí)現(xiàn)橫向無縫滾動，推薦讀者動手去試試
接下來，我們就為滾動容器和滾動列表設(shè)置一些基本的CSS樣式，主要使用css的transform中的translate平移來實(shí)現(xiàn)列表向上滾動的動畫，@keyframes cl-scrolling定義了關(guān)鍵幀，translate(0px, 0%)表示列表最初的位置，translate(0px, -100%)表示y軸向上平移100%的位置，animation: cl-scrolling 6s infinite linear;表示在6s內(nèi)完成0%到100%的一次動畫并一直循環(huán)下去。顯然，滾動列表的高度不斷增加也會導(dǎo)致滾動的速度變快，因?yàn)?s內(nèi)要完成一次完整滑動，可能會導(dǎo)致滾動太快而導(dǎo)致感知不適。因此，這里并沒有在css中設(shè)置動畫，而是借助js調(diào)節(jié)合適的速率后再進(jìn)行設(shè)置動畫。
.cl-seamless-container {
overflow: hidden;
}
.cl-seamless-list {
margin: auto 0;
padding: auto 0;
/* 滾動快慢會受滾動列表項(xiàng)的高度影響，在js中調(diào)節(jié)速率進(jìn)行控制 */
/* animation: cl-scrolling 6s infinite linear; */
}
/* 鼠標(biāo)移入滾動區(qū)域變成手型 */
.cl-seamless-container:hover .cl-seamless-list {
cursor: pointer;
}
/* 鼠標(biāo)移入滾動區(qū)域暫停動畫 */
.cl-seamless-container.pause .cl-seamless-list {
animation-play-state: paused !important;
}
/* 動畫關(guān)鍵幀 */
@keyframes cl-scrolling {
from {
transform: translate(0px, 0%);
}
to {
transform: translate(0px, -100%);
}
}最后，我們需要編寫JavaScript代碼來控制滾動效果，JS代碼主要實(shí)現(xiàn)如下功能：
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";
// 調(diào)節(jié)滾動速率，使?jié)L動速率不至于過快或過慢
let scroll_speed=Math.max(4, Math.ceil(seamless_sub.clientHeight / 35));
seamless_sub.style="animation: cl-scrolling " + scroll_speed + "s infinite linear";
// 復(fù)制一份完全相同的列表，實(shí)現(xiàn)無縫滾動
seamless_container[i].innerHTML +=seamless_container[i].innerHTML;
}
// 監(jiān)聽鼠標(biāo)移入事件，暫停動畫; 同時鼠標(biāo)移出，繼續(xù)動畫
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();以上就是實(shí)現(xiàn)Web無縫滾動的基本方法，最終效果見開篇的gif動畫。
天就給大家分享一個用CSS3技術(shù)來實(shí)現(xiàn)的橫向滾動菜單效果，需要的朋友可以參考下：
具體實(shí)現(xiàn)效果圖如下：
鼠標(biāo)劃過導(dǎo)航按鈕時候，右側(cè)內(nèi)容會緩慢滑出顯示！
實(shí)現(xiàn)代碼如下：
html:
主要CSS：
該效果主要涉及到CSS3的動畫屬性，還有元素的隱藏 (overflow / visibility)； 大家可以根據(jù)自己的需求來美化更好的效果，這主要講解實(shí)現(xiàn)原理！
想學(xué)習(xí)更多知識，可以關(guān)注“恒星網(wǎng)絡(luò)”頭條號！
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
