In this tutorial, we will see how to scroll down or up a page in Selenium WebDriver.
We do see Scrollbar on a web page if the entire page doesn’t fit in the screen and it’s a very common thing that we see with all web applications. A Scrollbar allows us to move around the screen in horizontal as well as vertical directions.
Selenium Webdriver does not need to scroll down on a page to perform required actions on web elements as it manipulates DOM. Having said that, in certain web pages, a few elements only become visible once the user has scrolled to them. In such cases, it becomes necessary to perform either scroll up or down operation in Selenium.
How to Scroll Down or UP in Selenium?
Selenium does not have any web element method to scroll in Selenium WebDriver.Having said that, we can use JavaScriptExecutor interface to execute JavaScript methods that will help us out to perform scroll vertically or horizontally. We can use the following syntax to scroll in Selenium using JavaScriptExecutor.
As per the above screenshot, we can observe that the scrollBy() method requires two parameters, x, and y, that represent the horizontal and vertical coordinates in pixel values, respectively.
Selenium Scripts to scroll down or up the Page
We will learn how to automate the following test scenarios.
- How to scroll down the web page by pixel?
- How to scroll down to the bottom of the page?
- How to Scroll Down the Web Page Until the Element Becomes Visible?
- How to scroll Horizontally on the web page?
- How to scroll to the top of the page?
How to Scroll Down the Web Page by Pixel?
The following Selenium script shows how to scroll down to 500 pixels action.
|
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 |
import java.util.concurrent.TimeUnit; import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; public class ScrollDownInSelenium { public static void main(String[] args) { String BrowserDriverPath= "C:\\SeleniumBrowserDrivers\\chromedriver.exe"; System.setProperty("webdriver.chrome.driver",BrowserDriverPath); WebDriver driver = new ChromeDriver(); driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS); driver.navigate().to("https://www.w3schools.com/cssref/pr_pos_overflow.asp"); driver.manage().window().maximize(); //Performing Scroll down to 500 pixels JavascriptExecutor js = (JavascriptExecutor) driver; js.executeScript("window.scrollBy(0,500)", ""); } } |
Code Explanation: We are providing 500 pixels as the Y coordinate to scroll downward.
How to Scroll Down at the Bottom of the Page?
The following Selenium script shows how to scroll down to the bottom of the page.
|
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 |
import java.util.concurrent.TimeUnit; import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; public class ScrollDownToBottomInSelenium { public static void main(String[] args) { String BrowserDriverPath= "C:\\SeleniumBrowserDrivers\\chromedriver.exe"; System.setProperty("webdriver.chrome.driver",BrowserDriverPath); WebDriver driver = new ChromeDriver(); driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS); driver.navigate().to("https://www.w3schools.com/cssref/pr_pos_overflow.asp"); driver.manage().window().maximize(); //Performing Scroll down to the bottom of the page JavascriptExecutor js = (JavascriptExecutor) driver; js.executeScript("window.scrollTo(0, document.body.scrollHeight)"); } } |
Code Explanation: The “document.body.scrollHeight” command returns the complete height of the web page and that is used as Y coordinate to scroll down to the bottom of the page.
How to Scroll Down the Web Page Until the Element Becomes Visible?
This example will demonstrate to you how to scroll down until the HTML Excercises link becomes visible on the w3schools home page.
|
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 34 |
import java.util.concurrent.TimeUnit; 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 ScrollDownUntilElementBecomesVisible { public static void main(String[] args) { String BrowserDriverPath= "C:\\SeleniumBrowserDrivers\\chromedriver.exe"; System.setProperty("webdriver.chrome.driver",BrowserDriverPath); WebDriver driver = new ChromeDriver(); driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS); driver.navigate().to("https://www.w3schools.com/"); driver.manage().window().maximize(); // Locating the element using XPath and storing it in element variable WebElement element = driver.findElement(By.xpath("//*[@id=\"main\"]/div[9]/div[1]/div[1]/p/a")); JavascriptExecutor js = (JavascriptExecutor) driver; //This will scroll down the page until the desired element becomes visible js.executeScript("arguments[0].scrollIntoView();", element); } } |
Code Explanation: In the above example, the Javascript method scrollIntoView() scrolls the page until the mentioned element becomes.
How to Scroll Horizontally on the Web Page?
In the previous example, we used to scrollIntoView() to scroll down until the desired elements become visible. The same method also applies to scroll horizontally element becomes visible. So the approach will remain the same.
js.executeScript(“arguments[0].scrollIntoView();”,element );
How to Scroll Back to the Top of the Page?
The following example shows how to scroll back top to the page.
|
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 34 |
import java.util.concurrent.TimeUnit; import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; public class ScrollDownAndTopInSelenium { public static void main(String[] args) throws InterruptedException { String BrowserDriverPath= "C:\\SeleniumBrowserDrivers\\chromedriver.exe"; System.setProperty("webdriver.chrome.driver",BrowserDriverPath); WebDriver driver = new ChromeDriver(); driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS); driver.navigate().to("https://www.w3schools.com/"); driver.manage().window().maximize(); //Performing Scroll down to the bottom of the page JavascriptExecutor js = (JavascriptExecutor) driver; js.executeScript("window.scrollTo(0, document.body.scrollHeight)"); System.out.println("Scroll to bottom"); Thread.sleep(3000); js.executeScript("window.scrollTo(0,0)"); System.out.println("Scroll to Top"); } } |
Code Explanation: We have to provide 0 in the second parameter of the scrollTo() method as the Y coordinate to scroll to the top of the page.
Conclusion
We have seen various possible combinations of scroll down and up on a page.
Recommended Posts
- What is Selenium WebDriver & its Architecture
- How to Use CSS Selector in Selenium WebDriver | 13 Examples
- Handle Dynamic Web Tables In Selenium WebDriver
- How to Handle Multiple Windows In Selenium WebDriver
- Double Click and Right Click in Selenium with Examples
- Send Keyboard Keys in Selenium Webdriver With Example
- Handle iFrame in Selenium WebDriver
