Desmos带aria-label的textarea调用sendKeys失败，报元素不可交互异常

如何解决Desmos计算器图片属性字段无法交互、报element not interactable异常的问题

Desmos的数值输入框是基于MathQuill封装的自定义编辑器组件，你定位到的textarea默认是透明、尺寸为0的事件捕获载体，Selenium原生的交互逻辑会判定该元素不可交互，所以常规的点击、输入操作都会抛出异常。

你猜测的用JavascriptExecutor处理是正确的方向，具体实现步骤如下：

步骤1：定位对应属性的输入容器 #

优先定位可视化的编辑容器元素（类名为dcg-mq-root-block的span），如果要和指定图片关联，可以保留你原有的父级定位逻辑，也可以用属性名直接定位，比如宽度输入框的XPath为：
//div[contains(text(),'宽度')]/following-sibling::div//span[contains(@class,'dcg-mq-root-block')]
如果是中心点/高度，替换XPath中的宽度为对应属性名即可。

步骤2：激活输入状态并注入数值 #

用Selenium的显示等待确保容器可点击后激活，再通过JS注入完成输入，同时触发组件的内部事件让修改生效，Java示例代码如下：

// 导入依赖
import org.openqa.selenium.support.ui.WebDriverWait;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.JavascriptExecutor;

// 等待容器可点击并点击激活
WebDriverWait wait = new WebDriverWait(driver, 10);
WebElement inputContainer = wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//div[contains(text(),'宽度')]/following-sibling::div//span[contains(@class,'dcg-mq-root-block')]")));
inputContainer.click();

// 用JS输入数值，示例输入20
JavascriptExecutor js = (JavascriptExecutor) driver;
// 优先使用该方法：修改textarea值并触发输入事件
js.executeScript("const textarea = arguments[0].querySelector('textarea');textarea.value = '20';textarea.dispatchEvent(new Event('input'));textarea.dispatchEvent(new Event('change'));", inputContainer);

// 若上述方法不生效，可使用直接修改DOM的方案
// js.executeScript("arguments[0].innerHTML = '<span class=\"dcg-mq-digit\">2</span><span class=\"dcg-mq-digit\">0</span>';arguments[0].dispatchEvent(new Event('input'));", inputContainer);

补充说明 #

• 如果需要清空原有值，可以在输入前加一行JS代码把textarea.value和容器的innerHTML置空即可
• 输入完成后可点击页面空白处触发失焦，确保数值提交生效

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