Scroll element into view and verify visibility

Preconditions (3)

Step 1: Open the browser and navigate to the test page URL

Step 2: Locate the target element that is initially not visible on the screen

Step 3: Scroll the page until the target element is visible

Step 4: Verify that the target element is displayed on the screen

✅ Expected Result: The target element is scrolled into view and is visible on the screen

Automation Requirements - Selenium WebDriver with Java

Assertions Needed:

Assert that the target element is displayed after scrolling

Best Practices:

Use explicit waits to ensure the element is present before scrolling

Use JavaScriptExecutor to scroll the element into view

Use meaningful locators such as By.id or By.cssSelector

Avoid hardcoded waits like Thread.sleep

Close the browser after test execution

Automated Solution

Selenium Java

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.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import java.time.Duration;
import static org.junit.jupiter.api.Assertions.assertTrue;

public class ScrollIntoViewTest {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
        WebDriver driver = new ChromeDriver();
        try {
            driver.get("https://example.com/scrollable-page");

            WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
            By targetLocator = By.id("target-element");

            // Wait until the element is present in DOM
            WebElement targetElement = wait.until(ExpectedConditions.presenceOfElementLocated(targetLocator));

            // Scroll the element into view using JavaScriptExecutor
            ((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", targetElement);

            // Wait until the element is visible
            wait.until(ExpectedConditions.visibilityOf(targetElement));

            // Assert the element is displayed
            assertTrue(targetElement.isDisplayed(), "Target element should be visible after scrolling");

        } finally {
            driver.quit();
        }
    }
}

This test script uses Selenium WebDriver with Java to automate scrolling an element into view.

First, it opens the browser and navigates to the test page URL.

It waits explicitly for the target element to be present in the page DOM to avoid timing issues.

Then it uses JavascriptExecutor to scroll the element into view, which is a reliable way to bring off-screen elements into the visible area.

After scrolling, it waits until the element is visible on the screen.

Finally, it asserts that the element is displayed, confirming the scroll worked.

The browser is closed in a finally block to ensure cleanup even if the test fails.

Common Mistakes - 4 Pitfalls

Using Thread.sleep() instead of explicit waits

Using hardcoded XPath locators that are brittle

Not waiting for element presence before scrolling

Not closing the browser after test

Bonus Challenge

Now add data-driven testing with 3 different target element IDs to scroll into view and verify visibility.

Show Hint