How to Scroll Down or Up Page using Selenium

How to Scroll Down or Up Page using Selenium - Testingmint.com

In web applications, Scrolling is an important functionality. There are scenarios where we have to scroll up and down to perform some actions such as viewing content, selecting options, etc. Selenium provides various methods to perform scroll actions on a web page.

In this blog, we will explore some of the ways that help you to scroll Down and Up using Selenium and Java.

Scroll using Actions Class

With the help of the actions class in Selenium, you may perform complex user interactions like drag and drop, keypress. Besides that, you can also use actions class to perform scroll up and down on web pages. 

How to Scroll Down using Actions Class

To scroll down a web page using the Actions class in Selenium, you can use the following steps:

I. Create Instance of Actions Class:
As Actions Class contains different methods, for using that you have to create an instance of Action class.
Syntax:

Actions actions = new Actions(driver);

II. Use sendKeys Method of Action Class to Perform Scroll Down Action:
There will be having different ways of using the SendKeys method of action class to perform Scroll Down action on the web page, that includes:

  • sendKeys(Keys.DOWN):
    The Down key is used to replicate manual way of the Down(⬇) keypress on a keyboard. This will help you to scroll down the page by smaller amount.
    Syntax:
actions.sendKeys(Keys.DOWN).perform();
  • sendKeys(Keys.PAGE_DOWN):
    The PAGE_DOWN key is used to replicate the manual way of the Page Down(PgDn) keypress on a keyboard. This will help you to scroll down the page by larger amount.
    Syntax:
actions.sendKeys(Keys.PAGE_DOWN).build().perform();
  • sendKeys(Keys.END):
    The End key is used to replicate the manual way of the End Keypress on a Keyboard. This will help you to scroll down the page to the Footer(end of the page) Section.
    Syntax:
actions.sendKeys(Keys.END).build().perform();

How to Scroll Up using Actions Class

To scroll up a web page using the Actions class in Selenium, you can use the following steps:

I. Create Instance of Actions Class:
As Actions Class contains different methods, for using that you have to create an instance of Action class.
Syntax:

Actions actions = new Actions(driver);

II. Use sendKeys Method of Action Class to Perform Scroll Up Action:
There will be having different ways of using the SendKeys method of action class to perform Scroll Up action on the web page, that includes:

  • sendKeys(Keys.UP):
    The Up key is used to replicate the manual way of the Up(⬆) keypress on a keyboard. This will help you to scroll up the page by smaller amount.
    Syntax:
actions.sendKeys(Keys.UP).perform();
  • sendKeys(Keys.PAGE_UP):
    The PAGE_UP key is used to replicate the manual way of the Page Up(PgUp) keypress on a keyboard. This will help you to scroll up the page by larger amount.
    Syntax:
actions.sendKeys(Keys.PAGE_UP).build().perform();
  • sendKeys(Keys.HOME):
    The Home key is used to replicate the manual way of the Home Keypress on a Keyboard. This will help you to scroll up the page to the Header(Beginning of the page) Section.
    Syntax:
actions.sendKeys(Keys.HOME).build().perform();

Practical Demonstration of How to Scroll Down/Up Page using Actions Class

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;

public class ScrollUsingActionsClass {
	public static void main(String[] args) {

		// create an instance of chromedriver
		WebDriver driver = new ChromeDriver();
		driver.manage().window().maximize();
		driver.get("https://testingmint.com");

		// create an instance of Actions class
		Actions actions = new Actions(driver);

		// Scroll down page by smaller amount
		actions.sendKeys(Keys.DOWN).build().perform();

		// Scroll up page by smaller amount
		actions.sendKeys(Keys.UP).build().perform();

		// Scroll down page by larger amount
		actions.sendKeys(Keys.PAGE_DOWN).build().perform();

		// Scroll up page by larger amount
		actions.sendKeys(Keys.PAGE_UP).build().perform();

		// Scroll up the page to footer
		actions.sendKeys(Keys.END).build().perform();

		// Scroll up the page to header
		actions.sendKeys(Keys.HOME).build().perform();

	}
}

Scroll using JavascriptExecutor Interface

The JavascriptExecutor interface is a built-in interface in Selenium that provides the ability to execute Javascript code on a web page. You can use this interface to perform scroll up and down actions on the webpage.

How to Scroll Down and Up using JavascriptExecutor

To scroll down and up a web page using the JavascriptExecutor interface in Selenium, you can use the following steps:

I. Create an instance of the JavascriptExecutor Interface:
For using the methods of JavascriptExecutor Interface, you have to create an instance of JavascriptExecutor.
Syntax:

JavascriptExecutor js = (JavascriptExecutor) driver;

II. Use executeScript Method:
For performing the javascript code to scroll down and up the page, you have to use executeScript method of JavascriptExecutor Interface.

For scrolling the page Down and Up, you have to use scrollBy method. In this method, you have to pass two parameters.

The first parameter is used to provide horizontal scroll distance, and the second parameter is used to provide vertical scroll distance.

Syntax for Vertical scroll:

js.executeScript("window.scrollBy(0, 1000)");

Syntax for Horizontal scroll:

js.executeScript("window.scrollBy(1000, 0)");
  • How to Scroll Down Page using JavascriptExecutor:
    For scrolling down the page, you have to insert the positive value into vertical(second) parameter of scrollBy method.
    Syntax:
js.executeScript("window.scrollBy(0, 1000)");
  • How to Scroll Up Page using JavascriptExecutor:
    For scrolling up the page, you have to insert the negative value into vertical(second) parameter of scrollBy method.
    Syntax:
js.executeScript("window.scrollBy(0, -1000)");

Practical Demonstration of How to Scroll Down/Up Page using JavascriptExecutor

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class ScrollUsingJavascriptExecutor {
	public static void main(String[] args) {

		// create an instance of chromedriver
		WebDriver driver = new ChromeDriver();
		driver.get("https://testingmint.com");

		// create an instance of JavascriptExecutor interface
		JavascriptExecutor js = (JavascriptExecutor) driver;

		// Scroll down page
		js.executeScript("window.scrollBy(0, 1000)");

		// Scroll up page
		js.executeScript("window.scrollBy(0, -1000)");

	}
}

Conclusion

In conclusion, scrolling a web page using Selenium is a important aspect of web automation testing. In this blog we have seen different ways of performing the scrolling action on a web page.

It is recommended to use the Actions class or JavascriptExecutor interface for more complex scrolling scenarios or when we need more precise control over the scrolling actions.

You Might Like: