Scroll Down or UP a Page in Selenium Webdriver: I look into a web page only a few parts are visible and few portions are not visible. So to make the other part also visible we need to scroll the scroll bar in horizontal and vertically. We Can scroll those the scroll bar with the help of the JavascriptExecutor interface.
Syntax:
The syntax of how to use JavascriptExecutor is like below:
JavascriptExecutor js = (JavascriptExecutor) driver; js.executeScript(Script,Arguments);
Script: Here we need to pass the script which we want to execute.
Arguments: It is the argument to the script which is optional also.
Using Scroll Down by scrollBy() Method
In this method, we have to mention the X and Y coordinates. When this method will execute it will scroll upto that coordinates.
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;
public class ScrollByPixel
{
WebDriver driver;
@Test
public void ByPixel()
{
System.setProperty(“webdriver.chrome.driver”, “E://Selenium//Selenium_Jars//chromedriver.exe”);
driver = new ChromeDriver();
JavascriptExecutor js = (JavascriptExecutor) driver;
// Launch the application
driver.get(“http://demo.guru99.com/test/guru99home/”);
//To maximize the window. This code may not work with Selenium 3 jars. If script fails you can remove the line below
driver.manage().window().maximize();
// This will scroll down the page by 1000 pixel vertical
js.executeScript(“window.scrollBy(0,1000)”);
}
}
Description:
The Syntax for the scrollBy method is:
executeScript(“window.scrollBy(x,y)”);
Here the x value may be positive and negative. If the X value is positive then the scroll bar moves to left and if the value is negative then the scroll bar moves to the right.
Similarly, the scroll bar moves down if the, y value is positive and moves down if the value is negative.
Using scrollIntoView()
By using the scrollIntoView() we can scroll the scroll bar until the specified element is visible in the browser. The syntax for this method is:
js.executeScript(“arguments[0].scrollIntoView();”,Element );
Here arguments[0] represents the first index of page starting from 0 and the Element represents the required elements of the page.
If you want to see your required element in the top of the browser view area then you can mention the scrollIntoView(true). If the bottom of the element will be aligned to the bottom of the visible area.
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;
import org.testng.annotations.Test;
public class ScrollByVisibleElement
{
WebDriver driver;
@Test
public void ByVisibleElement()
{
System.setProperty("webdriver.chrome.driver", "G://chromedriver.exe");
driver = new ChromeDriver();
JavascriptExecutor js = (JavascriptExecutor) driver;
//Launch the application
driver.get("http://demo.guru99.com/test/guru99home/");
//Find element by link text and store in variable "Element"
WebElement Element = driver.findElement(By.linkText("Linux"));
//This will scroll the page till the element is found
js.executeScript("arguments[0].scrollIntoView();", Element);
}
}
Using scrollTo()
By using the scrollTo() method we can scroll till end of the page. For that the syntax is:
js.executeScript(“window.scrollTo(0, document.body.scrollHeight)”);
Note: The scrollTo() method always takes the current scrolled position and compare with the (0,0) after that only it decides whether scroll or not.
Explanation:
1. Open The SoftwareTestingo Blog
2. Press F12 and click on the console tab
3. Type “window.scrollTo(0,500)” and hit enter then you will notice that the scroll bar is a move to 500 pixels down because we have mention y axes 500 pixels.
4. If you try to execute the same command then you can find that the scroll bar not moving anywhere that means
- When we execute the window.scrollTo(0,500) that time the scroll bar position changed from (0,0) to (0,500)
- When we execute the second time the same command window.scrollTo(0,500), that scrollTo understand move the scroll bar from (0,0) to (0,500), but as the scroll bar is already at (0,500) position so no other actions performed in this situation.
- If we pass a new command window.scrollTo(0,800), then you can see that the scroll bar moves more than 300 pixels because the scrollTo always starts from (0,0) as we are already at (0,500). it will move scroll 300 pixels only.
- if you try with window.scrollTo(0,-500), then the scroll bar moves to (0,0) position and stops there because a negative quadrant is not possible here.
Here “document.body.scrollHeight” returns the height of the body part of the web page. in the place of document.body.scrollHeight we can also mention a number like scrollTo(0,300) to scroll the scroll bar upto that coordinates.
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class ScrollByExample
{
public static void main(String[] args) throws InterruptedException
{
System.setProperty("webdriver.chrome.driver", "./exefiles/chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();
driver.get("http://www.softwaretestingo.com/");
// Down casting driver to JavascriptExecutor
JavascriptExecutor js = (JavascriptExecutor) driver;
// Since scrollBy works on distance. So whenever below command is called, page wil be scrolled
// down vertically
String command1 = "window.scrollBy(0,100)";
// First scroll vertically
js.executeScript(command1);
Thread.sleep(2000);
// Second scroll vertically
js.executeScript(command1);
Thread.sleep(2000);
// Third scroll vertically
js.executeScript(command1);
Thread.sleep(2000);
driver.quit();
}
}
Note: This is working the same as scrollTo, but it has the only difference is that scrollTo is always starting the position count from (0,0) and as per the input value it decide whether scroll or not. But in scrollBy, it takes the current position as the starting point and when you enter a value then it calculates and moves the scroll bar from the current position irrespective of (0,0).
Using Scroll() Method
By using the scroll method also you can scroll the scroll bar and for that the program is
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class ScrollExample
{
public static void main(String[] args) throws InterruptedException
{
System.setProperty("webdriver.chrome.driver", "./exefiles/chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();
driver.get("http://www.softwaretestingo.com/");
// Down casting driver to JavascriptExecutor
JavascriptExecutor js = (JavascriptExecutor) driver;
String command1 = "window.scroll(0,100)";
String command2 = "window.scroll(0,200)";
String command3 = "window.scroll(0,300)";
// First scroll vertically
js.executeScript(command1);
Thread.sleep(2000);
// Second scroll vertically
js.executeScript(command2);
Thread.sleep(2000);
// Third scroll vertically
js.executeScript(command3);
Thread.sleep(2000);
driver.quit();
}
}
Scroll Webpage Bar Using JavascriptExecutor: How to Scroll Webpage Bar Using Java Selenium Program?
package com.selenium.basics;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
public class ScrollBarEx
{
@org.testng.annotations.Test
public void scroll() throws InterruptedException
{
WebDriver driver=new FirefoxDriver();
driver.get("http://www.softwaretestingblog.in/");
JavascriptExecutor jse = (JavascriptExecutor) driver;
driver.manage().window().maximize();
Thread.sleep(5000);
jse.executeScript("scroll(0,550)");
Thread.sleep(5000);
driver.close();
}
}
Read Also: Handle SSL Certificate In Java Selenium
Leave a Reply