How To Handle Scroll Bar In Selenium Webdriver

By Sruthy

By Sruthy

Sruthy, with her 10+ years of experience, is a dynamic professional who seamlessly blends her creative soul with technical prowess. With a Technical Degree in Graphics Design and Communications and a Bachelor’s Degree in Electronics and Communication, she brings a unique combination of artistic flair…

Learn about our editorial policies.
Updated March 10, 2024

This tutorial explains Scroll Bars, types of Scroll Bars, and how to handle Scroll Bar in Selenium:

The scroll bar is a thin long section at the edge of the display of the computer. Using the scroll bar we can view the entire content or can view the complete page while scrolling up-down or left-right with the help of a mouse.

First, let us understand some terms like Knob, Track, and Buttons that are used with reference to scroll bars.

=> Check ALL Selenium Tutorials Here

Handling Scroll bar in Selenium

In this tutorial, we will learn about types of Scroll bars. We will also look at the Scroll bar in HTML, understand the implementation of code for handling Scroll bar in Selenium, and finally know the examples/applications where Scroll bars are commonly used.

Understanding Scroll Bars

The below image shows 2 types of scroll bars:

scrollbars types

What Are Knob, Track, And Buttons

Scroll bars have buttons on both ends of the bar which might be a forward button and backward button for horizontal scroll bar and upward and downward button for the vertical scroll bar.

Knob is the portion of the scroll bar that is movable. It can be moved left-right for a horizontal scroll bar and up-down for the vertical scroll bar.

Track is the section of the scroll bar on which Knob can be moved in order to view the complete content.

The below image clearly explains the concept:

Knob, Track, And Buttons

[image source]

Types Of Scroll Bars

types of scroll bars

Basically, there are of 2 types:

  • Horizontal Scroll bar
  • Vertical Scroll bar

#1) Horizontal Scroll bar 

A horizontal scroll bar lets the user scroll towards the left or right to view all the content on the window.

horizontal scroll bar

The above image shows a horizontal scroll bar highlighted in red. We can see the scroll bar can be moved left to right or vice versa to view the complete content displayed on the screen.

#2) Vertical Scroll bar 

A vertical scroll bar lets the user scroll up-down or vice versa to view the complete content on the window.

vertical scroll bar

The above image shows a vertical scroll bar highlighted in red. We can see that the scroll bar can be moved from up to downwards or vice versa to view the complete content displayed on the screen.

Usually, web pages have a lot of content and are good examples of having vertical scroll bars.

Scroll Bar In HTML

It is used very commonly on different websites, system applications, and almost everywhere. It allows users to fully view the content on the page either by upward-downward or left-right scrolling.

The below image is one such example created in Html:

scrollhtml

See following Html code for above image:

<html>
<head>  
	<title> Scroll Bar </title>
	<style type='text/css'>
	#text {
	width: 200px;
	height: 200px;
	border: 1px solid;
	font-size: 30px;
	overflow: scroll;
	text-align: center;
	}
	</style>
</head>

<body>
	<div id='text'>
	Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!
	Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!
	Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!
	Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!
	Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!
	</div>

</body>
</html>

Thus, we can see the Html page which when scrolled downward and upward with the help of a vertical scroll bar the complete content is viewable.

Code For Handling Scroll Bar In Selenium

Selenium handles scrolling operations in different ways. The different methods are as follows:

#1) Using in-built scroll option OR by using Actions class

Scrolling can be handled in Selenium using an in-built scroll option as shown in the below implementation code:

The syntax for scroll bar using in-built scroll options:

Actions act = <strong>new</strong> Actions(driver);               //Object of <em>Actions</em> class

act.sendKeys(Keys.<strong><em>PAGE_DOWN</em></strong>).build().perform();  //Page Down  

act.sendKeys(Keys.<strong><em>PAGE_UP</em></strong>).build().perform();           //Page Up 

Code for handling Scroll bar using an in-built scroll option.

package SeleniumPrograms;

import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;

