Scrolling with JavaScript in Selenium Python - Build an Automation Script

Scroll down a webpage using JavaScript in Selenium

Preconditions (2)

Step 1: Open the browser and navigate to 'https://example.com/longpage'

Step 2: Use JavaScript to scroll down 500 pixels vertically

Step 3: Verify that the page has scrolled down by checking the scroll position

✅ Expected Result: The page scrolls down by 500 pixels and the scroll position confirms the scroll

Automation Requirements - Selenium with Python

Assertions Needed:

Verify the vertical scroll position is at least 500 pixels after scrolling

Best Practices:

Use JavaScript execution via driver.execute_script() for scrolling

Use explicit waits if needed before scrolling

Use By locators properly if interacting with elements

Keep code readable and maintainable

Automated Solution

Selenium Python

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options
import time

# Setup Chrome WebDriver
options = Options()
options.add_argument('--headless=new')  # Run headless for testing
service = Service()
driver = webdriver.Chrome(service=service, options=options)

try:
    # Navigate to the page with enough content to scroll
    driver.get('https://example.com/longpage')

    # Wait for page to load
    time.sleep(2)  # Simple wait for demo; explicit waits preferred in real tests

    # Scroll down 500 pixels vertically using JavaScript
    driver.execute_script('window.scrollBy(0, 500);')

    # Get the current vertical scroll position
    scroll_position = driver.execute_script('return window.pageYOffset;')

    # Assert scroll position is at least 500
    assert scroll_position >= 500, f"Scroll position {scroll_position} is less than 500"

finally:
    driver.quit()

This script opens a Chrome browser in headless mode and navigates to a long page.

It waits briefly to ensure the page loads, then uses driver.execute_script() to run JavaScript that scrolls the window down by 500 pixels.

After scrolling, it retrieves the vertical scroll position with JavaScript and asserts it is at least 500 pixels, confirming the scroll happened.

Finally, it closes the browser.

This approach uses JavaScript scrolling because Selenium's native scroll methods are limited, and JavaScript gives precise control.

Common Mistakes - 3 Pitfalls

Using time.sleep() excessively instead of explicit waits

{'mistake': 'Trying to scroll using Selenium actions or keys without JavaScript', 'why_bad': "Selenium's native scrolling is limited and may not scroll the window as expected", 'correct_approach': 'Use driver.execute_script() with JavaScript scroll commands for reliable scrolling'}

Not verifying the scroll position after scrolling

Bonus Challenge

Now add data-driven testing to scroll by 100, 300, and 700 pixels and verify each scroll

Show Hint

Practice

1. What is the main purpose of using JavaScript scrolling in Selenium tests?

easy

A. To move the browser view to elements not visible on the screen

B. To change the browser's URL

C. To refresh the current page

D. To close the browser window

Solution

1. Step 1: Understand scrolling in Selenium

   Scrolling is used to bring elements into view that are not visible on the screen.

2. Step 2: Identify the purpose of JavaScript scrolling

   JavaScript scrolling moves the browser window to show hidden elements so tests can interact with them.

3. Final Answer:

   To move the browser view to elements not visible on the screen -> Option A

4. Quick Check:

   Scrolling = Move view to hidden elements [OK]

Hint: Scrolling shows hidden elements on screen quickly [OK]

Common Mistakes:

• Confusing scrolling with page refresh
• Thinking scrolling changes URL
• Assuming scrolling closes browser

2. Which of the following is the correct syntax to scroll down by 500 pixels using JavaScript in Selenium Python?

easy

A. driver.execute_script('scroll(500, 0)')

B. driver.scroll(0, 500)

C. driver.scrollBy(0, 500)

D. driver.execute_script('window.scrollBy(0, 500)')

Solution

1. Step 1: Recall JavaScript scroll syntax

   The JavaScript method to scroll by pixels is window.scrollBy(x, y).

2. Step 2: Match Selenium Python syntax

   In Selenium Python, use driver.execute_script() to run JavaScript code.

