Selenium Java - Scroll Up using JavaScriptExecutor

Introduction

In this blog, we'll dive into how to use JavaScriptExecutor in Selenium WebDriver with Java to scroll to an element and then scroll back to the top of the page. This technique is super handy for testing how navigation and interactions work on long or complex web pages.

Scrolling Up using JavaScriptExecutor

Below is a complete Selenium code example that demonstrates scrolling to a specific element and then scrolling back to the top of the page 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_077 {
    /****
     *  Sample Code Definition :- Selenium - Scroll Up using JavaScript
     *  Developed  By :- Pankaj Kumar
     *  Date of Creation :- 15-June-2024
     *  Project :- SAJVSAUTO - Java [Web / Mobile / API]
     *  SA_BLOG_CODE :- SAJVSAUTO_077
     */
    @Test
    public void Selenium_077() throws InterruptedException {
        System.out.println("Selenium - Scroll Up using JavaScript");

        // 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);
        Thread.sleep(5000);
        // Scroll to Top
        js.executeScript("window.scrollTo(0, 0);");
        // 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, and applies an implicit wait for smooth execution.

• Page Navigation: Opens the target URL and navigates to a specific section (registration page).

• Scroll to Element: Uses JavaScriptExecutor with the scrollIntoView(true) function to bring the specified element into view.

• Scroll to Top: Executes JavaScript with the window.scrollTo(0, 0) function to return the page to the top.

• Wait Intervals: Pauses (Thread.sleep()) are used for observation during the execution (optional for visual clarity).

• Driver Cleanup: Ensures proper closure of the WebDriver instance by quitting the driver at the end.

Conclusion

By using JavaScriptExecutor for scrolling, you can easily mimic how users interact with web pages that have a lot of content. This approach makes it easier to automate testing scenarios that involve moving around and seeing different parts of the page.