如何用Selenium定位Flutter Web动态生成的下载按钮？

Flutter Web生成的页面并非标准HTML结构，普通元素审查和page_source无法获取实际渲染的控件，以下是几种可行方案：

1. 访问Flutter Shadow DOM获取元素 #

Flutter Web的所有渲染内容通常包裹在flt-glass-pane元素的Shadow DOM中，你可以通过JS脚本直接读取Shadow DOM内容，进而提取按钮的选择器：

# 获取Shadow DOM内的HTML
shadow_dom_html = driver.execute_script("""
return document.querySelector('flt-glass-pane').shadowRoot.innerHTML;
""")
print(shadow_dom_html)

从输出的HTML中查找下载按钮对应的标签（比如带有下载图标、语义文本的元素），然后用Shadow DOM定位方式点击：

# 定位Shadow DOM内的按钮并点击
driver.execute_script("""
const shadowRoot = document.querySelector('flt-glass-pane').shadowRoot;
const downloadBtn = shadowRoot.querySelector('[aria-label="下载图片"]'); // 替换为实际的属性选择器
downloadBtn.click();
""")

2. 利用Flutter DevTools获取Widget标识 #

Chrome DevTools支持Flutter Web调试，步骤如下：

• 打开Chrome DevTools（F12），切换到Flutter标签（若未显示，需安装Flutter DevTools扩展）
• 在Widget树中找到下载按钮对应的Widget，查看其Key或SemanticsLabel属性
• 通过Flutter暴露的全局JS API定位并点击：

# 通过Widget Key点击
driver.execute_script("""
// 替换为你找到的Widget Key
const downloadWidget = window.flutterAppInstance.getKey('download_button_key');
downloadWidget.click();
""")

3. 模拟坐标点击（兜底方案） #

如果以上方法都失效，可通过按钮的屏幕坐标直接模拟点击：

from selenium.webdriver.common.action_chains import ActionChains
import time

# 先等待页面加载完成
time.sleep(3)
# 滚动到按钮所在区域（根据实际情况调整滚动位置）
driver.execute_script("window.scrollTo(0, 800);")
# 移动到按钮坐标并点击（坐标从截图中获取，比如截图工具显示的x/y值）
actions = ActionChains(driver)
actions.move_by_offset(450, 620).click().perform()

4. 直接抓取下载请求URL #

无需点击按钮，监听页面的下载请求：

# 开启性能日志监听
driver.execute_cdp_cmd('Performance.enable', {})

# 触发下载动作（比如用坐标点击）
actions = ActionChains(driver)
actions.move_by_offset(450, 620).click().perform()

# 筛选下载请求URL
logs = driver.execute_cdp_cmd('Performance.getEntries', {})
for entry in logs['entry']:
    if 'image' in entry['name'] and entry['initiatorType'] == 'click':
        download_url = entry['name']
        # 直接下载文件
        import requests
        with open('downloaded_img.png', 'wb') as f:
            f.write(requests.get(download_url).content)
        break

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