Selenium WebDriver - 滾動操作

當我們嘗試訪問網頁上的特定元素時，會在應用程式上執行滾動操作。根據需求，我們通常會進行垂直或水平滾動。

Selenium webdriver 可以使用 JavaScriptExecutor（一個介面）在網頁上執行滾動操作。Selenium WebDriver 可以使用 JavaScriptExecutor 執行 JavaScript 命令。

如何執行水平滾動？

可以使用 scrollBy 方法在網頁上執行水平滾動。scrollBy 方法有兩個引數 - 水平和垂直畫素值。由於 Selenium 本身無法執行滾動操作，因此我們將 scrollBy 方法與 JavaScriptExecutor 結合使用來實現此目的。

JavascriptExecutor javascriptExecutor = (JavascriptExecutor) driver;
javascriptExecutor.executeScript("window.scrollBy(2000,0)", "");

示例 - 水平滾動

讓我們以以下頁面為例，我們將在此頁面上執行水平滾動。

水平滾動幾個畫素後，頁面將如下圖所示。

HorizontalScrolls.java 類檔案中的程式碼實現。

package org.example;

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class HorizontalScrolls {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 12 secs
      driver.manage().timeouts().implicitlyWait(12, TimeUnit.SECONDS);

      // Opening the webpage where we will perform horizontal scroll
      driver.get("https://tutorialspoint.tw/selenium/practice/horizontal-scroll.php");

      // JavascriptExecutor to perform horizontal scroll by 20000, 0 pixels
      JavascriptExecutor javascriptExecutor = (JavascriptExecutor) driver;
      javascriptExecutor.executeScript("window.scrollBy(20000,0)", "");

   }
}

輸出

Process finished with exit code 0

最後，收到訊息程序已完成，退出程式碼為 0，表示程式碼已成功執行。

如何執行垂直滾動？

可以使用 scrollBy 方法在網頁上執行垂直滾動。scrollBy 方法有兩個引數 - 水平和垂直畫素值。由於 Selenium 本身無法執行滾動操作，因此我們將 scrollBy 方法與 JavaScriptExecutor 結合使用來實現此目的。

JavascriptExecutor javascriptExecutor = (JavascriptExecutor) driver;
javascriptExecutor.executeScript("window.scrollBy(0,600)", "");

示例 - 垂直滾動

讓我們再舉一個以下頁面的例子，我們將在此頁面上執行垂直向下滾動。

向下垂直滾動一些畫素後，我們將能夠訪問文字 - 在哪裡可以獲得一些？

VerticalScrolls.java 類檔案中的程式碼實現。

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class VerticalScrolls {
   public static void main(String[] args) throws InterruptedException {

      //Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      //adding implicit wait of 12 secs
      driver.manage().timeouts().implicitlyWait(12, TimeUnit.SECONDS);

      //Opening the webpage where we will perform vertical scroll
      driver.get("https://tutorialspoint.tw/selenium/practice/scroll-top.php");

      // JavascriptExecutor to perform vertical scroll by 0, and 1200 pixels
      JavascriptExecutor javascriptExecutor = (JavascriptExecutor) driver;
      javascriptExecutor.executeScript("window.scrollBy(0,1200)", "");

      // identify text
      WebElement t = driver.findElement
         (By.xpath("/html/body/main/div/div/div[2]/h3[3]"));
      System.out.println("Text found on vertical scroll is: " + t.getText());

      // quitting browser
      driver.quit();

   }
}

輸出

Text found on vertical scroll is: Where can I get some?

Process finished with exit code 0

在上面的示例中，我們向下垂直滾動了一些畫素並訪問了僅在向下滾動時可用的元素，控制檯中的訊息為 - 垂直滾動上找到的文字是：在哪裡可以獲得一些？

最後，收到訊息程序已完成，退出程式碼為 0，表示程式碼已成功執行。

如何執行垂直向下滾動到底部？

可以使用 scrollTo 方法垂直向下滾動到網頁底部。scrollTo 方法有兩個引數 - 水平和垂直畫素值。

JavascriptExecutor javascriptExecutor = (JavascriptExecutor) driver;
javascriptExecutor.executeScript
   ("window.scrollBy(0,document.body.scrollHeight)");

示例 - 垂直向下滾動到底部

讓我們再舉一個以下頁面的例子，我們將在此頁面上執行垂直向下滾動到底部。

向下垂直滾動到底部後，我們將能夠訪問文字 - 它來自哪裡？

PageDownScrolls.java 類檔案中的程式碼實現。

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class PageDownScrolls {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 12 secs
      driver.manage().timeouts().implicitlyWait(12, TimeUnit.SECONDS);

      //Opening the webpage where we will perform the scroll down
      driver.get("https://tutorialspoint.tw/selenium/practice/scroll-top.php");

      // JavascriptExecutor to scrolling to page bottom
      JavascriptExecutor javascriptExecutor = (JavascriptExecutor) driver;
      javascriptExecutor.executeScript("window.scrollBy(0,document.body.scrollHeight)");

      // access element at page bottom after scrolling
      String text = driver.findElement
         (By.xpath("/html/body/main/div/div/div[2]/h3[4]")).getText();
      System.out.println("Get text at page bottom: " + text);

      // quitting the browser
      driver.quit();
   }
}

輸出

Get text at page bottom: Where does it come from?

