How to Scroll Up and Down in Selenium WebDriver

What is Scrollbar?


A Scrollbar is an interaction technique that allows us to scroll the continuous text, pictures or any other content in horizontal or verticle direction on a device’s screen when the web page scroll does not fit into the visible area of the screen.

It is used to view the content on a screen by scrolling the web page in up, down, left, or right.

There are mainly two types of scrollbar. They are horizontal and vertical scroll bars that can be seen in the below figure.

How to Scroll Up and Down in Selenium WebDriver

Let’s take different example scenarios based on the scrolling of the web page in Selenium.

How to Scroll Down Web Page by Pixel in Selenium?


To scroll down the web page by pixel in Selenium, we will use scrollBy() method provided by Javascript 1.2. This method scrolls the web page in the window by a specified number of pixels left or right and up or down. The syntax for scrollBy() method of Javascript is as follows:
Syntax:
           window.scrollBy(int x-pixels, int y-pixels);

The scrollBy() method is called by using the window object by passing the number of pixels as parameter values to the method.



The object of window is automatically created by the browser. The window object represents the browser’s window. All global variables, functions/methods, and objects of Javascript can be called by using the window object because they are automatically members of the window object.

Here, x-pixels is the numeric value passed to the method that represents the number of horizontal pixels by which we will scroll the window in the horizontal. x-pixels represents number at x-axis.


If the number passed is positive, the window moves to the left and moves to the right if number passed is negative.

y-pixels is a numeric value that represents vertical number of pixels. y-pixels represents number at the y-axis. If the number passed is positive then window scrolls to down whereas, if it is negative, window scrolls to up.

Let’s automate a simple scenario in which we will scroll web page down by 1000 pixels vertically.

Scenario to Automate:
a. Launch the Firefox web browser.
b. Open the website “https//www.yahoo.com“.
c. Scroll home page down by 1000 pixels vertical.

Let’s start coding to automate the above scenario.
Program source code 1:

package scrollUpandDown; 
import org.openqa.selenium.JavascriptExecutor; 
import org.openqa.selenium.WebDriver; 
import org.openqa.selenium.firefox.FirefoxDriver; 

public class VerticalScrollDown 
{ 
public static void main(String[] args) 
{ 
// Create driver object. 
   WebDriver driver = new FirefoxDriver(); 
// Maximizing the window. 
   driver.manage().window().maximize(); 
// Launch the application. 
   String url = "https://www.yahoo.com"; 
   driver.get(url); 

// Create the JavascriptExecutor interface object by Type casting of WebDriver instance. 
   JavascriptExecutor js = (JavascriptExecutor)driver; 
// Call scrollBy() method of Javascript using window object with passing number of pixels as parameter values. 
// Call executeScript() method of JavascriptExecutor interface with passing window.scrollBy() as parameter value. 
   js.executeScript("window.scrollBy(0,1000)"); // It will scroll down the page by 1000 pixel vertical 
  } 
}

Now, you execute the above code and observe that the web page is scrolled down by 1000 pixels vertical or not. 

How to Scroll Down Web Page by visibility of Element?


Let’s take an example where we will scroll down web page by the visibility of an element.

Scenario to Automate:
1. Launch the Firefox browser.
2. Open the URL “https://selenium08.blogspot.com/2020/02/vertical-scroll.html” in the Firefox browser.
3. Now, scroll the web page until the mentioned element is visible on the current page.



To scroll down the web page until the visibility of the mentioned element, we will use a scrollIntoView() method of Javascript. The scrollIntoView() method is used to scroll the web page or browser window until the mentioned element is visible on the screen. 

The syntax for scrollIntoView() method is as follows:
Syntax:
          element.scrollIntoView(alignTo)

This method accepts a boolean value that is optional. It does not return anything. A boolean value indicates the type of alignment.

Let’s see the source code to test the above scenario.
Program source code 2:

package scrollUpandDown; 
import org.openqa.selenium.JavascriptExecutor; 
import org.openqa.selenium.WebDriver; 
import org.openqa.selenium.WebElement; 
import org.openqa.selenium.firefox.FirefoxDriver; 

