如何在 Selenium 網頁測試中實現高效滾動

如果您曾經嘗試自動化現代網頁應用，大概很懂那種痛：您寫了一個 Selenium 測試，它點了一個按鈕，結果——砰，什麼都沒發生。後來才發現，那顆按鈕其實根本不在視窗範圍內，或者頁面在您捲動時還在繼續載入更多商品。這就是動態、無限捲動網頁的世界：要讓測試「看見」真實使用者看到的內容，往往就已經先花掉一半功夫。我做網頁自動化好多年了，可以很肯定地說：Selenium 裡的高效捲動不只是加分項——它決定了您的測試是脆弱、不穩定，還是足夠健壯、能直接上線使用。

接下來，我們會深入聊為什麼 Selenium 捲動這麼重要、如何處理從 lazy load 清單到黏性標頭的各種情境，以及像 Thunderbit 這類工具如何大幅加速您的工作流程。我也會分享實用程式碼、各瀏覽器的技巧，還有一些實戰心得，讓您別再跟測試對抗，而是開始信任測試結果。

了解 Selenium 捲動的基礎

那麼，「Selenium 捲動」到底是什麼意思？在網頁自動化裡，它指的是透過程式化方式移動瀏覽器的可視區域——往上、往下、往左、往右，或直接移到某個特定元素——讓您要操作的內容真正出現在畫面上。Selenium WebDriver 預設不會幫您捲動。如果您想點擊一個螢幕外的元素，常常會遇到令人頭痛的 ElementNotInteractableException（GeeksforGeeks）。這就是為什麼要做可靠的 UI 測試自動化，精準且有意圖的捲動是必須的。這份指南都以 Selenium 4.x 系列為基礎——wheel/scroll 輸入是在 Selenium 4.2 才加入，而且到最新的 4.43 版本仍然是目前的作法（Selenium downloads）。如果您還在用 Selenium 3，Actions API 的範例無法編譯，您就得改用後面會提到的 JavascriptExecutor 寫法。

以下是您在 Selenium 裡最常用的幾種捲動方式：

垂直捲動：把頁面往上或往下移，顯示更多內容。
水平捲動：適合寬表格或輪播內容。
捲動到元素：把特定元素帶到畫面中，通常會用 scrollIntoView。
依像素捲動：每次移動固定像素數，適合逐步捲動。
捲動到頂部/底部：直接跳到頁面最前或最後。

為什麼這很重要？因為現在的網頁充滿動態元素——例如無限捲動資訊流、「載入更多」按鈕、黏性標頭、以及 lazy-loaded 圖片。如果您的測試不會捲動，它就看不到（或無法驗證）一半的介面。結果就是，Bug 被漏掉，或測試因為完全不對的原因失敗（BrowserStack）。

常見陷阱：

找到元素，不代表它就可見或可點擊。
像 .click() 或 .sendKeys() 這類動作不會自動把元素捲到可視區域。
固定標頭可能會把元素蓋住，即使您已經捲過去了。
無限捲動畫面需要反覆、逐步捲動，才能把內容全部載入。

下面是一個快速的 Java 範例，示範把元素捲進畫面：

