How to Scroll an Element Into View in Selenium

Last updated: October 12, 2025

Written by: Maurice Maina

Reviewed by: Hiks Gerganov

Testing

Refactor Java code safely — and automatically — with OpenRewrite.

Refactoring big codebases by hand is slow, risky, and easy to put off. That’s where OpenRewrite comes in. The open-source framework for large-scale, automated code transformations helps teams modernize safely and consistently.

Each month, the creators and maintainers of OpenRewrite at Moderne run live, hands-on training sessions — one for newcomers and one for experienced users. You’ll see how recipes work, how to apply them across projects, and how to modernize code with confidence.

Join the next session, bring your questions, and learn how to automate the kind of work that usually eats your sprint time.

Regression testing is an important step in the release process, to ensure that new code doesn't break the existing functionality. As the codebase evolves, we want to run these tests frequently to help catch any issues early on.

The best way to ensure these tests run frequently on an automated basis is, of course, to include them in the CI/CD pipeline. This way, the regression tests will execute automatically whenever we commit code to the repository.

In this tutorial, we'll see how to create regression tests using Selenium, and then include them in our pipeline using GitHub Actions:, to be run on the LambdaTest cloud grid:

>> How to Run Selenium Regression Tests With GitHub Actions

In this tutorial, we'll see how to create regression tests using Selenium, and then include them in our pipeline using GitHub Actions:, to be run on the LambdaTest cloud grid:

>> How to Run Selenium Regression Tests With GitHub Actions

1. Overview

When automating web applications with Selenium, it’s common to encounter challenges while interacting with off-screen elements.

Selenium may be unable to click or type into elements unless they are visible in the viewport. In real-world applications, however, web pages usually contain too many elements to fit on one screen. For instance, we may encounter long forms and tables that require scrolling to interact with them effectively. In such an instance, we need a reliable method to scroll elements into view, ideally centering them on the screen for easier interaction.

In this tutorial, we’ll explore how to scroll an element into view in Selenium.

2. Problem Statement

Let’s consider automating a long web form with three input fields:

firstName: visible at the top
middleName: somewhere in the middle of the page
lastName: visible at the bottom

The fields are separated by large sections, making it highly possible for some elements to be off-screen on many devices.

Even though Selenium often interacts with off-screen elements programmatically, issues may arise when we need to capture screenshots or perform visual verification. For instance, elements outside the viewport may not appear in screenshots, making it difficult to confirm that interactions occurred correctly. Therefore, ensuring elements are visible within the viewport helps achieve accurate screenshots and reliable visual validation during automated runs.

Using the default scrollIntoView() method of Selenium can sometimes produce unwanted results:

aligning an element to the top or bottom of the viewport, and not the center
leaving elements partially hidden under sticky headers
requiring repetitive scrolling logic in multiple places

However, the main goal is to scroll elements smoothly to the vertical center of the viewport. For this, we use JavaScript execution through the Selenium JavascriptExecutor.

3. Maven Dependencies

Let’s add the required dependencies to the pom.xml file:

<dependencies>
    <!-- Selenium Java -->
    <dependency>
        <groupId>org.seleniumhq.selenium</groupId>
        <artifactId>selenium-java</artifactId>
        <version>4.25.0</version>
    </dependency>

    <!-- JUnit 5 -->
    <dependency>
        <groupId>org.junit.jupiter</groupId>
        <artifactId>junit-jupiter</artifactId>
        <version>5.10.0</version>
        <scope>test</scope>
    </dependency>
</dependencies>

4. Adding Crucial Files

So, let’s add the files that form the main project logic.

4.1. HTML Page

Firstly, we create the form.html file:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Long Form Example</title>
        <style>
            body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
            .container { width: 50%; margin: auto; padding: 20px; }
            label { margin-top: 20px; font-weight: bold; display: block; }
            input, button { margin-top: 5px; padding: 10px; font-size: 16px; }
            .spacer { height: 600px; } /* Simulate long form */
        </style>
    </head>
    <body>
        <div class="container">
            <h1>Long Form Example</h1>

            <label for="firstName">First Name:</label>
            <input type="text" id="firstName" name="firstName">

            <div class="spacer"></div>

            <label for="middleName">Middle Name:</label>
            <input type="text" id="middleName" name="middleName">

            <div class="spacer"></div>

            <label for="lastName">Last Name:</label>
            <input type="text" id="lastName" name="lastName">

            <div class="spacer"></div>

            <button type="submit">Submit</button>
        </div>
    </body>
</html>

In summary, the simple HTML page above simulates a long form with multiple input fields separated by large spacers.

4.2. Main Class

Next, let’s create the main class ScrollElementIntoView.java:

public class ScrollElementIntoView {

    private WebDriver driver;

    public void setUp() {
        driver = new ChromeDriver();
        driver.manage().window().maximize();

        URL formUrl = getClass().getClassLoader().getResource("form.html");
        if (formUrl != null) {
            driver.get(formUrl.toString());
        } else {
            throw new RuntimeException("form.html not found in resources");
        }
    }

