How Do You Handle Scrollbar in Selenium?

Dapheny Murphy Dapheny Murphy | January 23, 2023

How Do You Handle Scrollbar in Selenium?

Selenium is one of the most widely used test automation frameworks for web automation testing. As far as the framework is concerned, Selenium WebDriver is the most vital component for automated browser testing. Before deep-diving into how to perform scroll operations (e.g., scroll down, scroll up, horizontal scroll, etc.) using Selenium, let us take a quick look at the hierarchy of classes and interfaces in Selenium WebDriver.

The search context is the super interface in Selenium. The remote WebDriver class implements the methods in WebDriver – Search Context, Takes Screenshot, and JavaScriptExecutor interfaces.

Interfaces And Classes

Scrolling is an essential feature for using any web page on the internet. It doesn’t matter what content a web page hosts, it is almost never possible to place all content on the first fold and do away with the scroll bars, both horizontal and vertical.

For QA specialists to roll out robust and bug-free web applications, they need to ensure that web pages are thoroughly tested. They especially need to verify that every single UI element is functioning as expected. To do so quickly, they use test automation frameworks like Selenium.

Selenium WebDriver is capable of manipulating the Document Object Model (DOM), and hence it doesn’t require a scroll to perform certain actions. However, in some cases, there are certain web elements (for example, a submit button) that become visible only once the user has scrolled down. In such cases, automating the scroll operation becomes necessary.

Before starting with Selenium Scroll operations, let’s quickly understand the role of a JavaScriptExecutor in performing the Scroll operation.

A Scroll is a JavaScript method. The JavaScriptExecutor provides an interface that enables QA experts to run JavaScript methods from Selenium scripts. Hence, to scroll up or down with Selenium, a JavaScriptExecutor is a must.

Scroll Functions Can Be Defined as Follows:

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("window.scrollBy(0, 250)");

The scrollBy() method involves two parameters, x, and y, that represent the horizontal and vertical pixel values, respectively.

 

How to Scroll Down on a Web Page in Selenium by Defining the Number of Pixels?

Refer to the script below, for performing Selenium scroll-down action on the Firefox browser:

public class HandleScroll
{
   @Test
   public void scrollDown()
    {
     System.setProperty("webdriver.gecko.driver","Driver Location");
     WebDriver driver = new FirefoxDriver();
     driver.navigate().to("Website URL");

     //to perform Scroll on application using Selenium
     JavascriptExecutor js = (JavascriptExecutor) driver;
     js.executeScript("window.scrollBy(0, 350)");
    }
}

Output: The code initializes the Geckodriver for Firefox. Then the Firefox browser is launched, and it navigates to the specified website URL. Once the website loads, the browser window is vertically scrolled down by 350 pixels.

If a user needs to scroll up, they just need to modify the pixel value of the second parameter (in this case 350) to a negative value (-350).

Refer to the script below:

public class HandleScroll
{
   @Test
   public void scrollDown()
    {
     System.setProperty("webdriver.gecko.driver","Driver Location");
     WebDriver driver = new FirefoxDriver();
     driver.navigate().to("Website URL"); // Specify the website URL

     //to perform Scroll on application using Selenium
     JavascriptExecutor js = (JavascriptExecutor) driver;
     js.executeScript("window.scrollBy(0, -350)");
    }
}

 

How to Scroll Down to an Element in Selenium Until It Is Visible?

Refer to the Selenium script below:

public class ScrollByVisibleElement
{
   WebDriver driver;
  @Test
  public void ByVisibleElement()
   {
     System.setProperty("webdriver.gecko.driver", "Driver Location");
    WebDriver driver = new FirefoxDriver();

    //Launch the application
    driver.get("Website URL");

     //Locating element by link text and store in variable "Element"
    WebElement Element = driver.findElement(By.linkText("Try Selenium Testing For Free"));

    JavascriptExecutor js = (JavascriptExecutor) driver;
     // Scrolling down the page till the element is found
     js.executeScript("arguments[0].scrollIntoView();", Element);
    }
}

 

How to Scroll Down to the Bottom of the Webpage Using Selenium?

Refer to the Selenium script below:

public class HandleScroll
{
  @Test
  public void scrollDown()
   {
    System.setProperty("webdriver.gecko.driver","Drive Location");
    WebDriver driver = new FirefoxDriver();
    driver.navigate().to("Website URL"); // Specify the Website URL

    //to perform scroll on an application using Selenium
    JavascriptExecutor js = (JavascriptExecutor) driver;
    js.executeScript("window.scrollBy(0,document.body.scrollHeight)");
   }
}

Output: The code above will fetch the maximum height of the webpage from the Document Object Model, and then the scrollBy() method scrolls down to the bottom.

 

How to Scroll the Page to the Left in a Horizontal Direction Using Selenium Java?

When performing automated browser testing of websites (or web apps), there are times when the page under test has to be scrolled in a horizontal as well as vertical direction. When scrolling in the horizontal direction, you have the option to scroll either to the left or right of the page.

To scroll to the left of a webpage in a horizontal direction, use the below implementation in the automation test:

public class HorizontalLeft
{
  public static void main(String[] args)
   {
     System.setProperty("webdriver.gecko.driver","D://Selenium Environment//Drivers//geckodriver.exe");
    WebDriver driver = new FirefoxDriver();
     driver.get("Website URL");
     driver.manage().window().maximize();
     driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
     JavascriptExecutor js = (JavascriptExecutor) driver;
     js.executeScript("window.scrollBy(6000, 0)");
     try
     {
     Thread.sleep(4000);
     }
     catch (InterruptedException e)
     {
     e.printStackTrace();
     }
    js.executeScript("window.scrollBy(-3000, 0)");
   }
}

New call-to-action

Disclaimer

This publication is for informational purposes only and nothing contained in it should be considered legal advice. We expressly disclaim any warranty or responsibility for damages arising out of this information and encourage you to consult with legal counsel regarding your specific needs. We do not undertake any duty to update previously posted materials.

Post a Comment

We use cookies to optimize user experience. Click on "Agree and Proceed" to confirm, OR, by continuing, you implicitly accept cookies.