How not to scroll to the top of the page

Some Selenium tests need to interact with elements that are all around the page.

Since the browser cannot display the full page, scrolling is necessary if the element to interact with is not in the viewport.

There are multiple types of possible scrolling:

• scroll to top of the page

• scroll to bottom of the page

• scroll to a specific position

• scroll to an element.

We cover in this post only scrolling to the top of the page.

---

A common way of doing this is with code as follows:

Actions actions = new Actions(driver);
actions.sendKeys(Keys.HOME).build().perform();

This line uses the Action class to simulate pressing the HOME key which has as result scrolling to the top of the page.

Another common way of doing the same thing is:

((JavascriptExecutor) driver).executeScript(
      "window.scrollTo(document.body.scrollHeight, 0)");

In this case, Javascript code is used to scroll to the top of the browser window.

Both of these approaches work.

Both have a few disadvantages.

---

Both these ways of scrolling to the top of a page are generic as they work for any page. Working for any page means that there is nothing specific to a home page or results page or details page.

And we do not actually know if the scrolling worked. There is nothing that checks that, after scrolling, the top of the page is displayed in the viewport.

We cannot know if the scrolling worked. We can only assume that it did.

---

And this leads us to the third way of scrolling to the top of the page:

WebElement header = driver.findElement(headerBy);

(JavascriptExecutor)driver.executeScript(
      "arguments[0].scrollIntoView();", header);

if (!header.isDisplayed())
   throw new ElementNotVisibleException("header is not displayed!");

In this case, we find first the header element of the page.

Then, we scroll using Javascript to the header element.

Finally, we verify that the header element is displayed.

---

I know what you will say. Alex, are you insane? Why would anyone do the scrolling with 5 lines of code instead of 1 line?

You are correct.

5 lines is a lot.

That is why we can create a method:

public void scrollToTopOfPage(By headerBy) {
    WebElement header = driver.findElement(headerBy);

    (JavascriptExecutor)driver.executeScript(
        "arguments[0].scrollIntoView();", header);

    if (!header.isDisplayed())
        throw new ElementNotVisibleException("header is not displayed!");
}

Why is this better?

Not only do we scroll to the top of the page but we also verify that the scrolling worked.

And we do this still in 1 line of code.