What is a Scrollbar?
A Scrollbar is an interaction technique allowing us to Scroll the continuous text, pictures, or any other content in a horizontal or vertical direction on a device’s screen whenever the web page scroll does not fit into the visible screen area.
It helps to view the content on a screen by scrolling the web page up, down, left, or right.
There are mainly two types of the scrollbar: horizontal and vertical scroll bars.
How to Scroll Down the Web Page by Pixel in Selenium?
To scroll down a web page by pixel, we will use the scrollBy() method. This method will scroll the web page in the window by a specified number of pixels left or right and up or down. The syntax for the scrollBy() method of Javascript is given below:
window.scrollBy(int x-pixels, int y-pixels);
This method is called by using the window object by passing the number of pixels as parameter values to the method.
The browser will automatically creates the object of the window. The window object denotes the browser’s window. All the global variables, functions/methods, and objects of Javascript can be called by using this window object because they are members of the window object.
Here, x-pixels are the numeric value passed to the method representing the number of horizontal pixels by which we can scroll the window in the horizontal. x-pixels represents the number at x-axis.
If the passed number is positive, the window will move to the left and movesto the right if the number passed is negative.
y-pixels is a numeric value that represents the vertical number of pixels. y-pixels represents number at the y-axis. If the number passed is positive, then the window scrolls down, whereas, if it is negative, the window scrolls up.
Let us automate a simple scenario in which we will scroll the web page down by 1000 pixels vertically.
Scenario to Automate:
a. Launch the Firefox web browser.
b. Open the website “https//www.yahoo.com.”
c. Scroll the home page down by 1000 pixels vertical.
Below is the code:
package scrollUpandDown;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
public class VerticalScrollDown
{
public static void main(String[] args)
{
WebDriver driver = new FirefoxDriver();
driver.manage().window().maximize();
String url = "https://www.yahoo.com";
driver.get(url);
JavascriptExecutor js = (JavascriptExecutor)driver;
// Call scrollBy() method of Javascript using the window object by passing number of pixels as parameter values.
// Call executeScript() method of JavascriptExecutor interface by passing window.scrollBy() as a parameter value.
js.executeScript("window.scrollBy(0,1000)");
}
}
How to Scroll Down Web Page by the visibility of Element?
Let us take a scenario where we will scroll down a web page by the visibility of an element.
Scenario need to Automate:
1. Launch the Firefox browser.
2. Open the given URL: “https://selenium08.blogspot.com/2020/02/vertical-scroll.html” in the Firefox browser.
3. Now, scroll the web page till the mentioned element is visible on the current page.
To scroll down a web page until the mentioned element’s visibility, we will use a scrollIntoView() method. This method is used to scroll the web page or browser window until the mentioned element is visible on the screen.
The syntax for the scrollIntoView() method is as follows:
Syntax:
element.scrollIntoView(alignTo)
This method accepts an optional boolean value and does not return anything. A boolean value means the type of alignment.
Below is the code:
package scrollUpandDown;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
public class ScrollByVisibleElement
{
public static void main(String[] args)
{
WebDriver driver = new FirefoxDriver();
driver.manage().window().maximize();
String URL1 = "https://selenium08.blogspot.com/2020/02/vertical-scroll.html";
driver.get(URL1);
WebElement element1 = driver.findElement(By.xpath("//a[text() = 'Health']"));
JavascriptExecutor js = (JavascriptExecutor)driver;
js.executeScript("arguments[0].scrollIntoView();", element1);
}
}
In the above statement “js.executeScript(“arguments[0].scrollIntoView()”, element );”, arguments[0] denotes first index of page starting from 0 whereas, ” element ” is the locator on the web page.
Now we will run the above test script and observe the output on the web page whether the web page will scroll down until the visibility of the element or not. The output of the above is shown below.
How to Scroll Down at bottom of a Web page?
Let us take the same URL as and we will scroll down till the bottom of the page. The scrollTo() method scrolls until the end of the page. This method will scroll the web page to the specified coordinates. The syntax for the scrollTo() method is given below:
Syntax:
window.scrollTo(int x, int y)
This method will accept two integer values as parameters in pixels and will return nothing.
For instance:
Scroll the web page to position 400 horizontally and 500 vertically:
window.scrollTo(400, 500);
Below is the code:
package scrollUpandDown;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
public class ScrollByPage
{
public static void main(String[] args)
{
WebDriver driver = new FirefoxDriver();
driver.manage().window().maximize();
String URL = "https://selenium08.blogspot.com/"; driver.get(URL);
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("window.scrollTo(1, document.body.scrollHeight)");
}
}
In the above code, we will first launch the given URL in the Firefox browser and then scroll the web page horizontally until the mentioned element is visible on the current screen.
Now we will run the above code and observe the output. When you execute the above script, you will get the following output as shown in the below screenshot.
