How to Scroll Down or UP a Page in Selenium Webdriver

Selenium Scroll Down or UP: When we open any web page, we can see only a few parts, and a few portions are not visible. So, to make the other part visible, we need to scroll the scroll bar horizontally and vertically.

But when we try to scroll the webpage during automation testing, with the help of the JavascriptExecutor interface, we can move the scroll bar horizontally and vertically.

Syntax:

The syntax of how to use JavascriptExecutor is like below:

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript(Script,Arguments);

In the executeScript() method, we have passed two parameters: script and arguments. In the script parameter, we pass the script we want to execute; in the arguments parameter, we pass the argument to the script, which is also optional.

We Can perform the scroll by using the following methods

Scroll Down By Using scrollBy() Method

In this method, we have to mention the X and Y coordinates. When this method executes, it will scroll up to the coordinates.

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;
public class ScrollByCordinates 
{
	// Execution Will Start From Here
	@Test
	public void ByCordinates() 
	{
		System.setProperty(“webdriver.chrome.driver”, “E://Jars//chromedriver.exe”);
		WebDriver driver; = new ChromeDriver();

		JavascriptExecutor js = (JavascriptExecutor) driver;

		// Launch the application to scroll
		driver.get(“https://www.softwaretestingo.com/”);

		//Maximize the windows
		driver.manage().window().maximize();

		//This will scroll down the page by vertically 800 pixel
		js.executeScript(“window.scrollBy(0,800)”);
	}
}

Description:

The Syntax for the scrollBy method is:

executeScript("window.scrollBy(x,y)");

Here, the x value may be positive or negative. If the X value is positive, the scroll bar moves to the left; if the value is negative, then the scroll bar moves to the right.

Similarly, the scroll bar moves down if the y value is positive and down if the value is negative.

Scroll Down By Using the scrollIntoView() Method.

By using the scrollIntoView(), we can scroll the scroll bar until the specified element is visible in the browser. The syntax for this method is:

js.executeScript("arguments[0].scrollIntoView();",Element );

Here, arguments[0] represent the first index of the page starting from 0, and the Element represents the required elements of the page.

If you want to see your required element at the top of the browser view area, then you can mention the scrollIntoView(true) if the bottom of the element is aligned with the bottom of the visible area.

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;
public class ScrollByAvailableElement 
{
	// Execution will start from Here
   @Test
   public void ByVisibleElement() 
   {
      System.setProperty("webdriver.chrome.driver", "E://chromedriver.exe");
      WebDriver driver; = new ChromeDriver();
      JavascriptExecutor js = (JavascriptExecutor) driver;

      //This will launch the SoftwareTestingo application
      driver.get("https://www.softwaretestingo.com/");

      //Now we will search the element whose linktext is "JAVA" 
      WebElement WebElement = driver.findElement(By.linkText("JAVA"));

      //This script will move the scroll the scroll bar where the element is present
      js.executeScript("arguments[0].scrollIntoView();", WebElement);
   }
}

Scroll Down By Using the scrollTo() Method.

Using the scrollTo() method, we can scroll till the end of the page. For that, the syntax is:

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

Explanation:

• Open The SoftwareTestingo Blog
• Press F12 and click on the console tab.
• Type “window.scrollTo(0,500)” and hit enter; then you will notice that the scroll bar is moved to 500 pixels down because we have mentioned y axes 500 pixels.
• If you try to execute the same command, then you can find that the scroll bar is not moving anywhere, which means
  
  • When we execute the window.scrollTo(0,500), the scroll bar position changed from (0,0) to (0,500)
  • When we execute the second time the same command window.scrollTo(0,500), that scrollTo understand moves the scroll bar from (0,0) to (0,500), but as the scroll bar is already at (0,500) position so no other actions are performed in this situation.
  • Suppose we pass a new command window.scrollTo(0,800), then you can see that the scroll bar moves more than 300 pixels because the scrollTo always starts from (0,0) as we are already at (0,500). it will move to a scroll of 300 pixels only.
  • If you try with Windows.scrollTo(0,-500), the scroll bar moves to the (0,0) position and stops there because a negative quadrant is impossible here.

Here, “document.body.scrollHeight” returns the height of the body part of the web page. in the place of the document.body.scrollHeight, we can also mention a number like scrollTo(0,300) to scroll the scroll bar up to that coordinates.

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class ScrollByExample 
{
   public static void main(String[] args) throws InterruptedException
   {

      System.setProperty("webdriver.chrome.driver", "./exefiles/chromedriver.exe");
      WebDriver driver = new ChromeDriver();

      driver.manage().window().maximize();
      driver.get("http://www.softwaretestingo.com/");

      // Down casting driver to JavascriptExecutor
      JavascriptExecutor js = (JavascriptExecutor) driver;

      // Since scrollBy works on distance. So whenever below command is called, page wil be scrolled
      // down vertically
      String command1 = "window.scrollBy(0,100)";

      // First scroll vertically
      js.executeScript(command1);
      Thread.sleep(2000);

      // Second scroll vertically
      js.executeScript(command1);
      Thread.sleep(2000);

      // Third scroll vertically
      js.executeScript(command1);
      Thread.sleep(2000);

      driver.quit();
   }
}

Scroll Down By Using Scroll() Method

By using the scroll method also, you can scroll the scroll bar, and for that, the program is

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

public class ScrollByPixelWise
{
   public static void main(String[] args) throws InterruptedException
   {

      System.setProperty("webdriver.chrome.driver", "E://chromedriver.exe");
      WebDriver driver = new ChromeDriver();

      driver.manage().window().maximize();
      driver.get("http://www.softwaretestingo.com/");

      // Here we are down casting driver to JavascriptExecutor
      JavascriptExecutor js = (JavascriptExecutor) driver;

      // This will scroll down 100 pixels
      String command1 = "window.scrollBy(0,100)";

      //We Have used sleep method so that you can notice the change
      // First 100px down vertically
      js.executeScript(command1);
      Thread.sleep(2000);

      // Second 100px down vertically
      js.executeScript(command1);
      Thread.sleep(2000);

      // Third 100px down vertically
      js.executeScript(command1);
      Thread.sleep(2000);

      driver.quit();
   }
}