Home Guide How to Scroll Down or Up using Selenium Webdriver

How to Scroll Down or Up using Selenium Webdriver

By Jash Unadkat, Technical Content Writer at BrowserStack -

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 QAs 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 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.

This article will help QAs on automating horizontal and vertical scroll operations with Selenium.

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

A Scroll is a JavaScript method. The JavaScript Executor provides an interface that enables QAs to run JavaScript methods from Selenium scripts. Hence, to scroll up or down with Selenium, a JavaScript executor 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.

Now let’s discuss the Scroll operation in three scenarios:

  1. How to scroll down and up the webpage by a specific number of pixels?
  2. How to scroll to the bottom of the webpage using Selenium?
  3. How to scroll horizontally on the webpage?

How to Scroll down on a web page by defining the number of pixels in the Selenium script?

Refer to the Selenium script below, for performing a scroll down action on the Firefox browser.

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.testng.annotations.Test;

public class HandleScroll 
{

 @Test
 public void scrollDown()
         {
          System.setProperty("webdriver.gecko.driver","D://Selenium    Environment//Drivers//geckodriver.exe");
            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 Gecko driver 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 negative value (-350).

Refer to the script below:

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.testng.annotations.Test;

public class HandleScroll
{
     @Test
     public void scrollDown()

  {
      System.setProperty("webdriver.gecko.driver","D://Selenium Environment//Drivers//geckodriver.exe");

      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)", "");
   }

}

Try Selenium Testing For Free

How to scroll down to the bottom of the webpage using Selenium?

Refer to the Selenium script below

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.testng.annotations.Test;

public class HandleScroll

{
  @Test
  public void scrollDown()

  {

   System.setProperty("webdriver.gecko.driver","D://Selenium Environment//Drivers//geckodriver.exe");

   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 horizontally on a web page to a specific web element using Selenium?

Refer to the Selenium script below:

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.testng.annotations.Test;

public class HandleScroll 
{

     @Test
     public void ScrollHorizontally()

     {

        System.setProperty("webdriver.gecko.driver","D://Selenium Environment//Drivers//geckodriver.exe");
        WebDriver driver = new FirefoxDriver();

        JavascriptExecutor js = (JavascriptExecutor) driver;

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

         WebElement Element = driver.findElement(By.linkText("Auto Testing"));

         //This will scroll the page Horizontally till the element is found
         js.executeScript("arguments[0].scrollIntoView();", Element);

      }

}

Output: The code above starts the Firefox browser and navigates to the specified URL. Once the page loads, Selenium will automatically detect the specified element on the web page and will scroll horizontally until the element is fully visible in the browser window.

Testing the scroll function is non-negotiable, as it is one of the most fundamental features of a web page. Here’s where teams can prefer platforms like BrowerStack that helps them write a number of automated tests including operations like scrolling in Selenium for testing websites on multiple browsers like Chrome, Firefox, Safari. Besides BrowserStack also provides integrations with popular CI/CD tools such as Jenkins, CircleCI, Travis and more. One just needs to sign up and get started for free.

BrowserStack Logo Run Selenium Tests on 2000+ Browsers & Devices Get Started Free