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
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.
Table of Contents:
Understanding Scroll Bars
The below image shows 2 types of scroll bars:
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:
[image source]
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.
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.
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:
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:
[image source]
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:
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):
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.
#2) Scrolling in 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
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
please provide script of horizontal scrollbar. IN this script there is only vertical scroll bar