Selenium 简明教程

Selenium Webdriver - Scroll Operations

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

Scrolling operations are performed on an application when we try to reach a particular element on a web page. As per the requirement, we would normally do a vertical or a horizontal scrolling.

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

Selenium webdriver can be used to do scrolling actions on a web page with the help of the JavaScriptExecutor(an interface). Selenium Webdriver can execute the JavaScript commands using the JavaScriptExecutor.

How to Perform Horizontal Scroll?

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

The horizontal scroll on a web page can be done using the scrollBy method. The scrollBy method has two parameters - horizontal and vertical pixel values. Since Selenium cannot perform scroll operations on its own, we will use the scrollBy method along with JavaScriptExecutor for achieving this.

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

Example - Horizontal Scroll

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

Let us take the example of the below page, where we would perform a horizontal scrolling.

selenium scroll operations 1

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

On doing a horizontal scroll by a few pixels, we would get the page like the below image.

selenium scroll operations 2

HorizontalScrolls.java 类文件中代码实现。

Code Implementation on HorizontalScrolls.java class file.

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 ，表示代码成功执行。

Finally, the message Process finished with exit code 0 was received, signifying successful execution of the code.

selenium scroll operations 3

How to Perform Vertical Scroll?

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

The vertical scroll on a web page can be done using the scrollBy method. The scrollBy method has two parameters - horizontal and vertical pixel values. Since Selenium cannot perform scroll operations on its own, we will use the scrollBy method along with JavaScriptExecutor for achieving this.

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

Example - Vertical Scroll

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

Let us take another example of the below page, where we would perform a vertical scroll down.

selenium scroll operations 4

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

On doing a vertical scroll down by some pixels, we would be able to access the text - Where can I get some?

selenium scroll operations 5

VerticalScrolls.java 类文件中代码实现。

Code Implementation on VerticalScrolls.java class file.

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?

In the above example, we had performed a vertical scroll down by some pixels and accessed the element available only on scrolling down with the message in the console - Text found on vertical scroll is: Where can I get some?

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

Finally, the message Process finished with exit code 0 was received, signifying successful execution of the code.

How to Perform Vertical Scroll Down to Page Bottom?

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

The vertical scroll down to the bottom of the web page can be done using the scrollTo method. The scrollTo method has two parameters - horizontal and vertical pixel values.

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

Example - Vertical Scroll Down To Page Bottom

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

Let us take another example of the below page, where we would perform a vertical scroll down to the bottom of the web page.

selenium scroll operations 6

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

On doing a vertical scroll down to the page bottom, we would be able to access the text - Where does it come from?

selenium scroll operations 7

PageDownScrolls.java 类文件中代码实现。

Code Implementation on PageDownScrolls.java class file.

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?

In the above example, we had performed a vertical scroll down to the page bottom and accessed the element available only on scrolling down with the message in the console - Get text at page bottom: Where does it come from?

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

Finally, the message Process finished with exit code 0 was received, signifying successful execution of the code.

How to Perform Vertical Scroll Up to Page Top?

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

The vertical scroll down to the bottom of the web page can be done using the scrollTo method. The scrollTo method has two parameters - horizontal and vertical pixel values.

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

Example - Vertical Scroll Up To Page Top

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

Let us take another example of the below page, where we would perform a vertical scrolling up to the top of the web page. Like the previous example, we would first scroll down to page bottom and again scroll up to the page top.

selenium scroll operations 8

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

On doing a vertical scroll down to the page bottom, we would be able to access the text - Where does it come from?

selenium scroll operations 9

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

Again, on scrolling up to the page top, we would be able to access the text - Selenium - Automation Practice Form.

selenium scroll operations 10

PageUpScrolls.java 类文件中代码实现。

Code Implementation on PageUpScrolls.java class file.

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 。

In the above example, we had first performed a vertical scroll down to the page bottom and accessed the element available only on scrolling down with the message in the console - Get the text at page bottom: Where does it come from? Then obtained text at the page top with the message in the console - Get the text at page top: Selenium - Automation Practice Form.

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

Finally, the message Process finished with exit code 0 was received, signifying successful execution of the code.

How to Perform Scroll to Visibility of an Element?

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

The scrolling till the visibility of an element on a web page can be done with the help of the scrollIntoView method.

Example - Scroll to Element Visibility

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

Let us take another example of the same page, where we would perform a scrolling till the highlighted text on the below image.

selenium scroll operations 11

ScrollToViews.java 类文件中代码实现。

Code Implementation on ScrollToViews.java class file.

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

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

In the above example, we had performed a scroll down to the visibility of an element on a web page and then obtained its text.

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

Finally, the message Process finished with exit code 0 was received, signifying successful execution of the code.

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

This concludes our comprehensive take on the tutorial on Selenium Webdriver - Scroll Operations. We’ve started with describing various examples on scrolling operations like how to perform vertical and horizontal scrolls by pixels, how to perform vertical scroll down to page bottom, how to do a scroll up to page top, and how to perform scrolling up to the visibility of an element on a web page with Selenium. This equips you with in-depth knowledge of the Scroll operations in Selenium. It is wise to keep practicing what you’ve learned and exploring others relevant to Selenium to deepen your understanding and expand your horizons.