Overview

In this post, we will learn how to Scroll Webpage using JavaScript. We will look at Facebook front page and try to scroll to the bottom with sample code snippet. We will locate the “Developer” link at the bottom of the Facebook page and scroll the webpage and take a screenshot.

 

Vertical Scrolling a Webpage

public class ScrollPageExample {
    WebDriver driver;
    

    @BeforeClass
    public void openBrowser() {
        System.setProperty("webdriver.edge.driver", 
"MicrosoftWebDriver.exe");
        driver=new EdgeDriver();
        driver.get("https://www.facebook.com");
        driver.manage().window().maximize();
    }
    
    
    @Test()
    public void scrollWebPageToElement() {
        WebElement element = driver.findElement(
By.linkText("Developers"));
        ((JavascriptExecutor) driver).executeScript(
                "arguments[0].scrollIntoView();", element);
        WebDriverWait wait = new WebDriverWait(driver, 120);
        wait.until(ExpectedConditions.presenceOfElementLocated(
By.linkText("Developers")));
        captureScreen("ScreenAfterScroll.png");
    }
    
    public void captureScreen(String fileName) {
        File scrFile = ((TakesScreenshot) driver)
                .getScreenshotAs(OutputType.FILE);
        try {
            FileUtils.copyFile(scrFile, new File(fileName));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    
    @AfterClass()
    public void closeBrowser() {
        driver.quit();
    }
}

 

The method scrollIntoView() very useful method while applying scrolling property to HTML page, div or frame.t scrolls the page, div or frame until the searching element is in the view.

JavaScript scrollIntoView() method

Syntax :
element.scrollIntoView();

 

Unlike the above example, If you know the exact distance to scroll, we can use the below code :

 

//  vertical scroll - down by 500 pixels
((JavascriptExecutor) driver)
.executeScript("window.scrollBy(0,500)");

//  vertical scroll - UP by 100 pixels
((JavascriptExecutor) driver)
.executeScript("window.scrollBy(0,-100)");

 

Horizontal Scrolling a webpage

Horizontal scroll examples:

// horizontal scroll - right by 30 pixels
js.executeScript("window.scrollBy(30,0)", "");

// horizontal scroll - left by 100
js.executeScript("window.scrollBy(-100,0)", "");

 

–

Selenium Tutorial on this website:

https://www.testingdocs.com/selenium-webdriver-tutorial/

More information on Selenium, visit official website:

https://www.selenium.dev/