((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", element);

這樣可以確保目標元素出現在視窗頂端——不再有「元素無法互動」的錯誤。

為什麼 Selenium 的高效捲動對網頁測試很重要

說實話：大多數現代網頁應用都依賴要捲動之後才會出現的動態內容。根據近期資料，光是 jQuery 就有超過 516,000 個線上網站使用無限捲動，實際數字很可能還更高。如果您的 Selenium 測試從不捲動，就等於漏掉了應用程式裡很大一塊內容。 ChatGPT Image Nov 3, 2025, 02_44_20 PM (1).png 哪些情境需要捲動：

無限/延遲載入清單： 社群動態、商品格狀頁、SaaS 儀表板。
「載入更多」按鈕： 電商、新聞、目錄網站。
隱藏的按鈕或連結： 只有捲動後才出現的元素。
黏性標頭： 可能遮住元素，需要精準調整捲動位置。
大型表格或輪播： 常常需要水平捲動或容器內捲動。

測試情境	為什麼需要捲動
無限內容資訊流（例如社群媒體）	內容會隨著您捲動而載入。測試必須反覆捲動，才能載入並驗證所有項目。
「載入更多」分頁	額外項目在您捲動／點擊之前，不會出現在 DOM 中。
lazy-loaded 圖片	圖片只有在捲進可視區域後才會載入，測試必須捲動才能確認所有圖片都存在且已載入。
黏性標頭遮住內容	元素可能被標頭擋住，捲動時必須考慮遮擋問題。
大型可捲動表格／輪播	一次只會看到部分內容；測試必須捲動才能存取並驗證所有列／項目。

投資報酬：

提升測試覆蓋率： 您能驗證所有 UI 元素，不只是初始載入時看得到的那些。
降低人工成本： 不必再把測試拆開，或人工介入來把內容叫出來。
更可靠的自動化： 因為「找不到元素」或「無法互動」這類錯誤而產生的誤判更少。

想像一個電商網站有 100 個商品，但一次只載入 20 個。如果測試不捲動，就只檢查到目錄的 20%——剩下 80% 根本沒測到。高效捲動能讓您更快抓到更多 Bug。 ChatGPT Image Nov 3, 2025, 02_39_42 PM (1).png

所有捲動方式一次看：Selenium 捲動技術比較

Selenium 沒有單一的 scrollDown() 指令，但它提供了幾種方法讓您完成工作。簡單整理如下：

方法	瀏覽器支援	複雜度	最佳使用情境
Actions API（Wheel input）	Chrome、Edge（Selenium 4）	中等	原生、精準地捲到元素或依偏移量捲動
JavaScriptExecutor	所有瀏覽器	簡單	捲到元素、依像素捲動、或捲到頁面頂/底
鍵盤按鍵（Page Down 等）	所有瀏覽器	簡單	模擬使用者按鍵捲動
在元素內捲動	所有瀏覽器	中等	在容器、表格、輪播內部捲動

捲到元素與依像素捲動

捲到元素：
適合您已經很確定要看哪個目標時。

js.executeScript("arguments[0].scrollIntoView();", webElement);

或者，用 Selenium 4 Actions API（Chrome／Edge）：

new Actions(driver).scrollToElement(element).perform();

依像素捲動：
適合逐步捲動，或做位置微調。

js.executeScript("window.scrollBy(0, 350)", "");

正值代表往下捲，負值代表往上捲。

什麼時候用哪個？

若要精準與穩定，優先用捲到元素。
若是逐步載入、視差效果，或想模擬更接近人類使用者的捲動方式，就用依像素捲動。

捲到頁面頂部／底部與處理無限捲動

捲到底部：

js.executeScript("window.scrollTo(0, document.body.scrollHeight)");

捲到頂部：

js.executeScript("window.scrollTo(0, 0)");

處理無限捲動：
您需要一個迴圈：捲動、等待新內容、重複，直到沒有更多內容載入。

long lastHeight = (Long) js.executeScript("return document.body.scrollHeight");
while (true) {
    js.executeScript("window.scrollTo(0, document.body.scrollHeight);");
    Thread.sleep(2000); // 真正的測試請使用顯式等待！
    long newHeight = (Long) js.executeScript("return document.body.scrollHeight");
    if (newHeight == lastHeight) break;
    lastHeight = newHeight;
}

這種模式可以確保您把所有內容都載入，就像真實使用者那樣（Testsigma）。

用 `execute_script` 做 Selenium 自訂捲動

如果您要做的不只是基本操作，JavaScript 的 execute_script 就是您的好朋友。您可以：

分段捲動，模擬更平滑、更像使用者的行為。
每次捲動後等待內容載入。
在特定容器內捲動（例如表格或輪播）。
處理特殊情況（例如黏性標頭、動態元素）。

範例：平滑、分段捲動

for i in range(10):
    driver.execute_script("window.scrollBy(0, 500);")
    time.sleep(0.5)

範例：捲動後等待內容

js.executeScript("window.scrollTo(0, document.body.scrollHeight);");
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("new_element")));

最佳實務：

每次捲動都要搭配顯式等待，確認新內容已載入。
若需要更好的可視性，可在 scrollIntoView 裡使用 {block: "center"}。
避免硬編碼 sleep；要用跟內容變化綁定的等待條件。
對於容器，使用 JS 的 element.scrollTop = ... 或 element.scrollBy(...)。

針對不同瀏覽器最佳化 Selenium 捲動

接下來就有點講究了。不是每個瀏覽器處理捲動的方式都一樣：

Chrome / Edge / 其他 Chromium 系列瀏覽器（Brave、Opera、Arc）： Actions API 的 wheel input（scrollToElement、scrollByAmount、scrollFromOrigin）與 JavaScript 都完整支援。
Firefox： JavaScript 捲動可以正常運作。Actions API 的 wheel input 不受 geckodriver 支援——依 Selenium 文件說明，wheel actions 只適用於 Chromium。請改用 JavascriptExecutor。
Safari： 情況跟 Firefox 類似——safaridriver 沒有實作 wheel endpoint。請繼續使用 JavascriptExecutor 和 arguments[0].scrollIntoView(...)。
Headless 模式： 請設定明確的視窗大小（例如 driver.manage().window().setSize(...)，或 Chrome 使用 --window-size=1920,1080）。如果不設，視窗預設會很小，真實瀏覽器裡會顯示在螢幕外的內容，headless 環境可能就不會觸發 lazy-load。

