Selenium is one of the most widely used test automation frameworks for web automation testing. As far as the framework is concerned, Selenium WebDriver is the most vital component for automated browser testing. Before deep-diving into how to perform scroll operations (e.g., scroll down, scroll up, horizontal scroll, etc.) using Selenium, let us take a quick look at the hierarchy of classes and interfaces in Selenium WebDriver.
The search context is the super interface in Selenium. The remote WebDriver class implements the methods in WebDriver – Search Context, Takes Screenshot, and JavaScriptExecutor interfaces.
Scrolling is an essential feature for using any web page on the internet. It doesn’t matter what content a web page hosts, it is almost never possible to place all content on the first fold and do away with the scroll bars, both horizontal and vertical.
For QA specialists to roll out robust and bug-free web applications, they need to ensure that web pages are thoroughly tested. They especially need to verify that every single UI element is functioning as expected. To do so quickly, they use test automation frameworks like Selenium.
Selenium WebDriver is capable of manipulating the Document Object Model (DOM), and hence it doesn’t require a scroll to perform certain actions. However, in some cases, there are certain web elements (for example, a submit button) that become visible only once the user has scrolled down. In such cases, automating the scroll operation becomes necessary.
Before starting with Selenium Scroll operations, let’s quickly understand the role of a JavaScriptExecutor in performing the Scroll operation.
A Scroll is a JavaScript method. The JavaScriptExecutor provides an interface that enables QA experts to run JavaScript methods from Selenium scripts. Hence, to scroll up or down with Selenium, a JavaScriptExecutor is a must.
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("window.scrollBy(0, 250)");
The scrollBy() method involves two parameters, x, and y, that represent the horizontal and vertical pixel values, respectively.
Refer to the script below, for performing Selenium scroll-down action on the Firefox browser:
public class HandleScroll
{
@Test
public void scrollDown()
{
System.setProperty("webdriver.gecko.driver","Driver Location");
WebDriver driver = new FirefoxDriver();
driver.navigate().to("Website URL");
//to perform Scroll on application using Selenium
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("window.scrollBy(0, 350)");
}
}
Output: The code initializes the Geckodriver for Firefox. Then the Firefox browser is launched, and it navigates to the specified website URL. Once the website loads, the browser window is vertically scrolled down by 350 pixels.
If a user needs to scroll up, they just need to modify the pixel value of the second parameter (in this case 350) to a negative value (-350).
Refer to the script below:
public class HandleScroll
{
@Test
public void scrollDown()
{
System.setProperty("webdriver.gecko.driver","Driver Location");
WebDriver driver = new FirefoxDriver();
driver.navigate().to("Website URL"); // Specify the website URL
//to perform Scroll on application using Selenium
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("window.scrollBy(0, -350)");
}
}
Refer to the Selenium script below:
public class ScrollByVisibleElement
{
WebDriver driver;
@Test
public void ByVisibleElement()
{
System.setProperty("webdriver.gecko.driver", "Driver Location");
WebDriver driver = new FirefoxDriver();
//Launch the application
driver.get("Website URL");
//Locating element by link text and store in variable "Element"
WebElement Element = driver.findElement(By.linkText("Try Selenium Testing For Free"));
JavascriptExecutor js = (JavascriptExecutor) driver;
// Scrolling down the page till the element is found
js.executeScript("arguments[0].scrollIntoView();", Element);
}
}
Refer to the Selenium script below:
public class HandleScroll
{
@Test
public void scrollDown()
{
System.setProperty("webdriver.gecko.driver","Drive Location");
WebDriver driver = new FirefoxDriver();
driver.navigate().to("Website URL"); // Specify the Website URL
//to perform scroll on an application using Selenium
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("window.scrollBy(0,document.body.scrollHeight)");
}
}
Output: The code above will fetch the maximum height of the webpage from the Document Object Model, and then the scrollBy() method scrolls down to the bottom.
When performing automated browser testing of websites (or web apps), there are times when the page under test has to be scrolled in a horizontal as well as vertical direction. When scrolling in the horizontal direction, you have the option to scroll either to the left or right of the page.
To scroll to the left of a webpage in a horizontal direction, use the below implementation in the automation test:
public class HorizontalLeft
{
public static void main(String[] args)
{
System.setProperty("webdriver.gecko.driver","D://Selenium Environment//Drivers//geckodriver.exe");
WebDriver driver = new FirefoxDriver();
driver.get("Website URL");
driver.manage().window().maximize();
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("window.scrollBy(6000, 0)");
try
{
Thread.sleep(4000);
}
catch (InterruptedException e)
{
e.printStackTrace();
}
js.executeScript("window.scrollBy(-3000, 0)");
}
}