Using javascript to set text for a web element - Selenium Web driver

Question

How can text of a web element be set using java script executor? Or is there any other way to do this?

<a class="selectBox selectBox-dropdown selectBox-menuShowing selectBox-active" style="width: 52px; display: inline-block; -moz-user-select: none;" title="" tabindex="0">
<span class="selectBox-label" style="width: 13px;">10</span>
<span class="selectBox-arrow"/>
</a>

There are two span elements under the tag - which is a drop down. User clicks on span[2] and a list is shown which contains data like 10, 20, 30, 40, etc.. User clicks on the number(element) and that is set as the text of span[1] (In this case, 10 is selected). How should I go about solving this?

I tried Action builder and it is not working. Any others suggestions?

Answer 1

If you want to change the text of span[1] directly, you may use following code:

String jScript = "var myList = document.getElementsByClassName(\"selectBox-label\");"
    +"myList[0].innerHTML=\"YourNumber\";"; 
JavascriptExecutor executor = (JavascriptExecutor)driver;
executor.executeScript(jScript);

However, you may also click the number using java script which as you say will set the text of span[1]. Example below:

WebElement element = driver.findElement(By.xpath("YourNumbersXpath"));
JavascriptExecutor executor = (JavascriptExecutor)driver;
executor.executeScript("arguments[0].click();", element);