Selenium 简明教程

Selenium Webdriver - Scroll Operations

当我们尝试访问网页上的特定元素时，会在应用程序上执行滚动操作。根据要求，我们通常会进行垂直或水平滚动。

Selenium webdriver 可用于在网页上执行滚动操作，借助 JavaScriptExecutor（一个接口）。Selenium Webdriver 可以使用 JavaScriptExecutor 执行 JavaScript 命令。

How to Perform Horizontal Scroll?

可以使用 scrollBy 方法在网页上进行水平滚动。scrollBy 方法有两个参数 - 水平和垂直像素值。由于 Selenium 无法自行执行滚动操作，因此我们将在使用 scrollBy 方法的同时使用 JavaScriptExecutor 来实现此操作。

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

Example - Horizontal Scroll

让我们举一个下面这个页面的例子，在该页面中我们将执行水平滚动。

水平滚动几个像素后，我们得到一个像下面的图片一样的页面。

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://www.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

最后，收到了消息 Process finished with exit code 0 ，表示代码成功执行。

How to Perform Vertical Scroll?

可以利用 scrollBy 方法完成网页的垂直滚动。scrollBy 方法有 2 个参数 - 水平和垂直像素值。由于 Selenium 无法独自执行滚动操作，我们将利用 scrollBy 方法和 JavaScriptExecutor 来实现此操作。

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

Example - Vertical Scroll

让我们再来看下面这个页面的另一个示例，其中我们将执行垂直向下滚动。

垂直向下滚动一些像素后，我们将能够访问文本 - Where can I get some?

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://www.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

在上面的示例中，我们已经垂直向下滚动了一些像素，并访问了仅在向下滚动后才可用的元素，并且控制台中的消息为 - Text found on vertical scroll is: Where can I get some?

最后，收到了消息 Process finished with exit code 0 ，表示代码成功执行。

How to Perform Vertical Scroll Down to Page Bottom?

可以利用 scrollTo 方法完成垂直滚动到底部的网页。scrollTo 方法有 2 个参数 - 水平和垂直像素值。

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

Example - Vertical Scroll Down To Page Bottom

让我们再来看下面这个页面的另一个示例，其中我们将执行垂直向下滚动到网页底部的操作。

垂直向下滚动到页面底部后，我们将能够访问文本 - Where does it come from?

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://www.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

在上面的示例中，我们已经垂直向下滚动到底部，并访问了仅在向下滚动后才可用的元素，并且控制台中的消息为 - Get text at page bottom: Where does it come from?

最后，收到了消息 Process finished with exit code 0 ，表示代码成功执行。

How to Perform Vertical Scroll Up to Page Top?

可以利用 scrollTo 方法完成垂直滚动到底部的网页。scrollTo 方法有 2 个参数 - 水平和垂直像素值。

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

Example - Vertical Scroll Up To Page Top

让我们再来看下面这个页面的另一个示例，其中我们将执行垂直向上滚动到网页顶部。类似于前面的示例，我们首先要向下滚动到页面底部，然后再次向上滚动到页面顶部。

垂直向下滚动到页面底部后，我们将能够访问文本 - Where does it come from?

同样，向上滚动到页面顶部后，我们将能够访问文本 - Selenium - Automation Practice Form 。

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://www.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

在上面的示例中，我们首先已经垂直向下滚动到底部，并访问了仅在向下滚动后才可用的元素，并且控制台中的消息为 - 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 ，表示代码成功执行。

How to Perform Scroll to Visibility of an Element?

利用 scrollIntoView 方法可以一直滚动到网页上某个元素可见。

Example - Scroll to Element Visibility

让我们再来看同一页面的另一个示例，其中我们将一直滚动到下图上的突出显示文本。

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://www.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

在上面的示例中，我们已经向下滚动到某个网页元素的可见性，然后获取文本。

最后，收到了消息 Process finished with exit code 0 ，表示代码成功执行。

这总结了我们对 Selenium Webdriver - 滚动操作教程的全面理解。我们已经开始描述各种滚动操作示例，例如如何按像素执行垂直和水平滚动、如何执行垂直向下滚动到页面底部、如何执行向上滚动到页面顶部以及如何执行向下滚动到网页元素在其上的可见性，这些都使用 Selenium。这使你对 Selenium 中的滚动操作有了深入的了解。明智的做法是不断练习你所学到的知识，探索与 Selenium 相关的其他内容，以加深你的理解并扩展你的视野。