Changing the Span text on a UI based rich text editor(YAML) using Selenium

Question

My UI (Hashicorp consul KV) has rich text editor which maintains a YAML file. The HTML is little complex with a mix of weird javascript code, I am trying to update the Text on a Span element using the JavascriptExecutor class however its failing,

below is the Xpath of the web element and I am changing '5000' to '100'

By number = By.xpath("//span[text()='5000'][1]");

another way of Xpath

By number = By.xpath("//span[text()='Master']/following::span[contains(text(),'child1')]/following::span[contains(text(),'child2')]/following::span[contains(text(),'child3')]/preceding::span[contains(text(),'5000')][1]");

Trial 1:

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].textContent= '100';", number);

Outptut: Test Failed:Argument is of an illegal type: org.openqa.selenium.By$ByXPath

Trial 2:

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("document.getElementById(\"//span[text()='5000'][1]\").textContent=100");

Output: Test Failed:javascript error: Cannot set properties of null (setting 'textContent')

Trial 3:

((JavascriptExecutor) driver).executeScript("arguments[0].innerHTML= '100';", number);
   webEle.click();
   webEle.clear();              
   webEle.sendKeys("100");

Output: Test Passed but the value was not set/updated

Any suggestion on how this can be achieved or if anyone has done a similar scenario? Thank you

Answer 1

This was possible using the Actions class - https://www.selenium.dev/selenium/docs/api/java/org/openqa/selenium/interactions/Actions.html

Here is the code:

Actions builder = new Actions(driver);
WebElement TimeVal = driver.findElement(By.xpath("//span[text()='5000'][1]"));
builder.click(TimeVal).perform(); builder.moveToElement(TimeVal).clickAndHold().sendKeys(Keys.CLEAR).sendKeys("100").perform();