public class ScrollByVisibleElement 
{ 
public static void main(String[] args) 
{ 
// Create driver object. 
   WebDriver driver = new FirefoxDriver(); 
// Maximizing the window. 
   driver.manage().window().maximize(); 
// Launch the application. 
   String URL = "https://selenium08.blogspot.com/2020/02/vertical-scroll.html"; 
   driver.get(URL); 

// Locate web element "Health" by By.xpath. 
   WebElement element = driver.findElement(By.xpath("//a[text() = 'Health']")); 
// Create the JavascriptExecutor interface object by Type casting of WebDriver instance. 
   JavascriptExecutor js = (JavascriptExecutor)driver; 

// Call scrollIntoView() method of Javascript using magic variable arguments[0]. 
// Call executeScript() method JavascriptExecutor interface with passing arguments[0].scrollIntoView() as parameter values. 
    js.executeScript("arguments[0].scrollIntoView();", element); // It will scroll down the page by visibility of element "Health". 
   } 
}

In the statement “js.executeScript(“arguments[0].scrollIntoView()”, element );“, arguments[0] represents first index of page starting at 0 whereas,  ” element ” is the locator on the web page.

Now run the above test script and observe the output on the web page. Web page scrolls down until the visibility of the element or not. The output of the above scenario is shown in the below screenshot.

How to Scroll Down Web Page by visibility of Element?

How to Scroll Down at the bottom of Web page?


Let’s take the same URL as and we will scroll down till the bottom of the page. The scrollTo() method of Javascript scrolls until the end of the page. This method scrolls the web page to the specified coordinates. The syntax for the scrollTo() method is as follows:
Syntax:
         window.scrollTo(int x, int y)
This method accepts two integer values as parameters in pixels and returns nothing.
For example: 
    Scroll the web page to position “300” horizontally and “500” vertically:

          window.scrollTo(300, 500);

See the following source code step by step.

Program source code 3:

package scrollUpandDown; 
import org.openqa.selenium.JavascriptExecutor; 
import org.openqa.selenium.WebDriver; 
import org.openqa.selenium.firefox.FirefoxDriver; 

public class ScrollByPage 
{ 
public static void main(String[] args) 
{ 
// Create driver object. 
   WebDriver driver = new FirefoxDriver(); 
// Maximizing the window. 
   driver.manage().window().maximize(); 
// Launch the application. 
   String URL = "https://selenium08.blogspot.com/"; driver.get(URL); 

// Create the JavascriptExecutor interface object by Type casting of WebDriver instance. 
   JavascriptExecutor js = (JavascriptExecutor) driver; 
// Call scrollTo() method of Javascript using window object. 
   js.executeScript("window.scrollTo(0, document.body.scrollHeight)"); // It will scroll down until the end of the page .
  }
 }

In the preceding code, we have first launched the given URL in the Firefox browser and then scrolled till the end (bottom) of the page. We have passed two-argument values 0 (for horizontal scroll) and document.body.scrollHeight (for vertical scroll) to the scrollTo() method.

The statement “document.body.scrollHeight” returns the complete height of the body i.e web page.

How to scroll web page horizontal?


In this section, we will learn to scroll the web page horizontal.

Scenario to Automate:
1. Launch the web browser Firefox.
2. Open URL “https://selenium08.blogspot.com/2020/02/horizontal-scroll.html” on the browser.
3. Locate a web element “Relationship” by using By.xpath.
4. Scroll page horizontally until the mentioned visible element on the current page.

Let’s see the coding related to the above scenario.
Program source code 4:

package scrollUpandDown; 
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; 

public class ScrollHorizontal { 
 public static void main(String[] args) { 
// Create web driver object. 
   WebDriver driver = new FirefoxDriver(); 
// Maximizing the window. 
   driver.manage().window().maximize(); 
// Launch the application. 
   String url = "https://selenium08.blogspot.com/2020/02/horizontal-scroll.html"; 
   driver.get(url); 
  WebElement element = driver.findElement(By.xpath("//a[text() = 'Relationship']")); 

// Create the JavascriptExecutor interface object by Type casting of WebDriver instance. 
   JavascriptExecutor js = (JavascriptExecutor)driver; 
// Call scrollIntoView() method of Javascript using arguments[0]. 
   js.executeScript("arguments[0].scrollIntoView();", element); 
  } 
}

In the preceding code, we first launch the given URL in Firefox browser and then scroll web page horizontally until the mentioned element is visible on the current page.

Now run the above code and observe the output. When you will execute the above script, you will get the following output as shown in the below screenshot.

How to scroll web page horizontal

Final words
Hope that this tutorial has covered almost all important points related to scrolling the web page up and down through different scenarios.

I hope that you will have successfully performed all the above scenarios like scroll down on page by pixel, scroll down of page until the visible of the element, scroll down of page at the bottom of the page, and horizontal scroll on the web page.
Thanks for reading!!!
Next ⇒ Iframe in Selenium⇐ PrevNext ⇒

Leave a Comment