3. Final Answer:

   driver.execute_script('window.scrollBy(0, 500)') -> Option D

4. Quick Check:

   Use execute_script with window.scrollBy(x, y) [OK]

Hint: Use execute_script('window.scrollBy(x, y)') to scroll pixels [OK]

Common Mistakes:

• Using driver.scroll instead of execute_script
• Swapping x and y values in scrollBy
• Omitting 'window.' prefix in JavaScript

3. What will happen when the following code runs in Selenium Python?

driver.execute_script('window.scrollTo(0, document.body.scrollHeight)')

medium

A. Scrolls to the top of the page

B. Scrolls horizontally to the right

C. Scrolls to the bottom of the page

D. Throws a JavaScript error

Solution

1. Step 1: Understand window.scrollTo parameters

   window.scrollTo(x, y) scrolls to absolute position x horizontally and y vertically.

2. Step 2: Interpret document.body.scrollHeight

   document.body.scrollHeight gives the total height of the page content, so scrolling to (0, scrollHeight) moves to bottom.

3. Final Answer:

   Scrolls to the bottom of the page -> Option C

4. Quick Check:

   scrollTo bottom = scrollHeight vertical [OK]

Hint: scrollTo(0, scrollHeight) scrolls to page bottom [OK]

Common Mistakes:

• Confusing scrollTo with scrollBy
• Thinking scrollHeight is horizontal value
• Expecting scroll to top instead of bottom

4. Identify the error in this Selenium Python code snippet for scrolling to an element:

element = driver.find_element(By.ID, 'footer')
driver.execute_script('scrollIntoView()', element)

medium

A. Incorrect JavaScript method call syntax in execute_script

B. Missing quotes around 'footer' in find_element

C. Using By.ID instead of By.CSS_SELECTOR

D. No error, code is correct

Solution

1. Step 1: Check JavaScript method call syntax

   scrollIntoView() must be called on the element object in JavaScript, like arguments[0].scrollIntoView().

2. Step 2: Analyze execute_script usage

   Correct syntax: driver.execute_script('arguments[0].scrollIntoView()', element) to pass element as argument.

3. Final Answer:

   Incorrect JavaScript method call syntax in execute_script -> Option A

4. Quick Check:

   Use arguments[0].scrollIntoView() in execute_script [OK]

Hint: Use arguments[0].scrollIntoView() to scroll element [OK]

Common Mistakes:

• Calling scrollIntoView() without arguments[0].
• Passing element outside execute_script string
• Confusing locator types

5. You want to scroll to a button with ID 'submit-btn' and click it using Selenium Python. Which code snippet correctly scrolls to the button and clicks it?

hard

A. button = driver.find_element(By.ID, 'submit-btn')
driver.execute_script('arguments[0].scrollToView()', button)
button.click()

B. button = driver.find_element(By.ID, 'submit-btn')
driver.execute_script('arguments[0].scrollIntoView()', button)
button.click()

C. button = driver.find_element(By.ID, 'submit-btn')
driver.execute_script('window.scrollBy(0, 1000)')
button.click()

D. button = driver.find_element(By.ID, 'submit-btn')
driver.execute_script('scrollIntoView()', button)
button.click()

Solution

1. Step 1: Find the button element by ID

   Use driver.find_element(By.ID, 'submit-btn') to locate the button.

2. Step 2: Scroll to the button using correct JavaScript

   Use driver.execute_script('arguments[0].scrollIntoView()', button) to scroll the button into view.

3. Step 3: Click the button

   Call button.click() after scrolling to interact with it.

4. Final Answer:

   Correct scroll and click sequence with arguments[0].scrollIntoView() -> Option B

5. Quick Check:

   Scroll with arguments[0].scrollIntoView() then click [OK]

Hint: Scroll element with arguments[0].scrollIntoView() before clicking [OK]

Common Mistakes:

• Missing arguments[0] in scrollIntoView call
• Using wrong JavaScript method name
• Scrolling by fixed pixels instead of element