How to Scroll an Element into View in Selenium?

A high-level programming language that helps users in building web applications is called Java. It is not only used for creating web applications but it can also be used for automating web applications through various automation tools. Selenium is one such tool, which gives users the capability to automate from scratch to end, whether it is opening a web [age, clicking on an element, scrolling the web page, etc. In this article, we will focus on scrolling an element into view through two different approaches, i.e., using JavascriptExecutor and Actions.

There are 2 different approaches to scroll an element into view in Selenium, which are as follows:

1. Using JavascriptExecutorDriver
2. Using Actions

The JavaScriptExecutorDriver is used when certain actions cannot be performed through the usage of Selenium in-built functions and we need some external class to perform such actions. One such action is scrolling of elements into view, that cannot be performed by Selenium in-built functions. In this approach, we will see how we can scroll an element into view using JavascriptExecutorDriver in Selenium.

Syntax:

JavascriptExecutor js = (JavascriptExecutor) driver;

js.executeScript("arguments[0].scrollIntoView();", element);

Here,

• element: It is the element that has to be brought into view by scrolling.

Example of JavascriptExecutorDriver:

In this example, we have opened the Geeks For Geeks (link) website, and then we have found the element having the text 'Problem of the day'. Further, we have scrolled to that element using JavascriptExecutorDriver.

Output of JavascriptExecutorDriver:

The Actions is used when the users want web driver to perform numerous actions one after another. This method is great but has certain limitations with it as the moveToElement function which is used in it moves the mouse cursor to the center of the element. It doesn't make sure if the element is visible within the viewport or not. Thus, limiting the webdriver to perform further action on the element. In this approach, we will see how we can scroll an element into view using Actions in Selenium.

Syntax:

Actions a = new Actions(driver);

a.moveToElement(element).perform();

Here,

• element: It is the element that has to be brought into view by scrolling.

Example of Actions:

In this example, we have opened the Geeks For Geeks (link) website, and then we have found the element having the text 'Problem of the day'. Further, we have scrolled to that element using Actions.

Output of Actions:

In conclusion, Selenium can handle only the elements that are visible within the viewport. Thus, scrolling of elements is very crucial for the elements currently out of viewport so that further actions of that element could be performed successfully. The technique of scrolling through JavascriptExecutorDriver is the recommended approach as it gives users the choice to control the web page through Javascript code and is comparatively faster than the other approach. I hope the various ways stated in the article will help you in scrolling an element into the view in Selenium.