How JavascriptExecutor helps in scrolling webpage in Selenium?

There are some test failure situations which terminates the test execution by sending some Selenium exceptions like NoSuchElementException and ElementNotVisibileException. When we go to the root cause of failure we found that Element was correct and it was even visible in DOM when checked with isDisplayed() method, but, the test failed because the position of the element was at the bottom of the web page. If we manually scroll to the bottom where the element is available then test gets passed. We found the solution and we concluded to insert two additional lines in the code to handle the scrolling webpage part. Hence, we identified that JavascriptExecutor helps in scrolling webpage in Selenium WebDriver.

So, it was a bingo for us! 🙂

Those who are naïve to this scenario let me tell you from the basics of scrolling scenario.

Do you know?

How to handle error message using Selenium WebDriver?

What is a scrollbar?

A scrollbar is a business requirement which appears when any applications or entire web page fails to fit at a single time in a given resolution of the screen.

This definition is the best suitable from the reference point of view of a business analyst. Let me explain to you what a non-analyst or non-techy defines scrollbar.

A scrollbar is a long strip which is placed at the extreme right edge of the web page and the extreme bottom edge of the same web page as well. The strip or scrollbar which is placed at the extreme right edge is used to scroll the page up and down when entire content is not visible at once; whereas, the strip which is placed at the extreme bottom edge of the webpage allows moving right and left to mark the visibility of the content.

You saw how two kinds of people define the scrollbar. Anyway, our main goal is to satisfy the need of a Business analyst and a beta user as well.

What are the constraints in scrolling webpage with Selenium?

We encounter some roadblock too, which is actually not a roadblock.

Okay… Let me explain you the kind of roadblock.

When we use the scroller to see the hidden part of the content which is either at the boom or at the right side of the webpage, then DOM structure gets disrupted. Hence, we have to be very wise in scrolling webpage in Selenium using JavascriptExecutor. We can use wherever necessary only with proper wait time to load the page and the DOM hierarchy.

JavascriptExecutor helps in scrolling webpage in Selenium

Here is the sample JavascriptExecutor syntax which is used to handle any kind of adverse scenarios in Selenium.

Well, Let us stick to scrolling webpage as of now. We will discuss the in-depth study of JavascriptExecutor in a separate blog post.

Here we go…

JavascriptExecutor js = (JavascriptExecutor)driver;

js.executeScript(arg0, arg1);

 

Here, arg0 should have your script that you want to execute and arg1 should have an argument.

Different webpage scrolling scenarios to apply JavascriptExecutor in Selenium

You encounter mainly four types of scenarios where the requirement for scrolling webpage goes. Those scenarios are discussed in details with their sample codes.

Scenario# 1: Scrolling webpage vertically up, down and to some coordinates

This is the first scenario that we are going to discuss. In this scenario, we move the right edged scrollbar up and down and even to the extreme bottom. Let’s have a look at the script.

Test Case# 1: Scrolling webpage to the vertically down using JavascriptExecutor in Selenium

In this test case, we have a requirement to scroll the webpage till it reaches the bottom level. So here is the sample code.

JavascriptExecutor js = (JavascriptExecutor)driver;

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

 

We will have entire program below, but before that let me explain you the scenario. We are launching inviul.com and we are not maximizing it so that the full view of the content won’t be displayed. Once the webpage is loaded completely then we use JavascriptExecutor to scroll to the bottom. Here is the complete code snippet:

package SeleniumTester;

import java.util.concurrent.TimeUnit;

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class ScrollDemo {
  @Test
  public void scrollDemo() throws InterruptedException {
 System.setProperty("webdriver.chrome.driver", "C:\\Selenium\\chromedriver.exe");
	  
	  WebDriver driver = new ChromeDriver();
	 
	  driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
	  
	  driver.get("https://www.inviul.com");
	  
	  Thread.sleep(3000);
	  
	  //Javascript command
	  JavascriptExecutor js = (JavascriptExecutor)driver;
	  js.executeScript("window.scrollTo(0, document.body.scrollHeight)");
	  	  
	  Thread.sleep(5000);
	  
	  driver.close();
	  
	  driver.quit();
	  
  }
}

 

Test Case# 2: Scrolling webpage to vertically up position using JavascriptExecutor in Selenium

This test case is opposite to the Test Case# 1. Here, we are writing commands to scroll to the vertically up position. Here is the sample code.

JavascriptExecutor js = (JavascriptExecutor)driver;

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

 

The entire process is same. Rather, it is working in opposite direction to the first test case. The entire code snippet is below:

package SeleniumTester;

import java.util.concurrent.TimeUnit;

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class ScrollDemo {
  @Test
  public void scrollDemo() throws InterruptedException {
 System.setProperty("webdriver.chrome.driver", "C:\\Selenium\\chromedriver.exe");
	  
	  WebDriver driver = new ChromeDriver();
	 
	  driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
	  
	  driver.get("https://www.inviul.com");
	  
	  Thread.sleep(3000);
	  
	  //Javascript command
	  JavascriptExecutor js = (JavascriptExecutor)driver;
	  js.executeScript("window.scrollTo(document.body.scrollHeight, 0)");
	  	  
	  Thread.sleep(5000);
	  
	  driver.close();
	  
	  driver.quit();
	  
  }
}

