How to scroll to bottom of div element Selenium Webdriver

Question

I have a use case wherein there's a div element on the webpage, it appears like a popup dialog as soon as you click a link (its not an actual popup, its something like dialog boxes which opens in Facebook when you click a link to check reactions on your posts etc.)

I'm using Selenium WebDriver with Java to automate tests for this application, my use case involves me to scroll to the bottom of the dialog box where there is a link to show more items, when user clicks show more, it populates another 10 items in the list and so on until there are no other items left for the user to visit.

So basically I have to scroll down on that particular div element till I keep seeing Show More link and when driver is not able to find show more link it should stop.

Note - I can't just scroll to bottom of the page using javascript window.scrollTo() as it will scroll down through whole webpage, however I just want to scroll to bottom of that division element only.

If anybody have any idea on how to achieve this please let me know.

Thanks for the help in advance !

Thurstan

1. Please add relevant HTML for your example. Also what is the error that you're getting in your code would be helpful. – Wivina

Answer 1

Another way of scrolling to the bottom inside (of) any scroll-able element:

public void scrollToBottomInsideDiv(WebElement scrollArea) {
    JavascriptExecutor js = ((JavascriptExecutor) webdriver);
    js.executeScript("arguments[0].scrollTo(0, arguments[0].scrollHeight)", scrollArea);
}

Doretha

Answer 2

WebElement ele= driver.findElement(By.id("id_of_element"));
((JavascriptExecutor)driver).executeScript("arguments[0].scrollIntoView();", ele);

or

WebElement ele= driver.findElement(By.id("id_of_element"));
Actions builder = new Actions(driver);
builder.moveToElement(ele).click();
Action build=builder.build();
build.perform();

Ostracism

Answer 3

I have had this kind of issue and I resolved this using a similar question asked on SQA SO. Here is the post.

Please see the last answer by Sagar007, which uses a separate function scroll_Page() to achieve this.

Code taken directly from his answer

Some HTML page have internal (custom) scroll bar. We have to handle with little bit different way. Javascript is not working here.

Solution :

WebElement scrollArea = 
driver.findElement(By.cssSelector("div.slimScrollBar"));

I added a new step, where I clicked on the div element , using click() method and then proceeded to next step.

Create method scroll_Page as given below. Call this method as

 scroll_Page(scrollArea ,100);

Where scrollArea is your dragged(scroll) element and 100 is scroll points.

  public static boolean scroll_Page(WebElement webelement, int scrollPoints)
{
try
{               
    Actions dragger = new Actions(driver);
    // drag downwards
    int numberOfPixelsToDragTheScrollbarDown = 10;
    for (int i = 10; i < scrollPoints; i = i + numberOfPixelsToDragTheScrollbarDown)
    {
        dragger.moveToElement(webelement).clickAndHold().moveByOffset(0, numberOfPixelsToDragTheScrollbarDown).release(webelement).build().perform();
    }
    Thread.sleep(500);
    return true;
}
catch (Exception e)
{
    e.printStackTrace();
    return false;
}

Wivina

Answer 4

you can use scrollIntoView

scrollIntoView vs moveToElement scrollIntoView vs moveToElement

Pass the more items link element as an argument.

((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", element);

You can also use moveToElement

Actions actions = new Actions(driver);
actions.moveToElement(element);
actions.perform();

Croom

Answer 5

I had a div on a page that needed to be scrolled. Further, the data was loaded dynamically. The function whould be called from while(someCondition()) loop. Used Java

    private int scroll; 
    private void scrollDownPopup() {
        scroll += 1000;
        JavascriptExecutor jse = (JavascriptExecutor) browser;
        // you can get query selector from inspector
        jse.executeScript("document.querySelector('body > div.Blah.Blah1 > div > div.ClassOfYourDiv').scrollTo(0, "
                + scroll + ");");
    }

Ethelyn

Answer 6

If you want to scroll to the end block of the particular element, you can use this approach:

public void scrollToEndBlockOfElement(WebElement element) {
        JavascriptExecutor javascriptExecutor = (JavascriptExecutor) driver;
        javascriptExecutor.executeScript("arguments[0].scrollIntoView({block: 'end'})", element);
    }

Trapezius