Change text in the span

Question

I have the following element on a page:

<div class="valueDisplay"><span>Untitled</span></div>

I need to clear "Untitled" and enter my value - "MyValue".

I have the following WebElement:

@FindBy(how = How.XPATH, using = "//div[@class='valueDisplay']//span")
private WebElement inputElement;

I tried the following:

Using JS:

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].innerHTML='" + "MyValue" + "'", inputElement);

Result:

Value in the input is changed, but when I click somewhere (even click on this element) on the page or click Save, old value is presented.

Using Send keys:

inputElement.click();
inputElement.sendKeys("MyValue");
inputElement.click();

Result:

org.openqa.selenium.ElementNotInteractableException: element not interactable

Answer 1

If it's a web form there's going to be an underlying form with a set of fields. You should interact with these inputs instead.

Enter a unique value into the field manually, and then search for that value using your browsers dev tools/inspector. This should allow you to locate the real form and fields, rather than the display elements. Once you find the input, you should be able to use sendKeys on it, or otherwise inject a value using if not.

Answer 2

Normally the way I debug this is through trial and error with either my test or directly in the browser. You can do this in Chrome by opening DevTools, opening the console and typing these values to see if it finds something. Since I don't have that option you can try yourself.

Using JavaScript you should be able to set or overwrite the value with:

document.querySelector('.valueDisplay span').value = 'MyValue';

Or you can use JQuery (if your browser supports it):

$('.valueDisplay span').value("MyValue");

In these examples I'm using CSS / class names instead of XPath. (I personaly find it more readble). Also make sure there are no duplicates on the page.

Answer 3

I found the issue, if input is not focused, there is a following html code:

<div class="editValue"><div class="valueDisplay"><span>Untitled</span></div></div>

If input is focused here is a html code:

<div class="editValue"><div class="valueDisplay"><span class="invisible">Untitled</span></div><input class="valueEdit"></div>

And I sent value to input, value in span is changed.