public class Scroll {
      public static void main(String[] args) throws InterruptedException { 

          WebDriver dr = new FirefoxDriver();
          dr.manage().window().maximize();
          dr.get("https://opensource-demo.orangehrmlive.com/");         //testing webpage
		
          WebElement uname = dr.findElement(By.id("txtUsername"));        //username
          uname.sendKeys("Admin");
	
          WebElement pwd = dr.findElement(By.name("txtPassword"));     //password
          pwd.sendKeys("admin123");          

           WebElement login_button = 
dr.findElement(By.xpath("//input[@id='btnLogin']"));
           login_button.click();							//login button
		
           WebElement admin = dr.findElement(By.id("menu_admin_viewAdminModule"));
           admin.click();           

            WebElement job = dr.findElement(By.id("menu_admin_Job"));
            job.click();
            WebElement jobtitle_link = dr.findElement(By.linkText("Job Titles"));
            jobtitle_link.click();
		
            Actions act = new Actions(dr);
            act.sendKeys(Keys.PAGE_DOWN).build().perform();	//Page Down
            System.out.println("Scroll down perfomed");
            Thread.sleep(3000);
		
            act.sendKeys(Keys.PAGE_UP).build().perform();		//Page Up
            System.out.println("Scroll up perfomed");
            Thread.sleep(3000);
      }
}

In the above program code, scrolling is handled in Selenium using Actions class. This is done by creating an object of Actions class by passing the driver. Also, we have seen the use of an in-built scroll option for upward scrolling as well as for downward scrolling.

The output of the above code:

scrolldown1

[image source]

scrollup

Thus we can see Scroll Down and Scroll Up operations performed with the help of Selenium Webdriver using an in-built scroll option OR using the Actions class method.

#2) Using JavascriptExecutor OR by Pixel

This method helps in scrolling the webpage by mentioning the pixel count by which we wish to scroll either upward or downwards. Below is the implementation code for Scrolling by Pixel or using JavascriptExecutor.

package SeleniumPrograms;

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 ScrollBar {
        public static void main(String[] args) throws InterruptedException {
        WebDriver dr = new FirefoxDriver();
        dr.manage().window().maximize();
        
          dr.get("https://opensource-demo.orangehrmlive.com/");       //testing webpage
          
          WebElement uname = dr.findElement(By.id("txtUsername"));	 //username
          uname.sendKeys("Admin");
          WebElement pwd = dr.findElement(By.name("txtPassword"));	//password
          pwd.sendKeys("admin123");
          WebElement login_button = 
dr.findElement(By.xpath("//input[@id='btnLogin']"));
          login_button.click();							//loginbutton
          JavascriptExecutor js = (JavascriptExecutor)dr;
          js.executeScript("window.scrollBy(0,70)");			//Scroll Down(+ve)
          Thread.sleep(3000);
          System.out.println("Scrolled down..");          

          js.executeScript("window.scrollBy(0,-50)");			//Scroll Up (-ve)
          Thread.sleep(3000);
          System.out.println("Scrolled up..");
      }
}

The output of the above code:

scroll_down2

The above image shows scroll down performed by pixel value as mentioned in the above code by 70 (downwards). In the same way, Scroll up operation is then performed by providing pixel value = -50 (i.e. upwards).

The below image shows scroll up (by 50):

scroll_up2

Thus, in this method, we have used JavascriptExecutor and performed Scroll up and down by providing pixel values.

Examples/Applications

There are numerous applications or examples of scroll bars. Few of them are as described below:

#1) Scroll bars in Excel files:

As we know that excel files have a huge amount of data stored in it. It becomes difficult to view the whole content on a single page. Hence, scrolling can help the user to view the data that is not present on the current screen.

example_excel files

#2) Scrolling in Notepad

example_notepad

In the above image, scroll bars can be seen horizontally and vertically, providing complete visibility of data in the notepad document.

#3) Use of Scroll bar in browsers

example_browsers
While reading the data we can see only half data on the browser screen. Scrolling helps to move forward-backward and up-down for having the entire view. Hence, by making use of horizontal and vertical Scroll bars the complete browser screen’s content can be viewed.

There are many more such examples which help the users to view the complete data displayed on the screen.

Conclusion

In this tutorial, we have learned about scroll bars, their types. We have also seen to create and use the scroll bar in HTML Page

We have understood the methods of implementing code for handling scroll bars using Selenium i.e. in-built scroll option/using actions class and using JavascriptExecutor/by Pixel and went through few applications where scroll bars are commonly used.

=> Read Through The Complete Selenium Guide

Was this helpful?

Thanks for your feedback!

1 thought on “How To Handle Scroll Bar In Selenium Webdriver”

Leave a Comment