[フレーム]

Automation

Selenium WebDriver tutorial Step by Step

You are here: Home / Advance Selenium / How to Scroll into view in Selenium Webdriver

How to Scroll into view in Selenium Webdriver

by 74 Comments

[画像:Scroll into view in Selenium]

A few days back when I was automating my application I got one scenario where I had so many scroll bars into the single page itself and I had to scroll all bar one by one to get specific text which I had to validate. It was a little challenging to scroll for each element. In Selenium we can do this with scrollIntoView(true) which can scroll automatically till the specific element is not present.

If you are not aware of how to validate text then the below post will help you How to verify text in Selenium

You might have a requirement to scroll down the page but this requirement was different, so here I used Java Script executor, which allowed me to scroll into view.

If you want to scroll down the page itself then you can check the below post which allows us to do the same.

How to scroll down into page using Selenium Webdriver

Scroll into view in Selenium

How to Scroll into view in Selenium Webdriver.

Now let us talk about how exactly we can scroll this using Selenium. Unfortunately, Selenium does not have an inbuilt method that allows us to scroll into view but it does not mean we cannot scroll.

We can scroll into view in Selenium using JavaScript executor.

You must be wondering now Java Script will help us in this case. I have created a post, which actually tells you what is the need for JavaScript in Selenium, and what is the other thing, which we can do via Java Script.

What is Java Script Executor in Selenium and What are the Usage of Same.

Recently I have uploaded a video on the same please check.

[フレーム]

Program for Scroll into view in Selenium Webdriver

Now we will see the detailed program for this we actually scroll into view in Selenium, will extract the text, and will verify the same.

In my case, I am just verifying it but in your case, you may have to perform some other activity as well.

I will be using this application as Sample- Sample Application for Demo 

package Demo;
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
public class TestScroll {
public static void main(String[] args) {
// Start browser
WebDriver driver=new FirefoxDriver();
// Maximize browser
driver.manage().window().maximize();
// Pass application URL
driver.get("http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html");
// Create instance of Javascript executor
JavascriptExecutor je = (JavascriptExecutor) driver;
//Identify the WebElement which will appear after scrolling down
WebElement element = driver.findElement(By.xpath(".//*[@id='mCSB_3_container']/p[3]"));
// now execute query which actually will scroll until that element is not appeared on page.
je.executeScript("arguments[0].scrollIntoView(true);",element);
// Extract the text and verify
System.out.println(element.getText());
}
}

If you find this useful then please share with friends. Comment below if any doubt, suggestion or feedback.

For More updates Learn Automation page

For any query join Selenium group- Selenium Group

Reader Interactions

