How to scroll to an element in Selenium?

The Selenium headless browser automation library enables full web automation control, and one of these automation tasks is scrolls. In this guide, we'll explain using Python selenium scroll to element. Let's get started!

Installation

Let's start with the installation process. We'll be using the below packages:

• Selenium: The Selenium Python client to communicate with the web driver API.
• webdriver-manager: To automatically download the Selenium web driver binaries itself
  The above packages can be installed using the below pip command:

pip install selenium webdriver-manager

Next, use the webdriver-amanger to automatically download the Selenium web driver:

from selenium import webdriver
from selenium.webdriver.chrome.service import Service as ChromeService
from webdriver_manager.chrome import ChromeDriverManager

driver = webdriver.Chrome(service=ChromeService(ChromeDriverManager().install()))

The above script will install the Chrome browser driver. However, other browsers are supported. See the official documentation for the available engines.

Using scrollIntoView

To scroll into a specific element using Sleneium, we can follow the below steps:

• Select a particular element to scroll into using its equivalent CSS or XPath selector
• Use the scrollIntoView method with the selected HTML element

Let's apply the above steps within our Python Selenium code:

import time
from selenium import webdriver
from selenium.webdriver.common.by import By
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.chrome.service import Service as ChromeService

driver = webdriver.Chrome(service=ChromeService(ChromeDriverManager().install()))

driver.get("https://web-scraping.dev/product/1")

# scroll to an element at the bottom of the page
element = driver.find_element(By.CSS_SELECTOR, 'footer')

# execute scrollIntoView script with our element as the argument:
driver.execute_script(
    "arguments[0].scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'end' });", 
    element
)

time.sleep(5) # observe the new view
driver.close() # close the browser

Above, we start by selecting a web element at the bottom of them page using CSS selectors. Then, we use the execute_script method to execute JavaScript code to scroll to the element the scrollIntoView function. We also specify block and inline arguments to end value to scroll to the bottom of the horizontal right of the element - this ensures highest visibility of the element. For more see browser's scrollIntoView documentation.

For further scrolling techniques, refer to our guide on scrolling with selenium.