How to Scroll Down or UP a Page in Selenium Webdriver

In this tutorial, we will see how to scroll down or up a page in Selenium WebDriver.

We do see Scrollbar on a web page if the entire page doesn’t fit in the screen and it’s a very common thing that we see with all web applications. A Scrollbar allows us to move around the screen in horizontal as well as vertical directions.

Selenium Webdriver does not need to scroll down on a page to perform required actions on web elements as it manipulates DOM. Having said that, in certain web pages, a few elements only become visible once the user has scrolled to them. In such cases, it becomes necessary to perform either scroll up or down operation in Selenium.

How to Scroll Down or UP in Selenium?

Selenium does not have any web element method to scroll in Selenium WebDriver.Having said that, we can use JavaScriptExecutor interface to execute JavaScript methods that will help us out to perform scroll vertically or horizontally. We can use the following syntax to scroll in Selenium using JavaScriptExecutor.

Scroll Down or UP a Page in Selenium Webdriver

As per the above screenshot, we can observe that the scrollBy() method requires two parameters, x, and y, that represent the horizontal and vertical coordinates in pixel values, respectively.

Selenium Scripts to scroll down or up the Page

We will learn how to automate the following test scenarios.

  • How to scroll down the web page by pixel?
  • How to scroll down to the bottom of the page?
  • How to Scroll Down the Web Page Until the Element Becomes Visible?
  • How to scroll Horizontally on the web page?
  • How to scroll to the top of the page?

How to Scroll Down the Web Page by Pixel?

The following Selenium script shows how to scroll down to 500 pixels action.

Code Explanation: We are providing 500 pixels as the Y coordinate to scroll downward.

How to Scroll Down at the Bottom of the Page?

The following Selenium script shows how to scroll down to the bottom of the page.

Code Explanation: The “document.body.scrollHeight” command returns the complete height of the web page and that is used as Y coordinate to scroll down to the bottom of the page.

How to Scroll Down the Web Page Until the Element Becomes Visible?

This example will demonstrate to you how to scroll down until the HTML Excercises link becomes visible on the w3schools home page.

Scroll Down the Web Page Till the Element Becomes Visible in Selenium

Code Explanation: In the above example, the Javascript method scrollIntoView() scrolls the page until the mentioned element becomes.

How to Scroll Horizontally on the Web Page?

In the previous example, we used to scrollIntoView() to scroll down until the desired elements become visible. The same method also applies to scroll horizontally element becomes visible. So the approach will remain the same.

js.executeScript(“arguments[0].scrollIntoView();”,element );

How to Scroll Back to the Top of the Page?

The following example shows how to scroll back top to the page.

Code Explanation: We have to provide 0 in the second parameter of the scrollTo() method as the Y coordinate to scroll to the top of the page.

Conclusion

We have seen various possible combinations of scroll down and up on a page.

Recommended Posts

 

 

 

 

 

 

Leave a Reply