TestingDocs.com
Software Testing website
  • Automation
    • Selenium
    • JBehave Framework
  • Tutorials
    • MySQL Tutorials
    • Testlink
    • Maven
    • Git
  • IDEs
    • IntelliJ IDEA
    • Eclipse
  • Flowcharts
    • Flowgorithm
    • Raptor
  • About

Selenium

Scroll Webpage using JavaScript

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/

Related Posts

Windows 10 Settings

Selenium /

Add Microsoft Webdriver on Windows OS

Download Selenium Components

Selenium /

Getting Started with Selenium Webdriver

LambdaTest Testing Cloud SaaS Platform

Selenium /

LambdaTest – Testing Cloud SaaS Platform

Selenium /

Selenium 3.0 and Mozilla GeckoDriver

SauceLabs Website

Selenium /

Run an Example Test on SauceLabs

‹ Selenium Test Customization› Working with Slider Example

Recent Posts

  • MS Access Data Types
  • Install RAPTOR Avalonia on CentOS
  • Download RAPTOR Avalonia Edition on Windows
  • npm doctor command
  • Build & Run CLion Project
  • Create New CLion C Project on Windows
  • Configure CLion Toolchains on Windows
  • Launch CLion IDE on Windows
  • Activate CLion IDE
  • CLion IDE for C/C++ Development

Back to Top

Links

  • Contact
  • Privacy Policy
  • Cookie Policy

www.TestingDocs.com

Go to mobile version