Clicking with JavaScript in Selenium Python - Build an Automation Script

Automate clicking a button using JavaScript in Selenium

Preconditions (2)

Step 1: Open the browser and navigate to the web page URL 'https://example.com/form'

Step 2: Locate the button element with id 'submit-btn'

Step 3: Use JavaScript to click the button instead of the standard click method

Step 4: Verify that clicking the button triggers the expected action, such as navigation or a message

✅ Expected Result: The button is clicked successfully using JavaScript, and the expected action occurs (e.g., page navigates to 'https://example.com/success')

Automation Requirements - Selenium with Python

Assertions Needed:

Verify the current URL changes to 'https://example.com/success' after clicking the button

Best Practices:

Use explicit waits to ensure the button is present and clickable before executing JavaScript

Use Selenium's execute_script method to perform the JavaScript click

Avoid hardcoded sleeps; rely on WebDriverWait

Use By.ID locator for the button element

Automated Solution

Selenium Python

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

# Initialize the Chrome WebDriver
with webdriver.Chrome() as driver:
    driver.get('https://example.com/form')

    # Wait until the button with id 'submit-btn' is present and visible
    wait = WebDriverWait(driver, 10)
    button = wait.until(EC.element_to_be_clickable((By.ID, 'submit-btn')))

    # Use JavaScript to click the button
    driver.execute_script('arguments[0].click();', button)

    # Wait until the URL changes to the expected success page
    wait.until(EC.url_to_be('https://example.com/success'))

    # Assert the URL is correct
    assert driver.current_url == 'https://example.com/success', f"Expected URL to be 'https://example.com/success' but got {driver.current_url}"

This script starts by opening the Chrome browser and navigating to the form page.

It waits explicitly for the button with id 'submit-btn' to be clickable to avoid timing issues.

Instead of using the normal Selenium click, it uses JavaScript's click method via execute_script to click the button. This is useful when the normal click might fail due to overlays or other issues.

After clicking, it waits until the URL changes to the expected success page, ensuring the click triggered the correct action.

Finally, it asserts that the current URL matches the expected URL, confirming the test passed.

Common Mistakes - 3 Pitfalls

Using time.sleep() instead of explicit waits

{'mistake': "Using driver.find_element(By.ID, 'submit-btn').click() when the button is covered or not interactable", 'why_bad': "Selenium's click may fail if the element is hidden or overlapped by another element.", 'correct_approach': 'Use JavaScript click via execute_script to bypass such issues.'}

Hardcoding XPath or CSS selectors that are brittle

Bonus Challenge

Now add data-driven testing with 3 different button IDs to click using JavaScript

Show Hint