How to scroll in a specific Element using Selenium WebDriver

There are times when WebElements are not recognised by WebDriver even if the element is present in the DOM. WebDriver fails to find the element which is not visible in browser’s visible area. For this we need to make that element to be visible in browser’s view. In order to make the WebElement view-able by WebDriver, we need to scroll to the element. In this blog I will consider only to scroll a specific div, not the whole browser window.
Let’s consider an example below. Here we need to click the element with tag ‘li’ and containing text as ‘[email protected]’.

The element ‘li’ have a parent element by id ‘ui-id-2’, which is active when we click another element with id ‘seller_email’. Presently when element ‘ui-id-2’ is active but the child ‘li’ is not visible in the view. Lets see, how we can perform a scroll action to the parent element.

package test;
import java.io.IOException;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.Select;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.testng.annotations.AfterSuite;
import org.testng.annotations.BeforeSuite;
import org.testng.annotations.Test;
public class test {
WebDriver driver;
WebDriverWait wait;
JavascriptExecutor js;
@BeforeSuite
public void SetupBrowser() throws InterruptedException
{
	String chrome_path = System.getProperty("user.dir") + "/chromedriver";
	System.setProperty("webdriver.chrome.driver", chrome_path);
	driver = new ChromeDriver();					// This opens a new instance of Chrome 
	driver.manage().window().maximize();
	driver.navigate().to("https://pratik.webkul.com/shopify-trunk/shopify-mp/admin/index.php?p=admin_add_product");
}
@Test
public void AddEmailToForm() throws InterruptedException, IOException
{
	getVisibility(By.id("seller_email"), 10, driver).click();
        for(int i=1;i<=10;i++){
        try{
	clickElementWhenClickable(By.xpath("//*[@id,'ui-id-2']/li[contains(text(),'[email protected]']"), 2, driver);
	break;
        }  
        catch(TimeoutException e){
	js = (JavascriptExecutor) driver;
	js.executeScript("$(\"#ui-id-2\").animate({ scrollTop: \""+100*i+"px\" })");
        }
        }


}
public WebElement getVisibility(By locator, int timeout) {
	WebElement element = null;
	wait = new WebDriverWait(driver, timeout);
	element = wait.until(ExpectedConditions.visibilityOfElementLocated(locator));
	return element;
	}
public void clickElementWhenClickable(By locator, int timeout) {
	WebElement element = null;
	WebDriverWait wait = new WebDriverWait(driver, timeout);
	element = wait.until(ExpectedConditions.elementToBeClickable(locator));
	element.click();
}
@AfterSuite
public void TearDownBrowser() throws InterruptedException
{
	driver.quit();
}

In the above code to scroll in an element we have used
js = (JavascriptExecutor) driver;
js.executeScript(“$(\”#ui-id-2\”).animate({ scrollTop: \”100px\” })”);
This piece of code looks for the element with id ‘ui-id-2’ and scroll the element to top for 100px. This goes on till we are able to click the ‘li’ with text as ‘[email protected]’. When the condition goes true, the loop breaks and we are ready to write the further script.