How to dynamically insert a value into a specific HTML element using JavaScript
HTML code snippet:
<div class="CodeMirror-code" style="">
<div style="position: relative;">
<div style="position: absolute; left: -52px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 18px; width: 12px;">1</div>
</div>
<pre>
<span class="cm-word"></span>
</pre>
</div>
</div>
Issue: Inserting text into the span element
<span class="cm-word"></span>Code snippet:
WebDriver driver = DriverFactory.getWebDriver()
WebElement webElement = driver.findElement(By.xpath("//div[@class='CodeMirror-code']//pre"))
JavascriptExecutor executor = ((driver) as JavascriptExecutor)
executor.executeScript("arguments[0].value='sample text';", webElement)
Observation: Upon execution, the text value is not inserted into the element and no errors are shown. Traditional setText method is not effective, hence the JavaScript approach is implemented.
This scenario pertains to a Salesforce application in console mode execution