How To Perform Scroll Operations Using JavaScript Executor In Selenium WebDriver

Introduction

This article will discuss performing scroll operations using Javascript.

In my last article, I explained JavascriptExecutor and covered the following 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

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

String javascript = "window.scrollBy(0, 500)";
JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
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 the x and y coordinate amount values.

Here the scrollTo and scrollBy methods look very 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 the coordinates on the webpage.

That means it doesn't consider the current position.

In scrollby, it will scroll to the new coordinates while 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 scroll amount 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

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

String javascript = "window.scrollBy(0, 500)";
JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
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

element.scrollIntoView();

Here you can find the element in two ways.

Usage in Selenium code

(When an element is found by the Selenium webdriver)

WebElement loginBtn = driver.findElement(By.id("login"));
String javascript = "arguments[0].scrollIntoView()";
JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
jsExecutor.executeScript(javascript, loginBtn);

Usage in Selenium code

(When an element is found by Javascript)

String javascript = "document.getElementById('login').scrollIntoView()";
JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
jsExecutor.executeScript(javascript);

Conclusion

This is how we perform scroll operations using JavascriptExecutor in Selenium webdriver.

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.