Perform Scrolling Actions In Selenium - Part 1

Introduction

In the last Selenium tutorial, we learned how to perform basic actions such as clicking and sending keystrokes. In this tutorial, we will learn how to do another action, which is the scrolling action.

Goals

At the end of the tutorial, you would have learned:

1. How to perform scroll actions in Selenium

Tools Required

1. A Java IDE such as IntelliJ IDEA version 2022.2.1 (Community Edition).

Prerequisite Knowledge

1. Basic Selenium.
2. Selenium IDE.
3. Basic Spring.
4. Selenium Interactions.

Project Setup

To follow along with the tutorial, perform the steps below:

1. Clone this repository, switching to the scrolling branch.

Selenium Cannot Interact With Elements Outside The Viewport

Because Selenium follows the WebDriver specs, it cannot interact with elements that are outside the viewport. The WebDriver specification states,

If the element is outside the viewport, an element not interactable error is returned.

If you want to interact with elements outside the viewport, then you should instruct Selenium to scroll the page until those elements are visible. We will learn how to do this next.

Let Selenium Decides How To Scroll To Elements

Even though Selenium cannot interact with elements outside the viewport, it can obviously still see all the element in the DOM tree. If an element is not interactable, and Selenium can see it in the DOM, then Selenium will attempt to scroll until the element is in the viewport. The beauty of this is that you do not have to tell Selenium which direction to scroll to.

1. In the screenshot below, the link Last Link is all the way at the bottom of the viewport.
   

2. To have Selenium scroll down and then click on the “Final resource” link, you can use the code below.

    @Test
    void automaticScrollDown() {
      driver.get("http://localhost:" + port + "/start");
   
      var link = driver.findElement(By.linkText("Last Link"));
   
      //link.click(); //First way
   
      //Second way
      new WebDriverWait(driver, Duration.ofSeconds(5))
            .until(ExpectedConditions.elementToBeClickable(link))
            .click();
    }

Note that the example above shows two different ways of doing this. click() is super simple and should work in most cases. At some other times, though, you might need to wait until the content of the page is loaded after scrolling (think of lazy news feed). This is when you should have to wait.

Not only Selenium can scroll down, we can also have Selenium automatically scroll up to find the element. In the screenshot below, the “First Link” link is all the way at the top of the page.

The code example below is an example of how to have Selenium automatically scrolls up. Because Selenium first opens the browser at the top, we will have to make the browser scrolls to the bottom first by sending over the “End” key.

   @Test
  void automaticScrollUp(){
     driver.get("http://localhost:" + port + "/start");

     // Scrolls to end of page
     new Actions(driver)
           .sendKeys(Keys.END)
           //.keyDown(Keys.COMMAND) // For Mac
           //.sendKeys(Keys.DOWN)
           .perform();

     var link = driver.findElement(By.linkText("First Link"));
     link.click();

/*    new WebDriverWait(driver, Duration.ofSeconds(5))
           .until(ExpectedConditions.elementToBeClickable(link))
           .click();*/
  }

Notice that, in both examples, we did not have to tell Selenium which direction to scroll (up or down) at all. Selenium can automatically figure this out by itself.

Summary

We have learned how to perform a scrolling action using Selenium. If you want to learn more scrolling use cases, check out Part 2. The full project code can be found at https://github.com/dmitrilc/Daniweb_Selenium/tree/scrolling.