使用Python的Selenium设置自定义组件输入框值失败求助

目标输入框HTML结构 #

<dnx-textfield label="First / Leading IP Address" placeholder="" name="primaryIpv4Address" hint="" maxwidth="300px" error="" regex="" message="" validator="" regextype="" type="text" validateon="onblur" hinthelper="" inputid="management-DnxTextfield-deploymentModel" errorhelper="" expandable="" showhide="" source="none" errormsg="" maxlength="2000" autocomplete="off" defined="" required="" data-analyticsid="dnx-textfield[name='primaryIpv4Address']" value="" isfocus="">
 <div>
  <div style="display: flex; flex-direction: row;"><div class="dnx-shadow form-group floating-label _float    " style="width: 300px;">
   <div id="dnx_inputfield_containermanagement-DnxTextfield-deploymentModel" class="dnx_inputfield_container">
    <input id="management-DnxTextfield-deploymentModel" class="form-control value" type="text" placeholder="" autocomplete="off" data-testid="dnxTextfield-input" maxlength="2000"></div><label class="control-label  " for="management-DnxTextfield-deploymentModel">First / Leading IP Address<span class="required " style="color: red;">*</span></label><small>&nbsp;</small></div>
  </div>
 </div>
</dnx-textfield>

已尝试的定位代码 #

# 尝试过的定位方法
driver.find_element(By.XPATH, "//*[@name='primaryIpv4Address' and @label='First / Leading IP Address']").send_keys("192.168.1.1"+Keys.TAB)
driver.find_element(By.XPATH, "//input[@id='management-DnxTextfield-deploymentModel']").send_keys("192.168.1.1"+Keys.TAB)
driver.find_element(By.ID, "management-DnxTextfield-deploymentModel").send_keys("192.168.1.1"+Keys.TAB)
driver.find_element(By.XPATH, "//*[@data-testid='dnxTextfield-input' and @id='management-DnxTextfield-deploymentModel']").send_keys("192.168.1.1"+Keys.TAB)
driver.find_element(By.XPATH, "//*[@id='management-DnxTextfield-deploymentModel']").send_keys("192.168.1.1"+Keys.TAB)
driver.find_element(By.XPATH, "//*[@id='management-DnxTextfield-primarySubnetIpv4Address']").send_keys("192.168.1.1"+Keys.TAB)
driver.find_element(By.XPATH, "//*[@name='primaryIpv4Address' and @label='First / Leading IP Address']").send_keys("192.168.1.1"+Keys.TAB)

问题原因及解决方案 #

1. 元素未完成加载 #

直接定位元素可能遇到页面未渲染完成的情况，必须用显式等待确保元素可交互：

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

wait = WebDriverWait(driver, 15)
# 等待输入框可点击
input_box = wait.until(EC.element_to_be_clickable((By.ID, "management-DnxTextfield-deploymentModel")))
# 先聚焦再输入
input_box.click()
input_box.clear()  # 清空原有内容（如果需要）
input_box.send_keys("192.168.1.1" + Keys.TAB)

2. 自定义组件的特殊处理 #

dnx-textfield是自定义Web组件，部分封装的输入框无法通过send_keys直接生效，可尝试用JavaScript直接设置值并触发事件：

input_box = driver.find_element(By.ID, "management-DnxTextfield-deploymentModel")
# 设置value属性
driver.execute_script("arguments[0].value = '192.168.1.1';", input_box)
# 触发input和blur事件，确保组件识别值的变化
driver.execute_script("arguments[0].dispatchEvent(new Event('input'));", input_box)
driver.execute_script("arguments[0].dispatchEvent(new Event('blur'));", input_box)

3. 检查是否存在Shadow DOM #

如果输入框位于自定义组件的Shadow DOM内，需要先获取Shadow Root再定位元素：

# 先定位外层自定义组件
dnx_component = driver.find_element(By.TAG_NAME, "dnx-textfield")
# 获取Shadow Root（仅支持Chrome/Edge等现代浏览器）
shadow_root = dnx_component.shadow_root
# 在Shadow Root内定位输入框
input_box = shadow_root.find_element(By.ID, "management-DnxTextfield-deploymentModel")
input_box.send_keys("192.168.1.1" + Keys.TAB)

4. 排除iframe影响 #

如果输入框在iframe中，需要先切换到iframe上下文：

# 按ID定位iframe并切换
driver.switch_to.frame("iframe-id")
# 之后再定位输入框执行操作
input_box = driver.find_element(By.ID, "management-DnxTextfield-deploymentModel")
input_box.send_keys("192.168.1.1" + Keys.TAB)
# 操作完成后切回主文档
driver.switch_to.default_content()

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