技巧：

及早在所有目標瀏覽器上測試您的捲動邏輯。
把 JavaScript 當作通用的捲動備援方案。
遇到黏性標頭時，可能需要多捲幾個像素，或用自訂 JS 避免遮擋。
在 headless 模式下，記得用 driver.manage().window().setSize(...) 設定視窗大小，確保捲動行為一致。

Thunderbit：用智慧抓取加速 Selenium 測試開發

用 AI 擷取動態網頁資料 Get Started Free

Selenium 負責驅動瀏覽器，但不會自動幫您擷取資料——那些定位器、迴圈、斷言都得您自己寫。如果您正在測試的是動態、捲動量很大的頁面（商品格狀頁、社群資訊流、lazy-loaded 表格），Thunderbit 很適合當作搭檔工具：先把頁面交給它，讓它自動捲動、分頁並擷取結構化資料集，接著把那份資料集當成 Selenium 測試要對照的真實標準。比起自己手刻一個一次性的 scraper，這樣更快建立測試中「預期結果」的那一半。

Thunderbit 如何搭配 Selenium：

抓取所有資料，即使是無限捲動頁面： Thunderbit 的 AI 會幫您處理捲動迴圈和分頁，並回傳結構化列資料（商品名稱、價格、圖片），您可以匯出成 CSV 或 Sheets。
為測試產生參考資料： 用 Thunderbit 快速收集所有預期 UI 資料，再讓 Selenium 測試捲動並驗證介面是否一致。
加快測試開發： Thunderbit 的「AI 建議欄位」可以幫您找出選擇器與資料結構，讓 Selenium 的定位器更容易寫。

實作流程範例：

用 Thunderbit 抓取某個動態電商頁面的所有商品（它會自動幫您捲動並提取全部內容）。
將資料匯出到 Google Sheets 或 CSV。
在 Selenium 測試中，捲動整個頁面，收集可見的商品資訊，並與 Thunderbit 的資料集比對。
斷言所有商品都存在、都有正確載入，而且沒有資料遺漏。

這樣一來，您花在脆弱爬蟲程式上的時間更少，能拿來驗證真正重要的東西更多。Thunderbit 的 subpage scraping 和排程抓取功能，對大型、動態網站尤其好用。

試用 Thunderbit Chrome 擴充功能，實現智慧抓取

實戰範例：在真實 Selenium 測試案例中高效捲動

我們直接動手。以下是一些可以直接改寫的真實情境與程式碼：

1. 捲動大型表格

假設您有一個帶有自己捲軸的資料表：

WebElement table = driver.findElement(By.id("data-table"));
js.executeScript("arguments[0].scrollTop = arguments[0].scrollHeight", table);

這會把表格捲到底。如果您想在每一列出現時就驗證，可以改成分段迴圈。

2. 瀏覽無限捲動資訊流

prev_count = 0
while True:
    driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")
    time.sleep(2)
    posts = driver.find_elements(By.CSS_SELECTOR, ".post")
    if len(posts) == prev_count:
        break
    prev_count = len(posts)

這會載入所有貼文，直到沒有新內容出現為止。

3. 驗證 lazy-loaded 圖片

List<WebElement> images = driver.findElements(By.tagName("img"));
for (WebElement img : images) {
    if ("lazy".equals(img.getAttribute("loading"))) {
        js.executeScript("arguments[0].scrollIntoView(true);", img);
        WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(5));
        wait.until(d -> (Boolean) ((JavascriptExecutor)d).executeScript("return arguments[0].complete && arguments[0].naturalWidth > 0;", img));
        Assert.assertTrue((Integer) js.executeScript("return arguments[0].naturalWidth;", img) > 0);
    }
}

把每張 lazy 圖片捲進可視區域，並檢查它是否已載入。

4. 在輪播中水平捲動

WebElement carousel = driver.findElement(By.className("carousel"));
js.executeScript("arguments[0].scrollBy(300, 0);", carousel);

這會讓輪播往右捲動 300px。

5. 偵測內容載入失敗

每次捲動後，使用顯式等待檢查是否出現新內容或載入中的 spinner。如果逾時，就記錄狀態並標記失敗。

逐步指南：在 Selenium 中實作高效捲動

進一步了解資料抓取最佳實務 Get Started Free

這是您可以直接照做的檢查清單：

