5 Best Ways to Perform Vertical Scrolling of a Webpage with Javascript Executor in Selenium with Python

πŸ’‘ Problem Formulation: In Selenium automated tests, it’s a common requirement to scroll through a webpage to interact with elements that are not in the initial viewport. This article covers the problem of how to programmatically perform vertical scrolling on a webpage by using the JavaScript Executor within Selenium with Python, particularly when testing web applications. For example, you want to scroll down to the bottom of a page or to a specific element on the page.

Method 1: Scroll to a Specific Element

Scrolling to a specific element on the web page can be crucial when you want to interact with it. Selenium’s JavaScript Executor can be used in combination with the scrollIntoView() function to achieve this.

Here’s an example:

from selenium import webdriver

driver = webdriver.Chrome()
driver.get("https://www.example.com")
element = driver.find_element_by_id('target-element')
driver.execute_script("arguments[0].scrollIntoView();", element)

Output: The web page is scrolled vertically until the specified element is in view.

This snippet first locates the element you want to scroll to by its ID and then uses execute_script() with scrollIntoView() to scroll the element into the viewport. It’s a clean and focused approach to scrolling.

Method 2: Scroll by Number of Pixels

For scenarios where you need to scroll a specific number of pixels down the page, JavaScript’s window.scrollBy() method can be utilized with Selenium’s execute_script function.

Here’s an example:

from selenium import webdriver

driver = webdriver.Chrome()
driver.get("https://www.example.com")
driver.execute_script("window.scrollBy(0, 1000);")  # Scrolls down 1000 pixels

Output: The webpage scrolls down by 1000 pixels.

With window.scrollBy(0, 1000), we can control the exact amount of vertical scroll, which is useful for incremental scrolling or when you want to stop at regular intervals.

Method 3: Scroll to the Bottom of the Page

Reaching the bottom of a webpage is a common requirement, especially while testing infinite scrolling features. To perform this action, we execute a script that scrolls to the bottom of the page using window.scrollTo.

Here’s an example:

from selenium import webdriver

driver = webdriver.Chrome()
driver.get("https://www.example.com")
driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")

Output: The webpage is scrolled down to the bottom.

This code example scrolls the page to its maximum height, effectively reaching the bottom. The document.body.scrollHeight attribute holds the total height of the page content.

Method 4: Scroll to Top from Any Position

Just as we may need to scroll to the bottom of a page, the need could arise to return to the top of the page. This can be done with the window.scrollTo() method, setting the vertical position to 0.

Here’s an example:

from selenium import webdriver

driver = webdriver.Chrome()
driver.get("https://www.example.com")
driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")  # Scroll to bottom
driver.execute_script("window.scrollTo(0, 0);")  # Scroll back to top

Output: The webpage initially scrolls down to the bottom then scrolls back up to the top.

After scrolling to the bottom, the second execute_script() call scrolls the webpage back to the top. This is often used in tests that require asserting both the bottom-most and top-most parts of a page.

Bonus One-Liner Method 5: Smooth Scrolling

In modern web applications, a smooth scrolling effect enhances user experience. We can mimic this behavior using Selenium with a small modification to the scrollIntoView method by passing an options object with the behavior property set to 'smooth'.

Here’s an example:

from selenium import webdriver

driver = webdriver.Chrome()
driver.get("https://www.example.com")
element = driver.find_element_by_id('target-element')
driver.execute_script("arguments[0].scrollIntoView({ behavior: 'smooth' });", element)

Output: The webpage smoothly scrolls to the element, providing a pleasant visual transition.

This elegant one-liner initiates a smooth scroll to an element on the page, simulating a more natural, user-like scrolling behavior.

Summary/Discussion

  • Method 1: Scroll to a Specific Element. Precise scrolling to interact with elements. Limited to elements that can be selected.
  • Method 2: Scroll by Number of Pixels. Good for fine-grained control. Requires estimation of pixel distance, which can be impractical on responsive sites.
  • Method 3: Scroll to the Bottom of the Page. Essential for pages with lazy loading elements. May require additional loading time for all elements to be rendered.
  • Method 4: Scroll to Top from Any Position. Handy for returning to the top of the page for further actions. Overly simple; lacks the nuance of partial scrolling.
  • Bonus Method 5: Smooth Scrolling. Enhances user experience in automated tests. May not be supported in all browsers or environments.