BAEL-8376: How to Scroll an Element Into View in Selenium

Author: mauricemaina

testing-modules/selenium-3/scrollelementintoview/pom.xml

@@ -0,0 +1,56 @@
+<project xmlns="http://maven.apache.org/POM/4.0.0" 
+         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+    <groupId>com.baeldung.scrollelementintoview</groupId>
+    <artifactId>scrollelementintoview</artifactId>
+    <packaging>jar</packaging>
+    <version>1.0-SNAPSHOT</version>
+    <name>scrollelementintoview</name>
+    <url>http://maven.apache.org</url>
+
+    <properties>
+        <maven.compiler.source>17</maven.compiler.source>
+        <maven.compiler.target>17</maven.compiler.target>
+        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
+    </properties>
+
+    <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>
+
+    <build>
+        <plugins>
+            <!-- Compiler plugin -->
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-compiler-plugin</artifactId>
+                <version>3.11.0</version>
+                <configuration>
+                    <source>17</source>
+                    <target>17</target>
+                </configuration>
+            </plugin>
+
+            <!-- Update Surefire plugin to support JUnit 5 -->
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-surefire-plugin</artifactId>
+                <version>3.2.5</version>
+            </plugin>
+        </plugins>
+    </build>
+</project>

testing-modules/selenium-3/scrollelementintoview/src/main/java/com/baeldung/scrollelementintoview/ScrollElementIntoView.java

@@ -0,0 +1,74 @@
+package com.baeldung.scrollelementintoview;
+
+import org.openqa.selenium.*;
+import org.openqa.selenium.chrome.ChromeDriver;
+import org.openqa.selenium.JavascriptExecutor;
+import java.net.URL;
+
+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();
+        }
+    }
+}

testing-modules/selenium-3/scrollelementintoview/src/main/resources/form.html

@@ -0,0 +1,36 @@
+<!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>

testing-modules/selenium-3/scrollelementintoview/src/test/java/com/baeldung/scrollelementintoview/ScrollElementIntoViewUnitTest.java

@@ -0,0 +1,53 @@
+package com.baeldung.scrollelementintoview;
+
+import org.junit.jupiter.api.*;
+import org.openqa.selenium.By;
+import org.openqa.selenium.WebDriver;
+import org.openqa.selenium.WebElement;
+import static org.junit.jupiter.api.Assertions.assertEquals;
+
+@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"));
+    }
+}