先判斷是否需要捲動： 內容是隱藏的、lazy-loaded，還是分頁載入？
確認元素存在： 用顯式等待確認元素已在 DOM 中。
選對捲動方式：
- 要精準就捲到元素。
- 要逐步載入就依像素捲動。
- 無限捲動就用迴圈。
實作捲動： 視情況使用 JavaScript 或 Actions API。
每次捲動後同步狀態： 等待新內容載入，別依賴固定 sleep。
驗證內容： 捲動後，確認元素可見、已載入、且可互動。
針對瀏覽器最佳化： 在所有目標瀏覽器上測試；必要時用 JS 作為備援。
整合 Thunderbit 做資料擷取： 用 Thunderbit 預先抓取或驗證大型資料集。
減少不必要的捲動： 只捲到必要的程度。
把邏輯寫清楚： 註解您為什麼選擇每一種捲動方式。

步驟	關鍵動作
判斷需求	這個情境是否需要捲動？
元素存在	等待元素出現在 DOM 中
選擇方法	元素、像素、迴圈或容器捲動
實作	視需要使用 JS／Actions／Keys
同步	每次捲動後等待內容
驗證	斷言可見性與正確性
瀏覽器最佳化	在 Chrome、Firefox、Edge、Safari 間測試
Thunderbit 整合	用於資料擷取／驗證
最小化	避免重複捲動
文件化	註解並說明做法

結論與重點整理

Selenium 的高效捲動，是穩健、現代化網頁測試自動化的基礎。面對無所不在的動態內容與無限捲動，您的測試必須像真實使用者一樣捲動，才能真正驗證 UI。最重要的是：

有目的地捲動： 先判斷何時、何處需要捲動，不要只是盲目期待元素會出現。
用對工具： 精準就用捲到元素；彈性高就用 JavaScript；原生行為則用 Actions API（在支援的瀏覽器上）。
同步與驗證： 每次捲動後都要等待內容載入，並斷言它可見且正確。
為所有瀏覽器做最佳化： 在各種瀏覽器上測試您的捲動邏輯，並把 JavaScript 當成通用備援。
善用 Thunderbit： 把 Selenium 與 Thunderbit 結合起來，加速資料擷取與驗證——尤其適合需要大量捲動或動態載入的頁面。

準備好把 Selenium 測試升級了嗎？可以試著整合 Thunderbit 的 Chrome 擴充功能，讓測試開發更聰明、更快速。如果您還想看更多自動化技巧，也可以到 Thunderbit 部落格看深度文章與教學。

用 Thunderbit 加速 Selenium 測試

祝您捲動順利——也希望您的測試永遠都能找到它們在找的東西。

常見問題

1. 為什麼 Selenium 有時會無法操作明明已經在 DOM 裡的元素？
因為 Selenium 不會自動把元素捲到可視區域。如果元素在畫面外，您可能會看到 ElementNotInteractableException。請先用捲動動作確保元素可見，再進行互動。

2. 在 Selenium 中處理無限捲動頁面的最佳方式是什麼？
用迴圈：捲到底部、等待新內容載入，然後重複，直到沒有更多內容出現。一定要使用跟內容變化綁定的顯式等待，不要用固定 sleep。

3. 我要怎麼讓捲動程式碼在所有瀏覽器都能運作？
JavaScript 的 execute_script 是最通用的方法。Actions API 在 Chrome／Edge 表現很好，但在 Safari 或舊版 Firefox 可能不支援。請務必在所有目標瀏覽器上測試您的邏輯。

4. 我可以在容器或表格內捲動，不只是主頁面嗎？
可以！用 JavaScript 在容器元素上設定 scrollTop 或 scrollBy。例如：js.executeScript("arguments[0].scrollTop = arguments[0].scrollHeight", tableElement);

5. Thunderbit 如何幫助 Selenium 測試自動化？
Thunderbit 的 AI 抓取可以從動態或無限捲動頁面中提取所有資料，為您的 Selenium 測試提供參考資料集。這讓您更容易驗證 UI 內容，也能加快測試開發——特別適合結構複雜、資料量大的網站。

6. 到 2026 年，我還需要手動寫捲動程式嗎，還是 Selenium 已經追上 Playwright 的自動捲動了？
Playwright 和新版 Cypress 會在互動前自動把元素捲進可視區域——但 Selenium WebDriver 目前還不會，而且從 4.x 系列來看，也沒有跡象顯示這件事會改變。所以，是的，在 Selenium 裡您還是得自己寫捲動（Chromium 用 Actions API，其他瀏覽器用 JavascriptExecutor）。如果您是從零開始建立新測試套件，而且團隊沒有既有的 Selenium 投資，那麼自動捲動確實是大家會選 Playwright 的原因之一。但如果您是在維護既有的 Selenium 套件——這其實是大多數團隊的情況——那麼這份指南中的做法，仍然是正確答案。

想了解更多 Selenium、網頁抓取與自動化最佳實務，歡迎造訪 Thunderbit 部落格。

試用適用於動態頁面的 AI 網頁爬蟲 Get Started Free