Process finished with exit code 0

在上面的示例中，我們已向下垂直滾動到底部並訪問了僅在向下滾動時可用的元素，控制檯中的訊息為 - 獲取頁面底部的文字：它來自哪裡？

最後，收到訊息程序已完成，退出程式碼為 0，表示程式碼已成功執行。

如何執行垂直向上滾動到頂部？

可以使用 scrollTo 方法垂直向下滾動到網頁底部。scrollTo 方法有兩個引數 - 水平和垂直畫素值。

JavascriptExecutor javascriptExecutor = (JavascriptExecutor) driver;
javascriptExecutor.executeScript
   ("window.scrollTo(document.body.scrollHeight, 0)");

示例 - 垂直向上滾動到頂部

讓我們再舉一個以下頁面的例子，我們將在此頁面上執行垂直向上滾動到頂部。與前面的示例一樣，我們將首先向下滾動到底部，然後再次向上滾動到頂部。

向下垂直滾動到底部後，我們將能夠訪問文字 - 它來自哪裡？

同樣，向上滾動到頂部後，我們將能夠訪問文字 - Selenium - 自動化練習表單。

PageUpScrolls.java 類檔案中的程式碼實現。

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class PageUpScrolls {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // Opening the webpage where we will perform the scrolling
      driver.get("https://tutorialspoint.tw/selenium/practice/scroll-top.php");

      // JavascriptExecutor to scrolling to page bottom
      JavascriptExecutor javascriptExecutor = (JavascriptExecutor) driver;
      javascriptExecutor.executeScript("window.scrollBy(0,document.body.scrollHeight)");

      // access element at page bottom after scrolling
      String text = driver.findElement
         (By.xpath("/html/body/main/div/div/div[2]/h3[4]")).getText();
      System.out.println("Get the text at page bottom: " + text);

      // JavascriptExecutor to scrolling to page top
      javascriptExecutor.executeScript("window.scrollTo(document.body.scrollHeight, 0)");

      // access element at page top after scrolling
      String text1 = driver.findElement
         (By.xpath("/html/body/div/header/div[2]/h1")).getText();
      System.out.println("Get the text at page top: " + text1);

      // quitting the browser
      driver.quit();
   }
}

輸出

Get the text at page bottom: Where does it come from?
Get the text at page top: Selenium - Automation Practice Form

Process finished with exit code 0

在上面的示例中，我們首先向下垂直滾動到底部並訪問了僅在向下滾動時可用的元素，控制檯中的訊息為 - 獲取頁面底部的文字：它來自哪裡？然後獲取了頁面頂部的文字，控制檯中的訊息為 - 獲取頁面頂部的文字：Selenium - 自動化練習表單。

最後，收到訊息程序已完成，退出程式碼為 0，表示程式碼已成功執行。

如何執行滾動到元素可見性？

可以使用 scrollIntoView 方法滾動到網頁上元素的可見性。

示例 - 滾動到元素可見性

讓我們再舉一個同一頁面的例子，我們將在此頁面上執行滾動到以下圖片中突出顯示的文字。

ScrollToViews.java 類檔案中的程式碼實現。

package org.example;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;

public class ScrollToViews {
   public static void main(String[] args) throws InterruptedException {

      // Initiate the Webdriver
      WebDriver driver = new ChromeDriver();

      // adding implicit wait of 15 secs
      driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

      // Opening the webpage where we will perform the scroll
      driver.get("https://tutorialspoint.tw/selenium/practice/scroll-top.php");
      WebElement text = driver.findElement
        (By.xpath("/html/body/main/div/div/div[2]/p[7]"));

      // JavascriptExecutor to scrolling to view of an element
      JavascriptExecutor javascriptExecutor = (JavascriptExecutor) driver;
      javascriptExecutor.executeScript("arguments[0].scrollIntoView();", text);

      // get text after scrolling
      System.out.println("Get text on after scrolling to element visibility: " + text.getText());

      // quitting the browser
      driver.quit();
   }
}

輸出

Get text on after scrolling to element visibility: Contrary to popular 
belief, Lorem Ipsum is not simply random text. It has roots in a piece of 
classical Latin literature from 45 BC, making it over 2000 years old. 
Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, 
looked up one of the more obscure Latin words, consectetur, from a Lorem 
Ipsum passage, and going through the cites of the word in classical 
literature, discovered the undoubtable source. Lorem Ipsum comes from 
sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" 
(The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a 
treatise on the theory of ethics, very popular during the Renaissance. 
The first line of Lorem Ipsum, "Lorem ipsum dolor 
sit amet..", comes from a line in section 1.10.32.

Process finished with exit code 0

在上面的示例中，我們已向下滾動到網頁上元素的可見性，然後獲取了其文字。

最後，收到訊息程序已完成，退出程式碼為 0，表示程式碼已成功執行。

這結束了我們關於 Selenium WebDriver - 滾動操作教程的全面介紹。我們從描述滾動操作的各種示例開始，例如如何按畫素執行垂直和水平滾動、如何執行垂直向下滾動到底部、如何執行向上滾動到頂部以及如何使用 Selenium 執行滾動到網頁上元素的可見性。這使您深入瞭解了 Selenium 中的滾動操作。明智的做法是不斷練習您學到的知識並探索與 Selenium 相關的其他知識，以加深您的理解並擴充套件您的視野。

列印頁面