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

如果你有自動化過現代網頁，肯定踩過這個雷：Selenium 測試寫好，按下按鈕，結果啥事都沒發生。原來按鈕根本還沒出現在畫面上，或是頁面還在載入更多商品。這就是動態、無限滾動網頁的日常，要讓自動化測試「看見」用戶實際看到的內容，真的很有挑戰性。以我多年網頁自動化的經驗來說，Selenium 裡的滾動操作，絕對不是加分題，而是測試穩不穩的分水嶺。

這篇文章會帶你搞懂為什麼 Selenium 的滾動這麼重要、怎麼處理懶加載清單、固定標頭等各種狀況，還有像 這類工具怎麼幫你大幅提升效率。我會分享實用程式碼、不同瀏覽器的注意事項，還有一些實戰經驗，讓你不再被測試搞到頭大，而是能真正信任自動化的結果。

Selenium 滾動的基本觀念

那「Selenium 滾動」到底是什麼？簡單說，就是用程式控制瀏覽器視窗的移動——不管是上下、左右，還是直接捲到某個元素——確保你要操作的東西真的出現在畫面上。Selenium WebDriver 預設不會自動幫你滾動，如果你點擊螢幕外的元素，常常就會遇到 ElementNotInteractableException ()。所以，精準又有意識的滾動，是 UI 自動化測試不可或缺的一步。

你在 Selenium 會用到的滾動方式有：

• 垂直滾動：上下移動頁面，顯示更多內容。
• 水平滾動：適合寬表格或橫向輪播。
• 滾動到元素：把特定元素帶到可見範圍，通常用 scrollIntoView。
• 按像素滾動：指定像素數量移動，適合漸進式滾動。
• 滾到頁首/頁尾：直接跳到頁面最上或最下。

為什麼這麼重要？因為現在的網頁超多動態元素——像無限滾動、載入更多按鈕、固定標頭、懶加載圖片等等。如果測試不能滾動，根本驗證不到大半 UI，bug 很容易漏掉，測試也會莫名其妙失敗 ()。

常見陷阱：

• 找到元素不代表它可見或能點。
• .click() 或 .sendKeys() 不會自動滾到元素。
• 固定標頭可能把元素蓋住，就算已經滾動也一樣。
• 無限滾動頁面要多次、分段滾動才能載入全部內容。

下面是個把元素滾到可見範圍的 Java 範例：

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

這樣就能確保目標元素出現在視窗頂端，不再出現「元素無法互動」的錯誤。

為什麼 Selenium 高效滾動對網頁測試超重要

現實是：大多數現代網頁都靠動態內容，只有滾動後才會顯示。根據最新數據，光用 jQuery 實現無限滾動的網站就超過 ，實際數量只會更多。如果你的 Selenium 測試從不滾動，等於直接忽略大半內容。 哪些情境一定要滾動？

• 無限/懶加載清單：社群動態、商品格狀列表、SaaS 儀表板。
• 「載入更多」按鈕：電商、新聞、目錄型網站。
• 隱藏按鈕或連結：只有滾動後才會出現的元素。
• 固定標頭：可能遮住內容，需要精確滾動定位。
• 大型表格或輪播：常需水平或容器內滾動。

效益：

• 提升測試覆蓋率：不只驗證初始畫面，連動態載入的元素都能檢查。
• 減少人工干預：不用再手動分段測試或人工滾動揭露內容。
• 自動化更穩定：減少「找不到元素」或「元素無法互動」等假失敗。

想像一個電商網站有 100 件商品，但每次只載入 20 件。如果測試沒滾動，只檢查了 20%，剩下 80% 完全沒驗證。高效滾動能讓你更快發現問題。

Selenium 滾動技巧全攻略

Selenium 沒有一個「scrollDown()」指令，但有很多方法可以做到滾動。下面是常見做法：

滾動到元素 vs. 按像素滾動

滾動到元素：
適合你已經知道目標元素時。

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

或用 Selenium 4 Actions API（Chrome/Edge）：

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

按像素滾動：
適合漸進式滾動或微調位置。

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

正值向下滾動，負值向上。

什麼時候用哪種？

• 精確定位建議用滾動到元素。
• 需要模擬用戶行為或分段載入時，用像素滾動。

滾到頁首/頁尾 & 處理無限滾動

滾到頁尾：

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

滾到頁首：

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

處理無限滾動：
要用迴圈：滾動、等新內容、重複直到不再載入。

1long lastHeight = (Long) js.executeScript("return document.body.scrollHeight");
2while (true) {
3    js.executeScript("window.scrollTo(0, document.body.scrollHeight);");
4    Thread.sleep(2000); // 實際測試建議用顯式等待！
5    long newHeight = (Long) js.executeScript("return document.body.scrollHeight");
6    if (newHeight == lastHeight) break;
7    lastHeight = newHeight;
8}

這種寫法能確保像真實用戶一樣載入所有內容 ()。

用 execute_script 玩出自訂滾動

進階一點時，JavaScript 的 execute_script 就是你的神隊友。你可以：

• 分段滾動，模擬用戶平滑操作。
• 每次滾動後等待內容載入。
• 在特定容器（如表格、輪播）內滾動。
• 處理特殊情境（如固定標頭、動態元素）。

範例：平滑分段滾動

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

範例：滾動後等待新內容

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

