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.

How to Scroll an Element into View in Selenium?

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

1. Using JavascriptExecutorDriver
2. Using Actions

Using JavascriptExecutorDriver

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.

Java

//Importing the Selenium libraries
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.By;

public class selenium3 {
    public static void main(String[] args) {
         
           //specify the location of the driver
           System.setProperty("webdriver.chrome.driver",
"C:\\Users\\Vinayak Rai\\Downloads\\chromedriver-win64\\chromedriver-win64\\chromedriver.exe");
     
           //Initialising the driver
           WebDriver driver = new ChromeDriver();
     
           //Launch the website
           driver.get("https://www.geeksforgeeks.org/");
           
           // Maximize the screen
           driver.manage().window().maximize();
           
           // Stating the Javascript Executor driver
           JavascriptExecutor js = (JavascriptExecutor) driver; 
           
           // Find Problem of the day text
           WebElement element = driver.findElement(By.xpath("// *[contains(text(),'Problem of the day')]"));
           
           // Scroll to the specific position
           js.executeScript("arguments[0].scrollIntoView();", element);
       }
}

Output of JavascriptExecutorDriver:

Using JavascriptExecutorDriver

Using Actions

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.

Java

//Import selenium libraries
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.By;

public class selenium4 {
    public static void main(String[] args) {
         
            // State the chromedriver URL  
           System.setProperty("webdriver.chrome.driver",
"C:\\Users\\Vinayak Rai\\Downloads\\chromedriver-win64\\chromedriver-win64\\chromedriver.exe");
     
           // Define and initiate the chrome driver
           WebDriver driver = new ChromeDriver();
           
             // Launch the website
           driver.get("https://www.geeksforgeeks.org/");
           
           // Maximize the screen
           driver.manage().window().maximize();
           
           // Stating the actions
           Actions a = new Actions(driver);
           
           // Find Problem of the day text
           WebElement element = driver.findElement(By.xpath("// *[contains(text(),'Problem of the day')]"));
           
           // Scroll to specific position
           a.moveToElement(element).perform();
       }
}

Output of Actions:

Using Action Class

Conclusion

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.

FAQs

1. Is the performance of the Selenium script affected by scrolling of elements into view?

Ans: Yes, scrolling an element into view affects the performance in Selenium tests, while it is very minimal. Still, it is recommended not to scroll elements much as it may increase the execution time.

2. Is there any way to determine if the element is visible or not in the viewport?

Ans: Yes, we can use the built-in function of Selenium, i.e., isDisplayed to check if the particular element is visible or not within the viewport.