使用Selenium+Python爬取Flutter站点时无法点击Shadow DOM内按钮

问题本质 #

这个站点是Flutter Web构建的，生成的DOM结构和普通Web站点差异极大，普通Selenium定位方式易失效，且部分元素可能嵌套在Shadow DOM中。你当前通过创建新input元素输入内容的方式，并未和页面实际表单控件绑定，这可能是后续按钮点击无响应的核心原因。

针对性解决方案 #

1. 正确定位并点击按钮 #

先通过Chrome DevTools的Elements面板，找到登录按钮的实际选择器：

• 优先查找带语义化属性的元素，比如aria-label、data-flutter-id，或包含"登录"文本的flt-text标签；
• 找到选择器后，优先用等待确保元素可点击，若普通点击无效则用JS强制触发：

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

# 等待按钮加载完成并处于可点击状态
wait = WebDriverWait(driver, 10)
login_button = wait.until(EC.element_to_be_clickable((By.CSS_SELECTOR, "你的按钮选择器")))

# 普通点击无效时，用JS执行点击
driver.execute_script("arguments[0].click();", login_button)

2. 处理Shadow DOM中的按钮 #

若按钮嵌套在Shadow DOM内，需先获取Shadow Root再定位元素：

# 定位Shadow Host容器
shadow_host = driver.find_element(By.CSS_SELECTOR, "Shadow Host的选择器")
# 获取Shadow Root节点
shadow_root = driver.execute_script("return arguments[0].shadowRoot", shadow_host)
# 在Shadow Root内定位按钮并点击
login_button = shadow_root.find_element(By.CSS_SELECTOR, "Shadow内的按钮选择器")
login_button.click()

3. 改进输入方式（替换创建input的方法） #

你当前创建的input元素未与Flutter表单控件绑定，输入内容无法被页面识别。建议直接定位原生输入框并赋值：

# 定位用户名输入框（根据实际属性调整选择器）
username_field = driver.find_element(By.CSS_SELECTOR, "flt-text-field[aria-label='Username']")
# 用JS设置输入值（规避模拟输入的兼容性问题）
driver.execute_script("arguments[0].value = '你的用户名';", username_field)

# 同理处理密码框
password_field = driver.find_element(By.CSS_SELECTOR, "flt-text-field[aria-label='Password']")
driver.execute_script("arguments[0].value = '你的密码';", password_field)

4. 直接触发表单提交 #

如果按钮点击始终无效，可尝试直接触发表单的submit事件：

# 定位页面表单元素（若存在）
form = driver.find_element(By.CSS_SELECTOR, "表单的选择器")
driver.execute_script("arguments[0].submit();", form)

注意事项 #

• 避免使用time.sleep()，改用WebDriverWait等待元素加载，提升脚本稳定性；
• 操作Flutter Web站点时，优先通过JS执行赋值、点击等操作，兼容性优于普通Selenium方法。

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