Scroll to Element with JavaScript

How it works

Pass an element to executeScript() as an extra argument and call the browser's own scrollIntoView() on arguments[0] inside the script. With true the page scrolls until the element's top lines up with the top of the viewport, as far as the page can scroll; with false it lines up the bottom instead.

On Text Fields in the runner's 780 by 580 window, the pre-filled field starts below the visible area, more than 900 pixels down while the viewport is 437 pixels high. After the script runs, the page has scrolled 579 pixels, its maximum, and the field sits inside the viewport.

isDisplayed() does not tell you whether an element is on screen; it was already true before the scroll. To prove a scroll happened, read window.scrollY or the element's getBoundingClientRect() through JavaScript.

About the assignment

The starter gives you the executor and the pre-filled field. You scroll the field into view with JavaScript, then check that it is displayed and read its value.

What you will do

1. 1Call js.executeScript() with a script that calls scrollIntoView() on arguments[0], passing the element as the extra argument.
2. 2Print the element's isDisplayed() after the label Scrolled to element:.
3. 3Print its value attribute after the label Value:.

Common mistakes

• Forgetting to pass the element

  Without the extra argument, arguments[0] is undefined and the script throws JavascriptException with "Cannot read properties of undefined".

• Treating isDisplayed() as proof of scrolling

  It is true for elements below the fold too. Check the scroll position if the scroll itself matters.

• Scrolling before every action

  click() and sendKeys() already scroll their element into view. Scroll by hand for screenshots, lazy-loaded content and sticky headers that cover an element.

In a real test suite

Related lessons

• JavaScript Executor - Get ValuesHow scripts receive arguments and return values.
• Take Element ScreenshotElement screenshots, which need the element fully in view.
• isDisplayed() - Check Element VisibilityWhat isDisplayed() checks, and why it is not a test of being on screen.

To try one of these calls on any page without a task, open the Online Selenium Java Compiler.

Starter code

The editor above opens with this code. Fill in the TODO lines, then run and submit it.

import org.openqa.selenium.*;
import org.openqa.selenium.chrome.ChromeDriver;

public class Main {
    public static void main(String[] args) throws Exception {
        WebDriver driver = new ChromeDriver();
        driver.get("https://testkru.com/Elements/TextFields");
        
        JavascriptExecutor js = (JavascriptExecutor) driver;
        WebElement element = driver.findElement(By.id("preFilledTextField"));
        
        // TODO: Scroll element into view
        // TODO: Check isDisplayed() and print value
        
        driver.quit();
    }
}