Python+Selenium：如何在模态表单中填充文本输入框

Hey there! I totally get how frustrating this can be when you're starting out with Selenium—modals are tricky because they load dynamically, so let's walk through the most common fixes for your issue:

1. Wait for the Modal & Input to Fully Load #

The biggest culprit here is usually that Selenium is trying to find the input before the modal finishes rendering. Instead of immediately calling find_element, use an explicit wait to let the element load first. This is way more reliable than time.sleep() because it waits only as long as needed.

Here's how to implement it in Python:

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

# First, click the button that opens the modal
driver.find_element(By.ID, "your-modal-trigger-button-id").click()

# Wait up to 10 seconds for the name input to appear
name_input = WebDriverWait(driver, 10).until(
    EC.presence_of_element_located((By.ID, "name"))
)

# Now you can fill the input
name_input.send_keys("Your Name")

2. Check if the Input is Inside an <iframe> #

Sometimes modals load their content inside an iframe. Selenium can't see elements inside iframes unless you explicitly switch to that frame first.

To fix this:

# Locate the iframe (use its ID, name, or another reliable locator)
modal_iframe = driver.find_element(By.ID, "modal-iframe-id")

# Switch to the iframe
driver.switch_to.frame(modal_iframe)

# Now find the input as usual
name_input = driver.find_element(By.ID, "name")
name_input.send_keys("Your Name")

# After you're done with the modal, switch back to the main page
driver.switch_to.default_content()

3. Verify if the Element is in a Shadow DOM #

Since your element uses Angular (evidenced by ng-model), some modern Angular implementations wrap modal content in a shadow DOM. Regular Selenium locators can't reach elements here—you'll need to use JavaScript to access the shadow root.

Example code:

# Use JavaScript to grab the element from the shadow DOM
name_input = driver.execute_script("""
    // Replace '#modal-container' with the actual selector for your modal's parent container
    const modalContainer = document.querySelector('#modal-container');
    return modalContainer.shadowRoot.querySelector('#name');
""")

name_input.send_keys("Your Name")

4. Avoid Unreliable Locators (Like Dynamic Class Names) #

You mentioned trying find_element_by_class_name—but look at your element's classes: ng-pristine ng-invalid ng-invalid-required ng-touched. These are dynamic Angular classes that change as you interact with the input (e.g., after typing, ng-pristine becomes ng-dirty). Stick to stable locators like the id="name" (which you already tried) once you've fixed the loading/iframe/shadow DOM issues.

Start with the first fix (explicit wait)—that's the most common solution for modal element not found errors. If that doesn't work, check for iframes next, then shadow DOM.

内容的提问来源于stack exchange，提问作者Dogushan KAYA