Test Case# 3: Scrolling webpage to coordinates using JavascriptExecutor in Selenium

In this test case, we are writing commands to scroll to some coordinates at x-position and y-position. Commands will be the same as above, instead of extreme top and bottom; we will enter some defined pixels. Let’s have a look at its command.

JavascriptExecutor js = (JavascriptExecutor)driver;

js.executeScript(“window.scrollBy(500,600)”);

 

The entire program is here:

package SeleniumTester;

import java.util.concurrent.TimeUnit;

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class ScrollDemo {
  @Test
  public void scrollDemo() throws InterruptedException {
 System.setProperty("webdriver.chrome.driver", "C:\\Selenium\\chromedriver.exe");
	  
	  WebDriver driver = new ChromeDriver();
	 
	  driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
	  
	  driver.get("https://www.inviul.com");
	  
	  Thread.sleep(3000);
	  
	  //Javascript command
	  JavascriptExecutor js = (JavascriptExecutor)driver;
	  js.executeScript("window.scrollTo(500, 600)");
	  	  
	  Thread.sleep(5000);
	  
	  driver.close();
	  
	  driver.quit();
	  
  }
}

 

Scenario# 2: Scrolling webpage horizontally left and right to some coordinates

In this scenario, we are going to discuss the movement of lower edge strip to the left and right. It helps us to see the hidden content which is at the extreme right of the webpage.

Test Case# 1: Scrolling webpage to the horizontally right direction using JavascriptExecutor in Selenium

In this test case, we use JavascriptExecutor to scroll the webpage to the right direction. Here is the command.

JavascriptExecutor js = (JavascriptExecutor)driver;

js.executeScript(“window.scrollBy(1000,0)”);

 

The entire program is here-

package SeleniumTester;

import java.util.concurrent.TimeUnit;

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class ScrollDemo {
  @Test
  public void scrollDemo() throws InterruptedException {
 System.setProperty("webdriver.chrome.driver", "C:\\Selenium\\chromedriver.exe");
	  
	  WebDriver driver = new ChromeDriver();
	 
	  driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
	  
	  driver.get("https://www.inviul.com");
	  
	  Thread.sleep(3000);
	  
	  //Javascript command
	  JavascriptExecutor js = (JavascriptExecutor)driver;
	  js.executeScript("window.scrollBy(1000, 0)");
	  	  
	  Thread.sleep(5000);
	  
	  driver.close();
	  
	  driver.quit();
	  
  }
}

 

Test Case# 2: Scrolling webpage to the horizontally left direction using JavascriptExecutor in Selenium

This test case is used to verify the movement of the scrollbar to the horizontally left direction and the command for the same is-

JavascriptExecutor js = (JavascriptExecutor)driver;

js.executeScript(“window.scrollBy(-1000,0)”);

 

The program for the same test case is here-

package SeleniumTester;

import java.util.concurrent.TimeUnit;

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class ScrollDemo {
  @Test
  public void scrollDemo() throws InterruptedException {
 System.setProperty("webdriver.chrome.driver", "C:\\Selenium\\chromedriver.exe");
	  
	  WebDriver driver = new ChromeDriver();
	 
	  driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
	  
	  driver.get("https://www.inviul.com");
	  
	  Thread.sleep(3000);
	  
	  //Javascript command
	  JavascriptExecutor js = (JavascriptExecutor)driver;
	  js.executeScript("window.scrollBy(-1000, 0)");
	  	  
	  Thread.sleep(5000);
	  
	  driver.close();
	  
	  driver.quit();
	  
  }
}

 

Scenario# 3: Scrolling webpage till the particular web element is visible

This could be one of the most important scenarios in your Selenium Automation testing project. As discussed initially, sometime your test may fail because the web element which WebDriver is looking for may not be visible at the resolution of the screen or may be hidden at the bottom of the web page. Hence, in such scenario you need to scroll the scrollbar, using JavascriptExecutor, till the location where such element is attached to the DOM.

Let’s look at the command below:

WebElement wb = driver.findElement(By.xpath(“xpath_expression”));

JavascriptExecutor js = (JavascriptExecutor)driver;

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

 

Here, wb is the element where scrollbar will move. Let’s have a look at the entire program below:

package SeleniumTester;

import java.util.concurrent.TimeUnit;

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 ScrollDemo {
  @Test
  public void scrollDemo() throws InterruptedException {
 System.setProperty("webdriver.chrome.driver", "C:\\Selenium\\chromedriver.exe");
	  
	  WebDriver driver = new ChromeDriver();
	 
	  driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
	  
	  driver.get("https://www.inviul.com");
	  
	  Thread.sleep(3000);
	  
	  WebElement wb = driver.findElement(By.xpath("//*[@class='page-numbers'][text()='9']"));
	  
	  //Javascript command
	  JavascriptExecutor js = (JavascriptExecutor)driver;
	  js.executeScript("arguments[0].scrollIntoView();",wb);
	  	  
	  Thread.sleep(5000);
	  
	  driver.close();
	  
	  driver.quit();
	  
  }
}

Hope this tutorial will help you in scrolling webpage by using Selenium’s JavascriptExecutor library. Share your doubts in c the mment below.

Stay tuned for awesome guided.

Happy Learning. 🙂