Selenium如何自动化React Material UI输入框？

尝试用Selenium自动化完成网站媒体文件上传后的信息录入，已能导航到媒体库并解析目标文件列表，但在React Material UI构建的页面上陷入困境。

目标输入框的HTML结构：

<div class="MuiFormControl-root MuiFormControl-marginNormal MuiFormControl-fullWidth">
    <label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink" data-shrink="true" for="formatted-text-mask-input">Subtitle</label>
        <div class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl" title="Subtitle">
            <input aria-invalid="false" type="text" class="MuiInputBase-input MuiInput-input" value="" data-np-intersection-state="visible">
        </div>
        <p class="MuiFormHelperText-root"></p>
    </div>
</div>

尝试用以下XPath定位输入框：

driver.find_element(By.XPATH('//*[@id="app"]/div/div/div[2]/div/div/div[4]/div/div[2]/div[1]/div[3]/div/div/input'))

但该操作抛出TypeError，获取的是文本属性而非元素。了解到Selenium无法直接设置值，需模拟用户输入，请问是否需要用webdriver.execute_script("set_attribute(arguments?)")实现？若需要，如何通过execute_script传入文本？或者有其他适配React/Material UI网站的浏览器自动化方案？

1. 修复元素定位语法错误 #

你写的XPath定位代码存在语法问题，By.XPATH是枚举类，正确用法是将XPath字符串作为第二个参数传入find_element，而非直接调用By.XPATH()：

from selenium.webdriver.common.by import By

# 正确写法
input_element = driver.find_element(By.XPATH, '//*[@id="app"]/div/div/div[2]/div/div/div[4]/div/div[2]/div[1]/div[3]/div/div/input')

另外，绝对XPath极易因页面结构变动失效，建议改用更稳定的定位方式，比如结合Material UI的属性和类名：

# 通过label的for属性关联定位
input_element = driver.find_element(By.ID, 'formatted-text-mask-input')

# 或通过父容器title属性+输入框类名定位
input_element = driver.find_element(By.CSS_SELECTOR, 'div[title="Subtitle"] input.MuiInputBase-input')

2. 模拟输入的常规与进阶方法 #

常规模拟输入 #

定位到元素后，直接使用send_keys模拟用户输入即可，这是Selenium适配大部分React/MUI场景的标准方式：

input_element.send_keys("你的字幕内容")

强制设置值（应对React虚拟DOM问题） #

如果遇到send_keys无效的情况，可通过execute_script强制设置输入框值，并触发React的change事件确保页面状态同步：

# 设置input的value属性
driver.execute_script("arguments[0].value = arguments[1];", input_element, "你的字幕内容")
# 触发change事件，同步React状态
driver.execute_script("arguments[0].dispatchEvent(new Event('change', { bubbles: true }));", input_element)

3. 适配React/MUI的其他方案 #

显式等待元素可交互 #

React页面加载存在异步延迟，需添加显式等待确保元素可交互后再操作：

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

wait = WebDriverWait(driver, 10)
input_element = wait.until(EC.element_to_be_clickable((By.ID, 'formatted-text-mask-input')))
input_element.send_keys("你的字幕内容")

使用Playwright替代Selenium #

Playwright对单页应用（SPA）支持更友好，内置自动等待机制，无需手动处理多数React页面加载问题，定位逻辑也更灵活：

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto("你的目标页面")
    # 通过属性定位并填充内容
    page.fill("input[aria-invalid='false']", "你的字幕内容")
    browser.close()

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