Modifying element attributes with JS in Selenium Python - Build an Automation Script

Modify an element's attribute using JavaScript in Selenium

Preconditions (2)

Step 1: Open the target web page in the browser

Step 2: Locate the element with id 'username-input'

Step 3: Use JavaScript to change the element's 'placeholder' attribute to 'Enter your username'

Step 4: Verify that the placeholder attribute of the element is updated correctly

✅ Expected Result: The input element with id 'username-input' has its placeholder attribute changed to 'Enter your username'

Automation Requirements - Selenium with Python

Assertions Needed:

Verify the placeholder attribute of the element is 'Enter your username'

Best Practices:

Use explicit waits to ensure the element is present before interacting

Use Selenium's execute_script method to run JavaScript

Use By.ID locator for element identification

Use assert statements for verification

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 WebDriver (example with Chrome)
driver = webdriver.Chrome()

try:
    # Open the target web page
    driver.get('https://example.com')

    # Wait until the element with id 'username-input' is present
    wait = WebDriverWait(driver, 10)
    element = wait.until(EC.presence_of_element_located((By.ID, 'username-input')))

    # Use JavaScript to modify the placeholder attribute
    driver.execute_script("arguments[0].setAttribute('placeholder', 'Enter your username')", element)

    # Verify the placeholder attribute is updated
    updated_placeholder = element.get_attribute('placeholder')
    assert updated_placeholder == 'Enter your username', f"Expected placeholder to be 'Enter your username' but got '{updated_placeholder}'"

finally:
    driver.quit()

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

It waits explicitly for the element with id 'username-input' to be present to avoid errors.

Then it uses Selenium's execute_script method to run JavaScript that changes the element's placeholder attribute.

Finally, it retrieves the updated attribute and asserts it matches the expected value.

The finally block ensures the browser closes even if the test fails.

Common Mistakes - 4 Pitfalls

{'mistake': 'Using time.sleep instead of explicit waits', 'why_bad': 'It can cause flaky tests because the element might not be ready when the sleep ends.', 'correct_approach': "Use Selenium's explicit waits like WebDriverWait with expected_conditions."}

Using incorrect locator strategies like XPath with absolute paths

Not verifying the attribute change after executing JavaScript

Not closing the browser after test execution

Bonus Challenge

Now add data-driven testing to modify the placeholder attribute with three different values: 'Enter username', 'Type your user ID', and 'User login here'.

Show Hint