Post
Ask Question

How To Perform Scroll Operations Using JavaScript Executor In Selenium WebDriver

Introduction

 
In this article, will discuss performing scroll operations using Javascript.
 
In my last article, I explained JavascriptExecutor and covered the below points:
As I have mentioned in my above article, JavascriptExecutor is used to perform javascript operations in a web browser from a Selenium webdriver.
 
Selenium webdriver doesn't provide any methods for performing scroll operations in the browser.
 
Due to this reason, we have to use Javascript to perform these scroll operations.
 
There are three important methods available in Javascript to perform these operations, including:
  • Scroll/ScrollTo
  • ScrollBy
  • ScrollIntoView
Here, the first two methods are dependent on the webpage completely. The last method is dependent on the element on the webpage.
 
As we all know, the browser renders the HTML content in the browser window, so the scroll bars (horizontal and vertical) are applicable to the browser window.
 
Using Javascript, if we want to handle these scroll operations, then we need to perform them on the window object.
 
That means that whatever method we are going to use to perform these scroll operations is available on the window object.
 

Scroll/ScrollTo

 
Scroll and ScrollTo methods are almost similar.
 
These methods are used for performing scroll operations to a specific position on the webpage by providing x and y coordinate values.
 
Syntax
  1. window.scrollTo(x-coordinate, y-coordinate);  
Parameters
 
x-coordinate
 
It is the pixel along the horizontal axis of the webpage that you want to display in the upper-left portion.
 
y-coordinate
 
It is the pixel along the vertical axis of the webpage that you want to display in the upper-left portion.
 
Usage in Selenium code:
  1. String javascript = "window.scrollBy(0,500)";  
  2. JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;  
  3. jsExecutor.executeScript(javascript);  

ScrollBy

 
This method is used to perform a scroll operation to the new coordinates with respect to the current position on the webpage by moving x and y coordinate amount values.
  
Here the scrollTo and scrollBy methods look very much similar, but there is a big difference.
 
In scrollTo, it will scroll to the new coordinates without considering the current position(coordinates).
 
For example...
 
My webpage is already scrolled to the bottom of the page. Now if I perform scrollTo(0, 150), then it will take me to that coordinates on the webpage.
 
That means it doesn't consider the current position.
 
In scrollBy, it will scroll to the new coordinates with considering the current position(coordinates).
 
For example:
 
My webpage is already scrolled to the bottom of the page. Now if I perform scrollBy(0, 150), then it will not scroll the webpage to any new coordinates.
 
That is because we are already at the bottom of the webpage and there is no scrollamount left to scroll.
 
So that means it will consider the current position and then it will go to the new coordinates by adding the provided x and y coordinates to the current position.
 
Syntax
  1. window.scrollBy(x-coordinate, y-coordinate);

Parameters

 
x-coordinate
 
It is the horizontal pixel value that you want to scrollby.
 
y-coordinate
 
It is the vertical pixel value that you want to scrollby.
 
Usage in Selenium code:
  1. String javascript = "window.scrollBy(0,500)";  
  2. JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;  
  3. jsExecutor.executeScript(javascript);  

ScrollIntoView

 
This method is used to bring the element's parent into the window (browser viewport) so that the user can see that element.
 
Syntax
  1. element.scrollIntoView();  
Here you can find the element in two ways:
Usage in Selenium code
 
(When an element is found by the Selenium webdriver)
  1. WebElement loginBtn = driver.findElement(By.id("login"));  
  2. String javascript = "arguments[0].scrollIntoView()";  
  3. JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;  
  4. jsExecutor.executeScript(javascript, loginBtn);  
Usage in Selenium code
 
(When an element is found by Javascript)
  1. String javascript = "document.getElementById('login').scrollIntoView()";  
  2. JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;  
  3. jsExecutor.executeScript(javascript);  

Conclusion 

 
This is how we perform scroll operations using JavascriptExecutor in Selenium webdriver.
 
If you are interested in watching the full information explained in a video, please watch this video
 
In my next article, we will see how we can highlight web elements on the webpage using JavascriptExecutor.
 
I hope you found this article useful. Please provide your valuable feedback, questions, or comments below.


Similar Articles