使用Selenium无法在StackExchange Data Explorer输入查询内容

问题原因 #

StackExchange Data Explorer 使用的是 CodeMirror 代码编辑器，这种编辑器并非原生输入控件：

• 页面上的原生 textarea 通常被隐藏（或仅作为数据同步容器），直接调用 send_keys() 不会触发编辑器的渲染逻辑，因此看不到输入效果。
• 编辑器可见区域由 div、span、pre 等元素模拟，这些元素本身不支持 send_keys() 方法，因为它们不属于可交互的输入元素。

解决办法 #

方法1：调用CodeMirror API直接设置内容 #

这是最可靠的方式，直接通过编辑器自身API写入内容：

from selenium import webdriver

driver = webdriver.Chrome()
driver.get("https://data.stackexchange.com/stackoverflow/query/new")

# 执行JS调用CodeMirror的setValue方法
driver.execute_script("""
// 获取编辑器实例
var editor = document.querySelector('.CodeMirror').CodeMirror;
// 设置查询内容
editor.setValue('SELECT TOP 10 * FROM Posts;');
""")

方法2：操作隐藏的原生textarea并触发更新 #

如果API调用方式失效，可找到页面上的原生textarea，设置其值后触发编辑器同步事件：

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get("https://data.stackexchange.com/stackoverflow/query/new")

# 定位隐藏的textarea
textarea = driver.find_element(By.ID, "query")

# 设置textarea的内容
driver.execute_script("arguments[0].value = 'SELECT TOP 10 * FROM Posts;';", textarea)

# 触发change事件，让编辑器同步内容
driver.execute_script("""
var event = new Event('change', { bubbles: true });
arguments[0].dispatchEvent(event);
""", textarea)

方法3：模拟用户交互输入 #

先激活编辑器区域，再模拟键盘输入（适合需要逐步输入的场景）：

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys

driver = webdriver.Chrome()
driver.get("https://data.stackexchange.com/stackoverflow/query/new")

# 定位CodeMirror编辑器区域并点击激活
code_mirror = driver.find_element(By.CSS_SELECTOR, ".CodeMirror")
code_mirror.click()

# 清空原有内容（全选后删除）
code_mirror.send_keys(Keys.CONTROL + "a")
code_mirror.send_keys(Keys.DELETE)

# 输入查询内容
code_mirror.send_keys("SELECT TOP 10 * FROM Posts;")

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