Comments

  1. kunal says

    hello sir i am using method
    js.executeScript(“arguments[0].scrollIntoView(true);”, element);;
    to scroll to the linktext but it is not working

  4. Ragesh C says

    Hi Mukesh,

    In my case below 1st statement is failing because the element is not visible at this point. It becomes visible only after scrolling. I need to click the object after scrolling. What should i be doing in that case? i tried scrolling using pixel but it does not scroll. Mine is a react application. Hope to see a response.

    WebElement lastModifiedColHeader = driver.findElement(By.xpath(“//*[@class=’ag-header-row’]//*[contains(text(),’LAST MODIFIED’)]”));
    js.executeScript(“arguments[0].scrollIntoView();”, driver.findElement(By.xpath(“//*[@class=’ag-header-row’]//*[contains(text(),’LAST MODIFIED’)]”)));

  5. Jasimuddin shaikh says

    hi Mukesh,

    can you please say for e.g jse.executeScript("window.scrollBy(1000,0)", "");

    how to find pixels .as (1000,0)

    i understand these are for x axis and y axis how to find it by inspecting an element.

  6. srinivas says

    Hi mukesh regularly i wantched ur videos and following ur content and i have the doubts on sliding bar which is in your videos you told about the main scrolling bars and internal scrolling bars how we perform in how many ways

  7. Heena says

    Hi Mukesh,
    I have scroll horizontally to right using Action perform as below:
    Actions actions = new Actions(driver);
    actions.moveToElement(element1).perform();

    Now, I again want to scroll back to original position/left. How I can achieve this. I used below approach:
    Actions actions = new Actions(driver);
    actions.moveToElement(element2).perform();
    OR
    (JavascriptExecutor)driver.executeScript(“arguments[0].scrollIntoView()”, element2);

    Can you please suggest me some better approach to scroll left and right on the same page multiple times

  8. Hariom says

    Hi,

    Is the above script can be used for normal scrolling function in window. Please help….

    Thanks

  9. Smruti says

    Hi,

    I am using JavascriptExecutor for scroll. However, in Selenium 3 onward, the JSExecutor needs the Gecko Driver to run the script. Is there any way without using the gecko driver I can scroll?

    Appreciate your help..

    • Mukesh Otwani says

      Hi Smruti,

      There is no connection between Gecko driver and JSExecutor. With Selenium 3, gecko driver is required to launch Firefox browser just like we do for Chrome browser.
      JavaScriptExecutor is as it was…:)

  12. Vi says

    Thanks for the article!

    I have a dynamic list, containing varying no. of items, being displayed based on some selection.
    If the list has more than 7 items, on hovering, the list shows a scroll bar. (If there are fewer items, there will be no scroll bar.)
    I have found the element of the scroll bar based on its class name but tring to scroll using webdriver fails.
    Here is the code:

    //hover
    Actions action = new Actions(driver);
    WebElement placesList = driver.findElement(By.id(“divPlaces”));
    action.moveToElement(placesList).perform();
    //scroll bar element
    element = driver.findElement(By.className(“sbar”));
    //scroll the list
    ((JavascriptExecutor) driver).executeScript(“arguments[0].scrollIntoView(true)”, element);

    • Mukesh Otwani says

      Hi Vi,

      If you check my blog post then you might have observed that as per your scenario, (JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true)", element); ‘element’ here is Webelement where you want to scroll down the control. So in your scenario you have taken scroll bar itself as webelement(as per my observation based on naming convention) which is wrong. You have to mention element as webelement where you want to reach after scroll action.

      • Vi says

        Thanks Mukesh,

        I was expecting scroll bar as web element and hence was trying to get its locator.
        In my case, the scroll bar appears when I hover mouse over the list. The items in the list have hyperlinks and clickable. With the above code (after removing the statement to get scroll bar element), the “frame” containing a drop down box and this list, move up. It doesn’t move up the scroll bar of the list and thus I am not able to view hidden item without scrolling.
        (Please note this is not scrolling the browser’s scroll bar but a dynamic scroll bar in a list of hyperlinked items. If the list has more than 7 items, on hovering, the list shows a scroll bar otherwise no scroll bar.)

        How can I send you a screenshot of the page?

        HTML code:

        Places

        hyd

        (removed 7 more items for simplicity…)

      • Vi says

        Update: I got a thought to share. The list element is always visible on the left of the page (and I need not move/scroll to this element to make it visible as actions.moveToElement() does). When I hover, scroll bar within this list appears and I can click the bar, drag it down to see (last) items.

        With the above code, it is moving the “frame” up i.e. everything from ‘Country’ to the list below move a bit up but still the last hidden item in the dynamic is not visible.

        • Mukesh Otwani says

          Hi Vi,

          Handling this kind of control using Selenium is tough as data in drop down is dynamic. You have to do scroll action multiple times in order to see full drop down. I can try from if share me app url because this requirement requires hit and try actions.

  13. Kunal says

    Hi, can you tell how much time it takes to scroll to the element?
    Do I need to apply thread.sleep(millisecond) after this

  14. Pooja says

    It helped me in scrolling down But using this code, doesn’t scroll up
    Eg. Dropdown values are 1950 to 2044 and When i click on element in UI, 2003 appears on the screen. So, using given javascript executer code, I am able to select values after 2003 and i am failed to select values before 2003. Please help

    • Mukesh Otwani says

      Hi Pooja,

      Javascript Executor always scroll the page when it is able to find element on page. In your case, click enables the values to get visible after 2003. Then how driver get values which are before 2003. WebDriver object catches those elements which are visible in developer tool.

      • Pooja says

        Okay, i understood. but when i click on element in UI, drop down gets open and only 2003 to 2009 values are visible But still i am able to select upto 2044 using scrollIntoview even those are not visible. then why not before 2003.

        Is there any other way to select values before 2003?

  16. Kishan says

    Hi Mukesh,

    Thanks for all the efforts and help you provide in teaching us selenium. I have a doubt in below code:

    je.executeScript(“arguments[0].scrollIntoView(true);”,element);

    i want to know what does ‘arguments[0]’ mean?

    Thanks in advance!!

    • Mukesh Otwani says

      Hi Kishan,

      arguments[0] defines the index of locator on the page. Suppose for given locator, if you are having multiple matching nodes then arguments[0] points to first one.

  17. anjali says

    hi,mukesh …this code is not working for me ,i have to select time from the dropdown,for which i need to scroll down ,up to the element .Can u pls provide me the code ,as I am working on the company’s project and i need it asap

    • anjali says

      i provided the x path of the element ,upto which i have to scroll,but it is not working ,but when iam using movetoElement,it is working fine ,but basically the problem is ,i have to select the time from the excel and then i have to compare it with the element present on the main page ,,for that i have to scroll it down,

  19. Shraddha Gautam says

    Hi Mukesh,
    I am working on new site, and as you know News block are dynamic, some time they appears in top and another time they can come down or removed from the page. can you please suggest how to scroll in this kind of page where you don’t know the exact location and you have to move down to find the element also wait statement is needed in it. please help me out.

  21. roja says

    hi sir,i want scroll down to bottom …if i use scrollToView() method shall use WebElement…
    without using WebElement how can i use this methos like
    public void clickgooglePlusIcon()
    {
    je.executeScript(“arguments[0].scrollIntoView(true);”);
    //je.executeScript(“window.scrollTo(0, document.body.scrollHeight)”);
    WebDriverWait wait = new WebDriverWait(getDriver(), 20);
    je.executeScript(“arguments[0].scrollIntoView(true);”);
    //je.executeScript(“window.scrollTo(0, document.body.scrollHeight)”);

    googlePlus.click();

    }
    pls give me the solution

  24. Mohammed Shahab Ahmed says

    Thanks a lot. Your way of explanation is very good. I was searching such type of videos from very long time, now i got . Thanks again and keep it up.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

AltStyle によって変換されたページ (->オリジナル) /