    public void tearDown() {
        if (driver != null) {
            driver.quit();
        }
    }

    public void scrollToElementCenter(WebElement element) {
        JavascriptExecutor js = (JavascriptExecutor) driver;
        js.executeScript(
          "const rect = arguments[0].getBoundingClientRect();" +
          "window.scrollBy({ top: rect.top + window.pageYOffset - (window.innerHeight / 2) + (rect.height / 2), behavior: 'smooth' });",
          element
        );
    }

    public void runDemo() throws InterruptedException {
        WebElement firstName = driver.findElement(By.id("firstName"));
        WebElement middleName = driver.findElement(By.id("middleName"));
        WebElement lastName = driver.findElement(By.id("lastName"));

        scrollToElementCenter(firstName);
        Thread.sleep(1000);
        firstName.sendKeys("John");

        scrollToElementCenter(middleName);
        Thread.sleep(1000);
        middleName.sendKeys("William");

        scrollToElementCenter(lastName);
        Thread.sleep(1000);
        lastName.sendKeys("Doe");

        Thread.sleep(2000);
    }

    public WebDriver getDriver() {
        return driver;
    }

    public static void main(String[] args) {
        ScrollElementIntoView demo = new ScrollElementIntoView();
        try {
            demo.setUp();
            demo.runDemo();
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            demo.tearDown();
        }
    }
}

Now, let’s see a breakdown of the class:

new ChromeDriver(): launches a new Chrome browser instance to carry out the automation
driver.manage().window().maximize(): ensures full browser visibility for accurate scrolling
getClass().getClassLoader().getResource(“form.html”): loads the form directly from the resources directory
JavascriptExecutor: executes JavaScript to scroll elements precisely into the center of the viewport
window.scrollBy: smoothly scrolls the window to the computed position
Thread.sleep(): adds a delay so that we can visually observe scrolling during execution
driver.quit(): closes the browser and ends the session cleanly

In this case, the JavascriptExecutor interface enables Selenium to run custom JavaScript within the browser, giving us precise control over scrolling behavior. Consequently, we can automatically scroll through the form fields and input text into each one, showing how to bring off-screen elements into view before interacting with them.

4.3. Test Class

Further, let’s create the test class ScrollElementIntoViewUnitTest.java:

@TestInstance(TestInstance.Lifecycle.PER_CLASS)
public class ScrollElementIntoViewUnitTest {

    private ScrollElementIntoView helper;
    private WebDriver driver;

    @BeforeAll
    void init() {
        helper = new ScrollElementIntoView();
        helper.setUp();
        driver = helper.getDriver();
    }

    @AfterAll
    void tearDown() {
        helper.tearDown();
    }

    @Test
    @DisplayName("Should scroll and fill First Name field")
    void givenFirstNameField_whenScrolledIntoView_thenFieldIsFilled() {
        WebElement firstName = driver.findElement(By.id("firstName"));
        helper.scrollToElementCenter(firstName);
        firstName.sendKeys("John");
        assertEquals("John", firstName.getAttribute("value"));
    }

    @Test
    @DisplayName("Should scroll and fill Middle Name field")
    void givenMiddleNameField_whenScrolledIntoView_thenFieldIsFilled() {
        WebElement middleName = driver.findElement(By.id("middleName"));
        helper.scrollToElementCenter(middleName);
        middleName.sendKeys("William");
        assertEquals("William", middleName.getAttribute("value"));
    }

    @Test
    @DisplayName("Should scroll and fill Last Name field")
    void givenLastNameField_whenScrolledIntoView_thenFieldIsFilled() {
        WebElement lastName = driver.findElement(By.id("lastName"));
        helper.scrollToElementCenter(lastName);
        lastName.sendKeys("Doe");
        assertEquals("Doe", lastName.getAttribute("value"));
    }
}

There are three main parts to focus on here:

givenFirstNameField_whenScrolledIntoView_thenFieldIsFilled: scrolls the firstName field into view, enters “John”, and verifies the input
givenMiddleNameField_whenScrolledIntoView_thenFieldIsFilled: scrolls the middleName field into view, enters “William”, and verifies the input
givenLastNameField_whenScrolledIntoView_thenFieldIsFilled: scrolls the lastName field into view, enters “Doe”, and verifies the input

In other words, the tests verify that we can smoothly scroll each off-screen input field into view and interact with them successfully using Selenium.

5. Conclusion

In this article, we demonstrated how to scroll an element smoothly into the center of the viewport using Selenium.

So, we leveraged Selenium to ensure that off-screen elements are fully visible and easy to interact with. Therefore, we can now resolve common issues, such as elements being partially hidden under sticky headers or aligned inconsistently within the viewport. Additionally, when working with long or complex web pages, automation should now be more reliable and easier to predict.

As always, the sources are available over on GitHub.