How To Scroll a Page Using Selenium WebDriver?

Posted by Shalini Baskaran | May 7, 2021
Automation • Selenium Webdriver •

125477 Views | 8 Min Read

scroll-a-webpage-in-selenium-using-java

Selenium is one of the most widely used test automation frameworks for web automation testing. As far as the framework is concerned, Selenium WebDriver is the most vital component for carrying out automated browser testing. Before deep-diving into how to perform scroll operations (e.g. scroll down, scroll up, horizontal scroll, etc.) using Selenium, let us take a quick look at the hierarchy of classes and interfaces in Selenium WebDriver.

The Search context is the super interface in Selenium. The Remote WebDriver class implements the methods in WebDriver – search context interfaces, TakeScreenshot, and JavaScriptExecutor interfaces.

JavaScriptExecutor in Selenium is used to execute the code written in Javascript within the Selenium automation framework. This interface has two methods namely ExecuteScript and ExecuteAsyncScript which are used to execute the JavaScript code.

In this blog, we look at you how to perform scrolling actions on any webpage using the JavaScriptExecutor interface. Selenium scroll down, scroll to element, horizontal scroll, etc. are some of the common scroll operations that we would be demonstrating using Java.

To realize Selenium scroll down, Selenium scroll to element, and other relevant operations; we first need to import org.openqa.selenium.JavascriptExecutor package in our code. Shown below is the syntax of JavaScriptExecutor for Selenium automation testing:

Now that the basic premise is set, let’s deep-dive into how to scroll a web page using Selenium WebDriver for Selenium automation testing.

How to scroll down to the bottom of the page in Selenium using Java

To scroll down to the end of the page using Selenium WebDriver, we first get the height of the page. Once the page height is available with us, we perform a Selenium scroll down till the end of the page. This operation is commonly used in Selenium automation testing where page scroll is done to perform relevant operations on the WebElements in the DOM.

The following code helps you scroll down to the bottom of the page using the JavaScriptExecutor interface.

Demonstration: Scroll down to the bottom of the webpage using Selenium WebDriver

Shown below is the execution output which indicates that the Selenium scroll down operation was performed successfully using the JavaScriptExecutor interface.

How to scroll by the visibility of WebElement on the page in Selenium using Java

Any webpage would comprise multiple WebElements where some of the elements would be loaded on an on-demand basis. Before you can perform scroll operations in Selenium, it is essential that the corresponding WebElement is present (or visible) in the DOM.

This is where the scrollIntoView() interface in JavaScript comes into the picture. This method helps scroll an element into the viewing portion of the window.

Demonstration: Scroll by the visibility of an element on the webpage using Selenium WebDriver

In the above implementation, we navigated to the LambdaTest webpage and performed Selenium scroll down to the point where the WebElement “All Browsers and Devices” is visible.

Shown below is the execution snapshot which indicates that scroll down in Selenium to the desired WebElement (which is visible) was performed successfully:

How to scroll down in a page by specified pixels in Selenium using Java

You can also scroll to a particular point by specifying the exact location or coordinates on the page. This can be done using the scrollBy method in JavaScript.

Demonstration: Scroll down by the specified pixels on the page using Selenium WebDriver

Implicit wait in Selenium (for 10 seconds) is used before the scrollBy() method is triggered to scroll to the desired coordinates.

Read – How To Measure Page Load Time With Selenium

Shown below is the execution snapshot which indicates that the Selenium scroll down operation was successful:

How to scroll the page to the left in a horizontal direction using Selenium Java

When performing automated browser testing of websites (or web apps), there are times where the page under test has to be scrolled in a horizontal as well as vertical direction. When scrolling in the horizontal direction, you have the option to scroll either to the left or right of the page.

To scroll to the left of a webpage in a horizontal direction, use the below implementation in the automation test:

Demonstration: Scroll the webpage to the left in the horizontal direction using Selenium WebDriver

To visualize the movement of the scroll bar in the horizontal left direction, we first scroll to the right and then to the left. By executing the above script, you could see the horizontal scroll bar being scrolled in the left direction of the page.

How to scroll the page to the right in the horizontal direction using Selenium Java

To scroll the webpage in the horizontal right direction, use the below code in the Selenium Automation Test:

Demonstration: How to scroll to the right in the horizontal direction of the webpage using Selenium WebDriver

Here is the execution snapshot:

How to scroll a webpage in horizontal and vertical directions in Selenium using Java

When scrolling a page, there is flexibility to scroll in horizontal as well as vertical directions. To achieve Selenium scroll in both directions, implement the following code in the automation script:

Demonstration: How to scroll in the horizontal and vertical directions of a page using Selenium WebDriver

Here is the execution snapshot:

How to scroll the scroll bar on a page using Selenium Java

If there is a scroll bar present on a webpage, the user can change value on the scroll bar and move it to the desired value. To realize this in a Selenium automation script, we have to identify the scroll bar WebElement and perform the scrolling action on it.

Demonstration – Scroll the scroll bar on the page using Selenium WebDriver

Shown below is the execution snapshot

How to scroll a webpage having infinite scrolling in Selenium using Java

You would have come across many websites that have long or infinite scrolling. Pages with infinite scrolling might witness increased engagement since they do not have to go through the tedious task of clicking the ‘Previous’ and ‘Next’ buttons.

Read – How Moden E-Commerce Websites Are Built

You can visit https://the-internet.herokuapp.com/infinite_scroll to take a brief look at infinite scrolling.

Demonstration: How to scroll web page having infinite length using Selenium WebDriver

Shown below is the execution snapshot:

How to Scroll to the top of the page in Selenium using Java

Apart from Selenium scroll down in a page and Selenium scroll to element, scrolling to the top of the page is one of the widely used operations on pages using JavaScriptExecutor interface. There are different ways through which you can scroll to the top of the page.

To realize this operation, we first perform scroll down in Selenium Java and than perform scroll up the page.

Demonstration: How to scroll up in a page using Selenium WebDriver

Method 1

Method 2

Method 3

Here is the execution snapshot that shows how Selenium scroll up in performed on a page:

How to do scroll horizontally to a specific element on a page in Selenium using Java

The scrollIntoView() method in JavaScript is used in conjunction with the WebElement to which horizontal scroll has to be perfomed. Their combination is passed to the executeScript method to realize scroll to element in Selenium.

Demonstration: How to scroll to a specific element on a page using using Selenium WebDriver

Shown below is the execution snapshot:

Conclusion

In this article, we have seen many ways of scrolling in a web page using Selenium Java. Automating the page scroll operation using JavaScriptExecutor interface is one of the widely used operations when it comes to Selenium automation testing. Do let us know how you use Selenium scroll down, Selenium scroll to element, infinite scroll using Selenium WebDriver, etc. for automated browser testing.

Do feel free to share this article with your friends and colleagues.

Happy Testing…!

Written by

Related Articles

Headless Browser Testing Using Nightwatch JS

E2E Headless Browser Testing Using Nightwatch JS

58091 Views | 13 Min Min Read

Leave a Reply

Your email address will not be published. Required fields are marked *