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.com/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.com/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.com/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.com/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.com/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 相关的其他知识，以加深您的理解并扩展您的视野。

打印页面