如何用Selenium修改UI富文本编辑器（YAML）中的Span文本

问题核心分析 #

你遇到的问题分两层：

• 基础Selenium调用错误：直接把By定位器传给JavascriptExecutor，而非先定位得到WebElement
• 富文本编辑器特殊性：Consul KV的YAML编辑器基于CodeMirror组件，页面上的<span>只是渲染后的视图，直接修改DOM不会同步到编辑器的实际数据模型

基础错误修正（针对普通DOM元素） #

如果是普通span元素，正确操作流程是先定位元素再传入JS执行：

// 1. 先定位到目标元素
WebElement targetSpan = driver.findElement(By.xpath("//span[text()='5000'][1]"));
// 2. 执行JS修改文本
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].textContent = '100';", targetSpan);

但这套逻辑在Consul编辑器里不生效，必须针对CodeMirror组件做特殊处理。

针对Consul CodeMirror编辑器的可行方案 #

方案1：直接替换编辑器完整内容 #

适合需要修改整块YAML的场景，通过CodeMirror实例直接设置新内容：

JavascriptExecutor js = (JavascriptExecutor) driver;
// 替换原YAML中的5000为100，保留其他内容
String updatedYaml = "你的完整YAML内容，将5000替换为100";
// 获取页面上的CodeMirror实例并设置新值
js.executeScript("document.querySelector('.CodeMirror').CodeMirror.setValue(arguments[0]);", updatedYaml);

方案2：定位目标行修改特定值 #

如果只需要修改指定位置的数值，可精准定位到目标行后替换内容：

JavascriptExecutor js = (JavascriptExecutor) driver;
// 获取CodeMirror组件元素
WebElement cmElement = driver.findElement(By.cssSelector(".CodeMirror"));
// 目标行索引（从0开始，根据实际页面调整）
int targetLine = 3;
// 获取该行内容并替换5000为100
js.executeScript("var cm = arguments[0].CodeMirror; var line = cm.getLine(arguments[1]); cm.setLine(arguments[1], line.replace('5000', '100'));", cmElement, targetLine);

方案3：模拟用户真实编辑流程 #

贴近实际操作逻辑，先激活编辑器、选中目标文本再输入新值：

// 定位编辑器并激活
WebElement editor = driver.findElement(By.cssSelector(".CodeMirror"));
editor.click();

// 通过JS选中编辑器中的5000文本
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("var cm = arguments[0].CodeMirror; var cursor = cm.getSearchCursor('5000'); cursor.findNext(); cm.setSelection(cursor.from(), cursor.to());", editor);

// 输入新值100
driver.findElement(By.cssSelector(".CodeMirror textarea")).sendKeys("100");

修改验证方法 #

修改后可通过以下方式确认内容是否生效：

// 获取当前编辑器的完整内容
String currentContent = (String) js.executeScript("return document.querySelector('.CodeMirror').CodeMirror.getValue();");
System.out.println(currentContent); // 检查输出是否包含100

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