'clear text field using DELETE or BACK SPACE key in webdriver

I am trying to clear a text field using this action:

emailField.sendKeys("gmail.com");
emailField.sendKeys(Keys.CONTROL,"a",Keys.DELETE);

In above code, the last line only selects the text, does not delete it, but if I separate the actions it works.

emailField.sendKeys(Keys.CONTROL,"a");
emailField.sendKeys(Keys.DELETE);


Solution 1:[1]

From the JavaDoc for WebElement.clear():

If this element is a text entry element, this will clear the value. Has no effect on other elements. Text entry elements are INPUT and TEXTAREA elements. Note that the events fired by this event may not be as you'd expect. In particular, we don't fire any keyboard or mouse events. If you want to ensure keyboard events are fired, consider using something like sendKeys(CharSequence) with the backspace key. To ensure you get a change event, consider following with a call to sendKeys(CharSequence) with the tab key.

Most likely you simply need to call:

emailField.sendKeys("gmail.com");
emailField.clear();

But if you need the clearing to be done via the keyboard for some reason, use Keys.BACKSPACE.

Solution 2:[2]

keys.DELETE can not work to delete the input text,you should use keys.BACKSPACE.

emailField.sendKeys(Keys.BACKSPACE)

Solution 3:[3]

From the JavaDoc for Keys.chord

chord(java.lang.CharSequence... value) Simulate pressing many keys at once in a "chord".

You should be able to use

emailField.sendKeys(Keys.chord(Keys.CONTROL,"a",Keys.DELETE));

Solution 4:[4]

Tested in chrome driver

WE.send_keys(' \b')

This will add space then delete it (backspace)

Solution 5:[5]

I use in javascript and it's working fine:

await textBox.sendKeys(value);
await textBox.sendKeys(Key.BACK_SPACE);

Solution 6:[6]

emailField.sendKeys(Keys.BACKSPACE)

doesn't worked for me .

I used 'Key' instead of 'Keys'

emailField.sendKeys(protractor.Key.BACKSPACE)

Solution 7:[7]

emailField.sendKeys(Keys.CONTROL + "a",Keys.DELETE);

Solution 8:[8]

1. in WebdriverIO, i tried to edit the text by clear text (which contains special charactes like @, +, _) in text field by below following step. Eventhough it was not successful.

example: text=> [email protected]

step1:browser.clearElement(selector);

step2:browser.execute(function () {
            document.querySelector(>>>Cssselector<<<).value="";
        });

step3: browser.doubleClick(selector);
       browser.keys("Delete");

step4: browser.click(selector);
       browser.keys(['Meta',a]);  
       browser.keys('Meta');   
       browser.keys('Delete');

Note: below step is resolved this issue.

var count= browser.getAttribute(selector, value).length;
for (var i=0;i<count;i++)
{
if (browser.getAttribute(selector, value)=='')
break;
}
else
{
browser.doubleClick(selector);
browser.keys("Delete");
}
browser.pause(200);

// it will clear your text field easily.

Note: You can add the new text now.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 LPhuang
Solution 3 Tabatha
Solution 4 Bassem Shahin
Solution 5 Raisul Islam
Solution 6 Gabson
Solution 7 Alexander Machulin
Solution 8