Clear date input fails on chromewebdriver

Question

I ran into a problem while switching from firefoxdriver to chromedriver with selenium, it was working fine in FF but now when I try to clear a date input field I have this error:

Caused by: org.openqa.selenium.InvalidElementStateException: Element must be user-editable
in order to clear it. (WARNING: The server did not provide any stacktrace information)
Command duration or timeout: 38 milliseconds
Build info: version: '2.31.0', revision: '1bd294d185a80fa4206dfeab80ba773c04ac33c0',
time: '2013-02-27 13:51:26'
System info: os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '10.8.2', java.version: 
'1.6.0_41'
Session ID: cb5a1b7e5f4abc4f2e56e2fe284a9dc3
Driver info: org.openqa.selenium.chrome.ChromeDriver
Capabilities [{platform=MAC, chrome.chromedriverVersion=26.0.1383.0, acceptSslCerts=false,
javascriptEnabled=true, browserName=chrome, rotatable=false, locationContextEnabled=false,
version=25.0.1364.160, cssSelectorsEnabled=true, databaseEnabled=false, 
handlesAlerts=true, browserConnectionEnabled=false, nativeEvents=true,
webStorageEnabled=true, applicationCacheEnabled=false, takesScreenshot=true}]
blah blah...

I tried adding the contenteditable attribute to my input fields but no luck there:

  <input type="date" contenteditable="true" required="required" placeholder="YYYY-MM-dd" />

I am not sure if I should report that or where to report it but I found these issues in related projects that somewhat similar:

https://github.com/jnicklas/capybara/issues/554

https://github.com/Behat/MinkSelenium2Driver/pull/29

In the meantime any suggestions to get around that bug?

Ren

Answer 1

As a workaround you can select the webElement representing the input field and perform a

webElement.SendKeys(Keys.Delete);

to clear the field.

Answer 2

I have a solution to this that I have just used in my ChromeDriver project in Eclipse. It is also a work around.

I found that simply using {webElement.Keys} only deleted part of the text in the input field. So you must first use the left arrow key to select the entire text to delete.

The following code should work in ChromeDriver. It is in Java (using Eclipse):

private WebDriver driver;
driver= new ChromeDriver();
Actions action = new Actions(driver);
int lenText = driver.findElement(By.xpath(elementLocator)).getText().length();

for(int i = 0; i < lenText; i++){
  action.sendKeys(Keys.ARROW_LEFT);
}
action.build().perform();

for(int i = 0; i < lenText; i++){
  action.sendKeys(Keys.DELETE);
}
Thread.sleep(1000);
action.build().perform();

Answer 3

welement.click 
Actions action = new Actions(driver); 
action.sendKeys(Keys.DELETE);
action.sendKeys(webelement,value).build().perform();

Answer 4

Sometimes you can change the xpath a bit and get to the point that it works:

For example for this piece of DOM:<tr class="table-filters"><td><input type="text" value=""></td></tr>

if you use:

wait.until(ExpectedConditions.visibilityOfElementLocated(By
                    .xpath("//tr[@class='table-filters']//td"))).clear();

it will not work, but:

wait.until(ExpectedConditions.visibilityOfElementLocated(By
                    .xpath("//tr[@class='table-filters']//td//input"))).clear();

Works.