Selenium Java - Scroll to Element using JavaScriptExecutor

Introduction

In this blog, we'll explore how to use JavaScriptExecutor in Selenium WebDriver with Java to scroll to a specific element on a webpage. This technique is super helpful when elements aren't immediately visible on the screen, and you need to scroll to interact with them.

Scrolling to an Element using JavaScriptExecutor

Below is a comprehensive Selenium code example that demonstrates how to scroll to a specific element using JavaScriptExecutor.

java

package sa.Demo.SeleniumPractice;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

import java.time.Duration;

public class Selenium_076 {
    /****
     *  Sample Code Definition :- Selenium - JavaScript ScrollToView
     *  Developed  By :- Pankaj Kumar
     *  Date of Creation :- 15-June-2024
     *  Project :- SAJVSAUTO - Java [Web / Mobile / API]
     *  SA_BLOG_CODE :- SAJVSAUTO_076
     */
    @Test
    public void Selenium_076() throws InterruptedException {
        System.out.println("Selenium - JavaScript ScrollToView");

        // Open Chrome Browser
        WebDriver driver=new ChromeDriver();
        // Maximize the Browser Window
        driver.manage().window().maximize();
        // Setup the implicit Wait
        driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(30));
        // Open the URL
        driver.get("https://practice.solveautomation.in");
        // Click the Register Link
        driver.findElement(By.xpath("//a[normalize-space()='Register']")).click();
        // Wait for 5 Seconds
        Thread.sleep(5000);
        // Scroll to Element By using JavaScript
        JavascriptExecutor js = (JavascriptExecutor)driver;
        WebElement elem = driver.findElement(By.xpath("//a[normalize-space()='SolveAutomation.in']"));
        js.executeScript("arguments[0].scrollIntoView(true);", elem);
        // Wait for 5 Seconds to observe the action (optional)
        Thread.sleep(5000);
        // Quit the Driver
        driver.quit();
    }
}

Explanation

• Browser Setup: Configures ChromeDriver, maximizes the browser window, and defines an implicit wait.

• Page Interaction: Opens a URL, navigates to the registration page via a link click, and locates the target element.

• JavaScriptExecutor: Executes JavaScript code to scroll the webpage such that the specified element is brought into view.

  • The function arguments[0].scrollIntoView(true) ensures the element appears in the viewport.

• Thread.sleep(): Used to pause execution momentarily, allowing observation of the scrolling action (optional for test scenarios).

• Driver Quit: Closes the browser to ensure proper cleanup of the WebDriver session.

Conclusion

Using JavaScriptExecutor for scrolling in Selenium gives you better control over elements that aren't easily reachable. This approach is especially handy for testing features on pages with dynamic content or infinite scrolling.