如何用Selenium JavascriptExecutor修改带::before伪类的div文本值？

首先要明确：::before伪元素是CSS渲染生成的，不属于DOM结构的一部分，无法直接通过Selenium或DOM API修改它的内容。你看到的伪元素文本其实是这个可编辑div的占位提示，核心操作应该针对实际的可输入元素——那个带contenteditable="true"的div.input。

直接操作可编辑元素 #

这个div支持直接输入，你可以通过两种方式向它写入内容：

方法1：使用Selenium原生API #

定位到该元素后，直接调用sendKeys输入文本：

// 定位可编辑div元素
WebElement editableInput = driver.findElement(By.cssSelector("div.stb-LazyChosenDropdown div.tiles div.input"));
// 清空原有内容（如果有）
editableInput.clear();
// 输入新文本
editableInput.sendKeys("你的目标文本");

方法2：通过JavascriptExecutor设置 #

如果原生API遇到交互问题（比如元素状态异常），可以用JS直接修改元素的文本内容：

JavascriptExecutor js = (JavascriptExecutor) driver;
WebElement editableInput = driver.findElement(By.cssSelector("div.stb-LazyChosenDropdown div.tiles div.input"));
// 清空并设置新文本
js.executeScript("arguments[0].textContent = '你的目标文本';", editableInput);
// 若需要富文本内容，可改用innerHTML：
// js.executeScript("arguments[0].innerHTML = '<span>格式化文本</span>';", editableInput);

关于伪元素的补充说明 #

如果确实需要修改伪元素的content（仅用于特殊测试场景），只能通过修改元素的CSS样式实现，前提是页面CSS支持动态覆盖：

// 用JS修改伪元素的content值
js.executeScript("document.querySelector('div.stb-LazyChosenDropdown div.tiles div.input').style.setProperty('content', '\"新的提示文本\"', 'important');");

但注意：这种修改只会改变伪元素的显示文本，不会影响可编辑区域的实际输入内容，通常不是你需要的操作。

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