How to clear the attribute value of an element using selenium webdriver

Question

I have an element, which is kendo numeric textbox. It has values as well, I can get the value by using this code snippet driver.findElement(By.xpath("xpathlocator_value")).getAttribute("value"); but i want to clear the value and i want to update this element with another value. I tried both the ways like using clear() and alsosendkeys(keys.control +"a",keys.delete) but its not working.

The html code is

    <form id="cashbookForm" class="form">
<div class="widget">
<table class="sTable taskWidget" width="100%" cellspacing="0" cellpadding="0">
<thead>
<tbody>
<tr data-bind="css:ExpenseID()==0?'non-printable':'',click:$root.CloseEditable">
<tr data-bind="css:ExpenseID()==0?'non-printable':''">
<td data-bind="text:Order">2</td>
<td>
<td>
<td>
<td>
<td>
<div style="float: right;">
<span class="k-widget k-numerictextbox noform required" style="text-align: right;">
<span class="k-numeric-wrap k-state-default">
<input class="k-formatted-value noform required k-input" type="text" style="text-align: right; display: inline;" tabindex="0" readonly="readonly">
<input class="noform required k-input" type="text" data-bind="kendoNumericTextBox: { value: Ca_TotalAmount, min: 0,format: '#.00'},uniqueName:true" style="text-align: right; display: none;" data-role="numerictextbox" role="spinbutton" tabindex="0" aria-valuemin="0" aria-valuenow="251.44" name="ko_unique_4">
<span class="k-select">
</span>
</span>
</div>
</td>
<td> </td>
<td class="removeOnPrint">
</tr>
<tr class="removeOnPrint">

Here the numeric textbox present at

<input class="k-formatted-value noform required k-input" type="text" style="text-align: right; display: inline;" tabindex="0" readonly="readonly">

What exactly is not working? Any exceptions? Show us your code sample — Furious Duck, Nov 19 '13 at 14:51
We also will need to see the HTML produced by the numeric text box. — Arran, Nov 19 '13 at 15:03

ievche · Answer 1 · 2013-11-19T16:54:36.193

0

You can use JavascriptExecutor to achieve the goal.

JavascriptExecutor executor = (JavascriptExecutor)driver;
executor.executeScript("window.document.getElementById("elementID").setAttribute('value', ' ')");

or

JavascriptExecutor executor = (JavascriptExecutor)driver;
executor.executeScript("window.document.getElementById("elementID").value = ' '");

If you want to use xPath:

JavascriptExecutor executor = (JavascriptExecutor)driver;
executor.executeScript("document.evaluate('xpath_locator', document, null, 9, null).singleNodeValue.value = ' '");

edited Nov 19 '13 at 16:54

answered Nov 19 '13 at 16:48

ievche

1,735
14
22

I tried you last code, still its not working, I tried like JavascriptExecutor executor = (JavascriptExecutor)driver; executor.executeScript("document.evaluate('.//tr[2]/td[6]/div/span/span/input[1]', document, null, 9, null).singleNodeValue.value = ' '"); table.findElement(By.xpath(".//tr[2]/td[6]/div/span/span/input[1]")) .sendKeys("250.50")); But it gives an error in the sendkeys, that it cant find that element is currently not visible and it can't interact with it. and also with your code it is not clearing the field. – Lucan Nov 20 '13 at 10:18
Try `setAttribute('value', ' ')` instead of `value = ' '`. And also try to add timeouts, may be selenium works too fast and element is not loaded, when selenium tries to send keys. – ievche Nov 20 '13 at 10:51
As per your comment i changed the code like executor.executeScript("document.evaluate('.//tr[2]/td[3]/span[@data-bind='text:GetName()']', document, null, 9, null).singleNodeValue.setAttribute('value', ' ')"); but now it gives an error like "org.openqa.selenium.WebDriverException: missing ) after argument list Command duration or timeout: 15 milliseconds Build info: version: '2.35.0', revision: '8df0c6b', time: '2013-08-12 15:43:19' System info: os.name: 'Windows 7', os.arch: 'amd64', os.version: '6.1', java.version: '1.6.0_38'......." – Lucan Nov 20 '13 at 11:06
Change `'.//tr[2]/td[3]/span[@data-bind='te‌xt:GetName()']'` to `\".//tr[2]/td[3]/span[@data-bind='te‌xt:GetName()']\"` and look for where ")" is missed. – ievche Nov 20 '13 at 11:41

score 0 · Answer 2 · answered Feb 07 '20 at 17:28

This is a pretty old question, but I'm posting the answer here in case someone finds it useful. If you're using selenium and you want to remove attribute and not clear it, then here's what works:

public static void javascriptRemoveAttribute(WebElement element, WebDriver driver) {
    JavascriptExecutor executor = (JavascriptExecutor) driver;
    executor.executeScript("arguments[0].removeAttribute('required');", element);
}

It is similar to the first answer but they key is removeAttribute. ExecuteScript basically expects an array of elements. So you pass the element when needs to be modified and then remove its attribute.

score 0 · Answer 3 · answered Mar 31 '20 at 11:44

Using this function you can change the value of the element:

public void clearElementValueByJS(WebElement element, WebDriver driver, Stringvalue) {
    try {
        JavascriptExecutor jse = (JavascriptExecutor) driver;
        jse.executeScript("arguments[0].value='" + value + "'", element);
    } catch (Exception e) {
        e.printStackTrace();
    }
}

OR you can change the inner html value of the element:

public void setInnerHTMLValue(WebElement element, String value) {
    JavascriptExecutor jse = (JavascriptExecutor) driver;
    jse.executeScript("return arguments[0].innerText ='" + value + "'", element);
}

How to clear the attribute value of an element using selenium webdriver

3 Answers3