最佳實踐：

• 滾動後一定要搭配顯式等待新內容。
• scrollIntoView 可以用 {block: "center"} 參數提升可見性。
• 避免硬編碼 sleep，盡量用內容變化當等待條件。
• 容器內滾動可用 element.scrollTop = ... 或 element.scrollBy(...)。

針對不同瀏覽器優化 Selenium 滾動

這裡就有眉角了。不同瀏覽器對滾動的支援度不一樣：

• Chrome/Edge：完整支援 Actions API 跟 JavaScript。
• Firefox：JS 支援不錯，Actions API 部分支援，平滑滾動可能要調整。
• Safari：不支援 Actions API 滾動，只能用 JavaScript ()。
• 無頭模式：一定要設定視窗大小，不然滾動行為會怪怪的。

小撇步：

• 盡早在所有目標瀏覽器測試滾動邏輯。
• JavaScript 是最通用的滾動備案。
• 固定標頭時，可能要多滾幾個像素或用自訂 JS 避免遮擋。
• 無頭模式下，記得用 driver.manage().window().setSize(...) 設定視窗尺寸，確保滾動一致。

Thunderbit：用 AI 網頁爬蟲加速 Selenium 測試開發

來聊聊一個秘密武器：。Selenium 很適合驅動瀏覽器，但有時你需要「擷取」資料，尤其是大量滾動或動態內容頁面，這時 Thunderbit 就超好用。

Thunderbit 怎麼幫 Selenium：

• 無論無限滾動都能抓到所有資料：Thunderbit 的 AI 會自動滾動、分頁，還能擷取結構化資料（像商品名稱、價格、圖片），只要幾下點擊就搞定。
• 產生測試參考資料：先用 Thunderbit 快速收集所有預期 UI 資料，再讓 Selenium 滾動比對畫面。
• 加速測試開發：Thunderbit 的「AI 建議欄位」功能會幫你找出選擇器和結構，寫 Selenium 定位器更輕鬆。

範例流程：

1. 用 Thunderbit 抓取動態電商頁面所有商品（自動滾動並擷取）。
2. 把資料匯出到 Google Sheets 或 CSV。
3. Selenium 測試時，滾動頁面收集可見商品資訊，跟 Thunderbit 資料集比對。
4. 驗證所有商品都正確載入、沒漏掉。

這樣你就不用再寫一堆脆弱的爬蟲，把時間花在真正重要的驗證上。Thunderbit 的和排程爬蟲功能，對大型動態網站特別實用。

實戰範例：Selenium 測試中的高效滾動

來點實作。這裡有幾個常見情境和直接能用的程式碼：

1. 滾動大型表格

假設你有一個帶滾動條的資料表格：

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

這樣就能滾到表格底部。要逐列驗證可以分段滾動。

2. 處理無限滾動動態牆

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

這樣能載入所有貼文，直到沒有新內容。

3. 驗證懶加載圖片

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

把每張懶加載圖片滾到可見並確認已載入。

4. 輪播中的水平滾動

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

讓輪播向右滾動 300 像素。

5. 偵測內容載入失敗

每次滾動後，搭配顯式等待檢查新內容或 loading spinner。若超時，記錄狀態並標記失敗。

步驟指南：Selenium 高效滾動實作流程

這裡有一份實用檢查清單：

1. 判斷是否需要滾動：內容是不是隱藏、懶加載或分頁？
2. 確認元素存在：用顯式等待確保元素已經在 DOM 裡。
3. 選擇合適滾動方式：
   • 精確定位用滾動到元素。
   • 分段載入用像素滾動。
   • 無限滾動用迴圈。
4. 實作滾動：依情境用 JavaScript 或 Actions API。
5. 每次滾動後同步：等待新內容載入，避免死等。
6. 驗證內容：滾動後確認元素可見、已載入且可互動。
7. 針對瀏覽器優化：多瀏覽器測試，JS 是通用備案。
8. 整合 Thunderbit 擷取資料：用 Thunderbit 預先抓取或驗證大量資料。
9. 減少不必要滾動：只滾到需要的位置。
10. 註解邏輯：說明每種滾動方式的選擇原因。

結論與重點整理

高效滾動是現代 Selenium 網頁自動化的基礎。面對動態內容和無限滾動，測試必須像真實用戶一樣操作，才能真正驗證 UI。重點如下：

• 有目的地滾動：明確判斷何時、何處需要滾動，不要假設元素一定可見。
• 選對工具：精確定位優先用滾動到元素，彈性用 JavaScript，原生行為用 Actions API（支援時）。
• 同步與驗證：每次滾動後都要等待內容載入，並確認可見且正確。
• 多瀏覽器優化：各瀏覽器都要測試滾動邏輯，JS 是萬用備案。
• 善用 Thunderbit：結合 Selenium 跟 ，大幅加速資料擷取與驗證，特別適合大量滾動或動態頁面。

想讓 Selenium 測試更上一層樓？快試試 Thunderbit 的 ，讓測試開發更快更聰明。更多自動化技巧，歡迎逛逛 深入學習。

祝你滾動順利，測試都能找到該找的內容！

常見問題

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 驗證更容易、開發更快速，特別適合複雜或資料量大的網站。

更多 Selenium、網頁爬蟲與自動化實戰，歡迎逛逛 。