如何在Flutter/Dart构建的网站上使用Selenium实现自动化操作？

核心原因 #

Flutter Web通过main.dart.js动态渲染DOM结构，静态页面源码仅包含启动脚本，实际交互元素是运行时生成的flt-*系列自定义元素，常规原生元素定位逻辑直接使用会失效。

具体实现步骤 #

1. 等待Flutter渲染完成 #

必须使用显式等待确保页面元素加载完毕，避免过早定位导致失败：

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

driver = webdriver.Chrome()
driver.get("你的目标网站URL")

# 等待核心Flutter容器加载，比如flt-glass-pane元素出现
wait = WebDriverWait(driver, 20)
wait.until(EC.presence_of_element_located((By.TAG_NAME, "flt-glass-pane")))

2. 定位并填充输入框 #

Flutter不会生成原生<input>标签，而是用flt-span等元素模拟输入框，直接调用send_keys可能无效，需通过JavaScript注入内容：

# 定位邮箱输入框（假设元素带有aria-label="邮箱"属性）
email_element = wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, 'flt-span[aria-label="邮箱"]')))
# 用JS设置输入内容
driver.execute_script("arguments[0].textContent = arguments[1];", email_element, "your_email@example.com")
# 触发输入事件，确保Flutter组件感知到内容变化
driver.execute_script("arguments[0].dispatchEvent(new Event('input'));", email_element)

# 同理处理密码输入框
password_element = wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, 'flt-span[aria-label="密码"]')))
driver.execute_script("arguments[0].textContent = arguments[1];", password_element, "your_password")
driver.execute_script("arguments[0].dispatchEvent(new Event('input'));", password_element)

3. 点击提交按钮 #

提交按钮同样是flt-*自定义元素，直接调用click()可能无效，优先用JavaScript触发点击：

submit_button = wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, 'flt-span[aria-label="提交"]')))
driver.execute_script("arguments[0].click();", submit_button)

备选定位方案 #

如果目标元素没有aria-label这类属性，可以尝试：

• 通过文本内容定位：By.XPATH, "//flt-span[contains(text(), '请输入邮箱')]"
• 利用Flutter Semantics属性：若开发时设置了Semantics组件，DOM元素会带有data-semantics-*属性，可通过By.CSS_SELECTOR, 'flt-span[data-semantics-label="邮箱"]'定位

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