How to Scroll into view in Selenium Webdriver
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
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
hello sir i am using method
js.executeScript(“arguments[0].scrollIntoView(true);”, element);;
to scroll to the linktext but it is not working
Please share details about application
Nice one)))
How to use srollIntoView() to scroll up the screen?
Hi Pranjali,
The same code works for scrolling up. You need to provide a unique element available at top portion of webpage.
Hi. Mukesh ,
for side bar not able to scroll down . can u please suggest me code
Hi Roja,
Can you share the app url so that I can suggest something.
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’)]”)));
Hi Ragesh,
Use scrollIntoview instead of using pixel.
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.
Hi Shaikh,
Using Point class, you can find X and Y pixels(aka Coordinates)
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
Hi Srini, can you give example that what is your main issue?
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
Hi Heena,
Have you tried using pixels like this jse.executeScript(“window.scrollBy(1000,0)”, “”);. It uses negative and positive x axis pixels to move.
Hi,
Is the above script can be used for normal scrolling function in window. Please help….
Thanks
Hi Hariom,
This scroll into view works wherever web ui is available.
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..
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…:)
Thanks! This really helped me solve a problem I ran into.
Cheers Guillermo Chussir 🙂 I am glad it helped.
i m facing java.lang.NullPointerException
in line no 51 of this code
Hi Kritika,
Code looks fine. Can you share your code?
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);
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.
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…)
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.
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.
Hi, can you tell how much time it takes to scroll to the element?
Do I need to apply thread.sleep(millisecond) after this
Hi Kunal,
I can’t assure you about timings because it depends on Web UI. You need to observe scrolling behavior and use appropriate time.
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
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.
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?
Hi Pooja,
Check whether you are able to find elements from Developer tool which are coming before 2003.
Hi Mukesh,
I’m new to automation. your tutorials are really very helpful. Keep rocking!! Thank you so much
Hi Sudha,
Thanks for you positive comments.
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!!
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.
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
Hi Anjali,
This code working for me. Try to get unique element then above code will work.
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,
So you can do one thing also you can scroll full page then you can find that element as well.
Thanks Mukesh ..Its working for me
Great Shwetabh
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.
is this fixed?
Hi Mukesh Sir,
How to scrool windows application popup
Hi Venkatesh,
Selenium mainly automate browsers.
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
Is this code is working?
Hi Mukesh ,
Can you help in providinng a sloution to perform swipe action on an web element in Web View.
Hi Ravi,
Will upload article on this.
Very good.. simple and easy to understand… Thanks!
Thanks Bala 🙂
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.
Hey Ahmed,
I am glad to know that it helped you 🙂 Keep visiting and let me know if any help required from my side.
Thax Mukesh….
Thanks Abhishek
thank you so much, it worked
Cheers Rasta
mukesh.. it is not working for inner tables,.. provide any other alternate sol.
Hi Koteswarao,
Please share the sample application because its working from my end.
This helped me!
Hi Ann,
Thank you.
Please check other articles too and let me know if any help needed from my side 🙂
Awesome Mukesh!!!
Hi Vishy,
Thank you 🙂 Please share with your friends as well 🙂 and let me know if any help required from my end.
THanks for the help.
Thanks Karl Fokum
Thanks 🙂
Thanks Manoj
Thanks, you help me.
Thanks Vahe Keep visiting 🙂
Very useful thank you for sharing 🙂
Hi Salma,
Thanks keep visiting 🙂