How To Scroll Into View in Selenium Webdriver

In this tutorial, we will learn about ‘How to use scroll into View in Selenium’.

Also we will see how to scroll Up and down scroll bar of browser using selenium command.

Scrolling the page is essential feature to view the any element. If a web element is not visible on focused screen then we have to scroll the page to view the element.

Selenium is capable to manipulating the document object page (DOM) hence doesn’t require to scroll to perform any actions. However, in some cases we have to scroll the web page to view the element, in such cases automate the scroll operation become necessary.

Scroll in Selenium using JavaScriptExecutor

JavascriptExecutor is an interface which will perform scroll operation with Selenium. Using JavascriptExecutor QA enables to run JavaScript methods from selenium scripts.

Syntax-

JavascriptExecutor js = (JavascriptExecutor) driver;  
js.executeScript(Script,Arguments);
  • Script – This is the JavaScript that needs to execute.
  • Arguments – It is the arguments to the script (optional).

Scroll into View in Selenium

We will use scrollIntoView() method to reach the visibility of the element. Selenium will use executeScript() method to execute javascript.

Syntax –

JavascriptExecutor js = (JavascriptExecutor)driver;

js.executeScript("arguments[0].scrollIntoView()",ele );

Selenium Script-

package datapkg;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class ScrollPage {
    
    public static void main(String[] args) {
        

        System.setProperty("webdriver.chrome.driver", "C:\\Users\\AJEET\\Downloads\\chromedriver_win32 (5)\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        driver.get("https://automationtestings.com/");
        driver.manage().window().maximize();
        WebElement ele = driver.findElement(By.xpath("//div[@class='inside-article']//following-sibling::a[@href='https://automationtestings.com/difference-between-bug-defect/']"));
        
        JavascriptExecutor js = (JavascriptExecutor)driver;
        
        // This will scroll the page till the webelement is found
        js.executeScript("arguments[0].scrollIntoView()",ele );
        
        
        
    }

}

Scroll into View in Selenium

 

Script Description: First we have launched the chrome browser. Scroll the page until the mentioned element is visible on the page. Then Javascript method scrollIntoView() scrolls the page until the desire element is in full view.

js.executeScript("arguments[0].scrollIntoView()",ele );

‘arguments[0]’ means first index of page starting at 0.

And ‘ele’ is locator of webelement on the web page.


How To Scroll down the web page at the bottom of the page

Selenium Script-

package datapkg;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class ScrollPage {
    
    public static void main(String[] args) {
        

        System.setProperty("webdriver.chrome.driver", "C:\\Users\\AJEET\\Downloads\\chromedriver_win32 (5)\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        driver.get("https://automationtestings.com/");
        driver.manage().window().maximize();
        WebElement ele = driver.findElement(By.xpath("//div[@class='inside-article']//following-sibling::a[@href='https://automationtestings.com/difference-between-bug-defect/']"));
        
        // This will scroll the web page till bottom of the page
        JavascriptExecutor js = (JavascriptExecutor)driver;
        js.executeScript("window.scrollTo(0, document.body.scrollHeight)");
        
        
        
    }

}

Scroll down the web page at the bottom of the page

Script Description:

The above codes fetch maximum length of the web page using document.body.scrollHeight in DOM, then scrollBy() method scrolls down to the bottom.


Must ReadKarate Framework Tutorial


How To scroll down the web page in Selenium by defining the pixels

Selenium Script-

package datapkg;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class ScrollPage {
    
    public static void main(String[] args) {
        

        System.setProperty("webdriver.chrome.driver", "C:\\Users\\AJEET\\Downloads\\chromedriver_win32 (5)\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        driver.get("https://automationtestings.com/");
        driver.manage().window().maximize();
        WebElement ele = driver.findElement(By.xpath("//div[@class='inside-article']//following-sibling::a[@href='https://automationtestings.com/difference-between-bug-defect/']"));
        
        // This will scroll the web page till 300 pixel of the page
        JavascriptExecutor js = (JavascriptExecutor)driver;
        js.executeScript("window.scrollBy(0, 300)", “”);
        
        
        
    }

}

Script Description: This code launches the browser and navigates on specified URL. Once the url loaded then it will scroll down 300 pixel down side.

– If the user wants to scroll up then just we will modify pixel value. Now we will put negative value (0, -300). Now it will scroll in up side.

js.executeScript("window.scrollBy(0, -300)", “”);
package datapkg;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class ScrollPage {
    
    public static void main(String[] args) {
        

        System.setProperty("webdriver.chrome.driver", "C:\\Users\\AJEET\\Downloads\\chromedriver_win32 (5)\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        driver.get("https://automationtestings.com/");
        driver.manage().window().maximize();
        
        // This will scroll the web page by 300 pixels up side
        JavascriptExecutor js = (JavascriptExecutor)driver;
        js.executeScript("window.scrollBy(0,- 300)", "");
        
        
        
    }

}


Horizontal scroll in Selenium

In this case, we need to give pixel value for x coordinates.

Code for scroll horizontally right by 300 pixel:

JavascriptExecutor js = (JavascriptExecutor)driver;
js.executeScript("window.scrollBy(300, 0)", "");

 

Code for scroll horizontally left by 300 pixel:

JavascriptExecutor js = (JavascriptExecutor)driver;
js.executeScript("window.scrollBy(-300, 0)", "");

Watch this video for Scroll into View –


Summary:

Hope this tutorial   “Scroll Into View in Selenium” that will helpful to improve Selenium skills.

Bookmark this post “Scroll Into View in Selenium Webdriver” for future reference.

In future I will add more Selenium Topics.

 

Leave a Comment