Scroll element into view
You must have faced this problem of scrolling an element into user view. Just for the purpose of taking screenshot or enabling the element visibility, you end up needing to scroll the element.
Selenium usually does it before performing any action. However that in a non-deterministic way to scroll, in the sense that you have to perform an action to scroll the element to view. This way will suffice most of the time, still, we can understand how to make use of javascript to perform scroll actions more deterministically.
Let’s start with a situation and we will see different ways to solve the situation
Situation
Let’s say on your page you have an element that is located somewhere near the end of the web page. You want to get this element into view. You want to do it deterministically so that you are always in control of where the element is.
Approach 1
Use element.scrollIntoView() method of element object in JavaScript. The signature of the method is
element.scrollIntoView(alignWithTop)
alignWithTop is a Boolean, if you want to your element to come in view with top of the element touching the top of the viewport of browser put this as true else a false.
here is the code listing
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
public static void main(String[] args) throws Exception { // TODO Auto-generated method stub FirefoxDriver ff = new FirefoxDriver(); ff.get("https://original.toolsqa.com"); Thread.sleep(5000); ff.executeScript("document.getElementById('text-8').scrollIntoView(true);"); } |
Approach 2
We scroll the page by lines till our webelement is visible. To do this we will use the JavaScript function
window.scrollByLines(NumberofLines)
NumberofLines is an integer value specifying a number of lines to scroll. A positive value signifies downward scroll and a negative value specifies upward scroll.
here is the code listing of this
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
public static void main(String[] args) throws Exception { // TODO Auto-generated method stub FirefoxDriver ff = new FirefoxDriver(); ff.get("https://original.toolsqa.com"); Thread.sleep(5000); //ff.executeScript("document.getElementById('text-8').scrollIntoView(false);"); WebElement targetElement = ff.findElementById("text-8"); int x = 0; while((Double) ff.executeScript("return document.getElementById('text-8').getBoundingClientRect().top") > 0 ) { x = x + 2; ff.executeScript("window.scrollByLines(2)"); System.out.println("Client top is = " + (Double) ff.executeScript("return document.getElementById('text-8').getBoundingClientRect().top")); } System.out.println("Element is visible after " + x + " scrolls"); } |
This is a vertical scroll approach. This should be enough at 100% zooms. However, if your page is not at 100% or is bigger then the viewport of the browser you can do a similar horizontal scroll. If you see that in the second approach we have assumed that element is somewhere down in the page view. It may not be the case always, please feel free to modify the method to suit the conditions where you have to scroll upwards too. Take it as a homework and post your code in comments.
I hope this article gives you a basic understanding if scroll options available to you via javaScript. Go through more detailed JavaScript functions and you may get something really worth using.
